Sk.* Primitives

Pure CSS shimmer components — no runtime dependencies. Used in auto-generated .skeleton.tsx files and available for manual use:

import { Sk } from 'skeletal-ui'

All primitives are:

Available primitives

Component	Description
`Sk.Text`	Single or multi-line text placeholder
`Sk.Heading`	Heading-height shimmer block
`Sk.Avatar`	Circle or square avatar placeholder
`Sk.Image`	Rectangular image / aspect-ratio placeholder
`Sk.Button`	Button-shaped shimmer
`Sk.Badge`	Badge or chip placeholder
`Sk.Number`	Numeric value placeholder
`Sk.Icon`	Square icon placeholder
`Sk.List`	Repeated list of skeleton items
`Sk.Card`	Block container with composable children

Override defaults globally via skeletal.config.ts:

primitives: {
  avatar: { size: 32 },
  list: { count: 4 },
}

Or per-subtree via SkeletonProvider:

<SkeletonProvider primitives={{ avatar: { size: 32 } }}>
  <App />
</SkeletonProvider>

CSS variables (set globally or via SkeletonProvider):

:root {
  --sk-color: #e2e8f0;
  --sk-radius: 4px;
  --sk-duration: 2s;
}