Skeleton loaders provide a placeholder preview of content while data is being loaded. They reduce perceived wait time and improve the user experience during loading states.
Use variant to control the shape of the skeleton. Options are text, circular, rectangular, card, and table-row.
Text
Circular
Rectangular
Card
Table Row
Set [animated]="false" to disable the pulse animation.
Run the following command to add this component to your project:
npx base-ui-cli add skeleton
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add skeleton
// Paths are relative to aliases.components (default: src/app/components)
import { SkeletonComponent } from './skeleton/skeleton.component';
@Component({
selector: 'app-your-component',
imports: [
SkeletonComponent
],
template: `...`
})
export class YourComponent {} API for skeleton — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-skeleton | class | string | '' | Additional host CSS classes (merged via cn()). |
base-skeleton | variant | SkeletonVariant | 'text' | — |
base-skeleton | count | number | 1 | — |
base-skeleton | width | string | undefined | undefined | — |
base-skeleton | height | string | undefined | undefined | — |
base-skeleton | animated | boolean | true | — |
Content