Every component in the registry

Colour, radius, shadow, and motion tokens, the keyframes, the global reduced-motion policy, and the data-foundation admin and vendor re-skin hooks. Add this before any component.

npx shadcn@latest add @ludo/theme

The cn class-merge helper that every component imports.

npx shadcn@latest add @ludo/utils

Framework-agnostic motion source: DURATIONS, EASINGS, SPRINGS, PRESETS (enter/exit/fade/slide/pop/stagger), and reduced-motion notes. Consumable by the motion lib (web) and Reanimated/Moti (RN).

npx shadcn@latest add @ludo/motion

KPI surface built on Card: optional icon chip + accent-dot label, a value that tweens with a dependency-free useCountUp hook (rAF ease-out, reduced-motion safe), optional unit subscript, an optional success/error-tinted delta Badge with a reserved-height spacer so rows stay aligned, and a highlighted variant.

npx shadcn@latest add @ludo/stat-card

Vertical-rhythm dashboard wrapper with an optional eyebrow/title/description header block and a content area that cascades children in on mount via stagger-children (reduced-motion degrades to opacity-only).

npx shadcn@latest add @ludo/section

Responsive grid wrapper for StatCards: two-up on small screens scaling to a 2/3/4 column count at lg, or an auto-fill track of 220px-min cards. Applies stagger-children by default.

npx shadcn@latest add @ludo/stat-grid

Styled multiline textarea matching Input: rounded-md border-input on bg-card, the shared focus ring, aria-invalid, and disabled states; min-height of four rows.

npx shadcn@latest add @ludo/textarea

Radix Separator on bg-border: horizontal (h-px w-full) or vertical (w-px h-full) via orientation, decorative by default.

npx shadcn@latest add @ludo/separator

Radix Progress with a muted rounded track and a primary indicator that slides via a CSS transform transition (duration-base, ease-standard, reduced-motion safe).

npx shadcn@latest add @ludo/progress

Composed breadcrumb nav: list, item, link (asChild via Slot), current page (aria-current), ChevronRight separator, and ellipsis. text-muted-foreground with the current page in text-foreground.

npx shadcn@latest add @ludo/breadcrumb

Tinted Card for a framed message: cva variants success | info | warning | error | neutral mapping to the semantic tokens, a tinted leading icon slot, a title, body/bullets via children, and an optional dismiss or collapse text action top-right.

npx shadcn@latest add @ludo/callout

Read-only rounded-full status label with cva variants success | warning | error | info | neutral on the matching semantic tints, an optional leading dot, and an optional pulse for a Live state.

npx shadcn@latest add @ludo/status-pill

Mono data-honesty pill that labels a number's provenance. cva variants live, sample, fallback, error, and soon (dashed border for not-yet-shipped).

npx shadcn@latest add @ludo/source-badge

A toggleable filter control, deliberately squared so it reads as a control, not a status pill. Active fills with bg-primary; inactive is a quiet bordered chip. Ships a FilterChipGroup wrapper.

npx shadcn@latest add @ludo/filter-chip

Radix Popover on the @ludo pop preset (fade + scale), side-aware via the Radix content transform-origin.

npx shadcn@latest add @ludo/popover

Radix Tooltip on the @ludo tooltip preset (fast fade + small pop).

npx shadcn@latest add @ludo/tooltip

Radix Dialog as an edge sheet (top/right/bottom/left) on the @ludo per-side slide presets + overlay fade.

npx shadcn@latest add @ludo/sheet

Radix Accordion on the @ludo accordion-down/up height keyframes (base duration).

npx shadcn@latest add @ludo/accordion

Radix Toast on the @ludo enter/exit presets, with full control over the easing and duration tokens. Ships the primitives plus a Toaster wrapper and useToast/toast helpers.

npx shadcn@latest add @ludo/toast

Radix Tabs with @ludo focus-ring and data-state active styling; active panels fade in on the @ludo fade-in preset.

npx shadcn@latest add @ludo/tabs

Composable nav sidebar driven by the @ludo sidebar tokens. SidebarNav renders a single shared-element active pill that slides between items. Supports a collapsed icon-only rail, mono group eyebrows, optional count badges, and SidebarPanel for lower sidebar cards.

npx shadcn@latest add @ludo/sidebar

Shimmer loading placeholders (no spinner). Base Skeleton plus SkeletonText, SkeletonRows, and SkeletonChart. Counts are configurable via props.

npx shadcn@latest add @ludo/skeleton

Centred nothing-here-yet column with an optional icon slot, a title, a muted description, and an optional CTA action slot.

npx shadcn@latest add @ludo/empty-state

Responsive table generic over a row type. A real table at md and up with sortable mono headers, tabular-nums cells, and stacked label/value cards below md. Honours the data-honesty rule: null/empty/zero cells render an em-dash, loading shows SkeletonRows, error and empty fall back to EmptyState.

npx shadcn@latest add @ludo/data-table

CSS-Grid app frame: a fixed-width sidebar slot + a min-w-0 scrolling main slot at lg, collapsing to a single column with a Sheet drawer below lg. Supports a collapsed rail and a persistKey that remembers the state in localStorage.

npx shadcn@latest add @ludo/dashboard-shell

Sticky-friendly page title block: an optional mono eyebrow, a title, an optional truncating subtitle, and a right-aligned actions slot. Adds an optional tabbed sub-nav row with a SOON badge on disabled tabs.

npx shadcn@latest add @ludo/page-header

Radix Label with text-sm font-medium and peer-disabled styling, for pairing with form controls.

npx shadcn@latest add @ludo/label

Radix Switch with a track + thumb; checked turns the track bg-primary and slides the thumb on the @ludo fast/standard transition (reduced-motion safe).

npx shadcn@latest add @ludo/switch

Radix Checkbox, size-4 rounded-sm border; checked is bg-primary/text-primary-foreground with a lucide Check icon and the @ludo focus-ring.

npx shadcn@latest add @ludo/checkbox

Radix Avatar (Root/Image/Fallback), size-9 rounded-full by default; fallback renders bg-muted/text-muted-foreground initials.

npx shadcn@latest add @ludo/avatar

Radix Select with an input-height trigger (h-9, bg-card, chevron) and a popover-styled panel on the @ludo pop preset; check indicator on the selected item, scroll buttons, label + separator.

npx shadcn@latest add @ludo/select

Radix Dropdown Menu with a popover-styled panel on the @ludo pop preset; items, checkbox/radio items, label, separator, shortcut, and nested submenus.

npx shadcn@latest add @ludo/dropdown-menu

react-day-picker styled to @ludo tokens: primary-filled selected day, today ring, accent range middle, ghost-button month nav. Single + range modes.

npx shadcn@latest add @ludo/calendar

Popover + Button trigger (calendar icon + formatted date) wrapping Calendar. DatePicker selects a single date; DateRangePicker returns a two-month {from, to} range.

npx shadcn@latest add @ludo/date-picker

Pagination nav composed on buttonVariants: content, items, links (active -> outline), previous/next, and ellipsis.

npx shadcn@latest add @ludo/pagination

cmdk command palette styled to @ludo tokens: search input with icon and border, scrollable list, group headings (text-muted-foreground), items (data-[selected] -> bg-accent, rounded-sm), separator, and a shortcut hint. CommandDialog drops it inside the @ludo Dialog so it animates on the dialog keyframes.

npx shadcn@latest add @ludo/command

Popover + Command + Button trigger composed into a single-select combobox: trigger shows the selected label or placeholder with a chevron, the panel filters options by search, and the chosen option carries a Check. Controlled via value/onChange over an options {value, label}[].

npx shadcn@latest add @ludo/combobox

react-hook-form integration: Form (FormProvider), FormField (Controller wrapper providing field-name context), FormItem (generates ids), FormLabel (wraps @ludo Label, turns text-destructive on error), FormControl (Slot wiring aria-describedby/aria-invalid), FormDescription (text-xs muted), FormMessage (text-xs destructive, renders the field error), plus the useFormField hook.

npx shadcn@latest add @ludo/form

Lightweight SVG area chart. Smooth lines, gradient area fills, muted axes/grid, default series colours from --chart-1..5, and a reduced-motion-aware draw/fade-in. Exports Chart and ChartLegend.

npx shadcn@latest add @ludo/chart

SVG vertical bar chart from { label, value }[]. Bars fill --primary-soft with an optional highlight bar in amber, mono ticks, dashed gridlines, and a grow-from-baseline draw-in. Empty data renders an em-dash.

npx shadcn@latest add @ludo/bar-chart

SVG donut/ring chart from { label, value, color? }[]. Segments over a muted track, a centre total slot, and a dot+label+value/percent legend. Accessible and reduced-motion-aware. Zero total renders an em-dash.

npx shadcn@latest add @ludo/donut-chart

Horizontal-bar ranking list from { label, value, color? }[]. Each row is a label over an inline bar with the value right-aligned in mono tabular-nums. Empty list renders an em-dash.

npx shadcn@latest add @ludo/bar-list

iPhone 6.1" mockup at aspect-[393/852]. Edge-to-edge screen, thin even bezel, centred Dynamic Island, home-indicator pill.

npx shadcn@latest add @ludo/phone-frame

Clover Mini 3 countertop POS at aspect-[800/1280] (portrait). Thick bezel slab, receipt-printer slot, card-reader strip.

npx shadcn@latest add @ludo/pos-frame

Zebra TC27 rugged handheld at aspect-[1/2] (portrait 18:9). Chunky body, thicker top/bottom bezels, scanner strip, side scan-trigger nub.

npx shadcn@latest add @ludo/handheld-frame

Zebra KC50 self-service kiosk at aspect-[9/16] (portrait). Thick outer bezel, big screen area, camera dot, pedestal hint.

npx shadcn@latest add @ludo/kiosk-frame