Skeleton
A placeholder used to indicate content that is currently loading.
bunx shadcn@latest add @nx-ui/skeletonBasic usage
Shape the placeholder with width, height and rounding utilities on className.
Shapes
The same primitive covers text lines, avatars, chips and blocks — only the className changes.
Text block
Stagger line widths so the placeholder reads as ragged text rather than a solid bar.
Loading card
Mirror the eventual layout with skeleton placeholders rather than a spinner, so the page doesn't jump on load.
Composition: collection round roster
A list of organics-collection crew members while the roster is still loading, next to the loaded state for comparison.
Site lead, Barrowfield compost trial
Logistics, feedstock collection rounds
Volunteer coordinator
Composition: intake table
Skeleton rows keep a data table's column widths stable while the weekly intake figures for each site are fetched.
| Site | Stream | Tonnes this week | Status |
|---|---|---|---|
| Elmswell composting site | Green waste | 412t | On track |
API reference
Exported parts and their props, extracted from the component source.
…extends React.ComponentProps<"div">