‹ components

EmptyState

stablev1.0.0·open in canvas

Designed empty -- cold-start is a first-class state.

Installnpx shadcn add @cids/empty-state
Live demo

No watchers yet

Quiet tide. First one in sets the current.

Motion · tap to replay

honors reduced-motion

None of its own.

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { EmptyState, Button } from "@/design-system";

<EmptyState
  title="No watchers yet"
  hint="Quiet tide. First one in sets the current."
  action={<Button variant="primary">Watch JUP</Button>}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Designed empty -- cold-start is a first-class state.

Anatomy

+ ~ dashed outline card ~ +
|          @              |
|    No watchers yet      |
|  one playful hint line  |
|      [ action ]         |
+-------------------------+

Props

PropTypeDefaultNotes
glyphstring"@"-like markerDecorative, aria-hidden.
titlestring--The factual line.
hintstring--One line -- the playful budget lives here.
actionReactNode--Usually a Button.
classNamestring--cn-merged.

Motion

None of its own.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.