Spinner & Skeleton

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/spinner.json https://dyeoh.github.io/flootlets/r/skeleton.json

Both need Tailwind CSS v4; see Installation for the setup.

LoadingLoadingLoading products

export default function LoadingStates() {
  return (
    <>
      <Spinner size="sm" />
      <Spinner />
      <Spinner size="lg" label="Loading products" />
      <Stack gap={2} class="w-56" aria-busy="true">
        <Skeleton height="8rem" />
        <Skeleton shape="text" width="70%" />
        <Skeleton shape="text" width="40%" />
      </Stack>
    </>
  );
}

Spinner is announced as a status (“Loading”, or your label). Inside something that already announces its state, like a loading Button, use decorative to keep it silent. For visitors who prefer reduced motion it pulses instead of spinning.

Skeleton is a placeholder shape, hidden from screen readers. Mark the region that’s loading with aria-busy="true" instead.

Spinner prop	Type	Default
label	string	'Loading'
size	'sm' | 'default' | 'lg'	'default'
decorative	boolean	false

Skeleton prop	Type	Default
width, height	CSS length	full width, one line
shape	'rect' | 'text' | 'circle'	'rect'