{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "@willink", "homepage": "https://willink-oss.github.io/willink-design-system", "items": [ { "name": "cn", "type": "registry:lib", "title": "cn", "description": "clsx + tailwind-merge class combiner — the shared utility every @willink block/component depends on. Copy-to-own via `npx shadcn add @willink/cn`.", "files": [ { "path": "registry/lib/cn.ts", "type": "registry:lib", "target": "lib/cn.ts" } ], "dependencies": ["clsx", "tailwind-merge"] }, { "name": "contact-form", "type": "registry:block", "title": "Contact form", "description": "Token-themed contact form composing the @willink-labs/react primitives (FormField + Input + Textarea + Button). Copy-to-own via `npx shadcn add @willink/contact-form` — the markup is yours to edit; the primitives and `--color-brand` theming come from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/contact-form/contact-form.tsx", "type": "registry:block", "target": "components/blocks/contact-form.tsx" } ] }, { "name": "page-hero", "type": "registry:block", "title": "Page hero", "description": "Centered marketing hero composing the @willink-labs/react primitives (Badge + Button) — eyebrow badge, title, lead copy, and primary/secondary CTA buttons. Copy-to-own via `npx shadcn add @willink/page-hero`; the markup is yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/page-hero/page-hero.tsx", "type": "registry:block", "target": "components/blocks/page-hero.tsx" } ] }, { "name": "auth-form", "type": "registry:block", "title": "Auth form", "description": "Token-themed sign-in form composing the @willink-labs/react primitives (FormField + Input + Checkbox + Button + Separator) — email/password fields with inline validation, a remember-me checkbox, and an alternate-action divider. Copy-to-own via `npx shadcn add @willink/auth-form`; the markup and validation are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/auth-form/auth-form.tsx", "type": "registry:block", "target": "components/blocks/auth-form.tsx" } ] }, { "name": "pricing-card", "type": "registry:block", "title": "Pricing card", "description": "A single pricing tier composing the @willink-labs/react primitives (Card + Badge + Button) — plan name, price, a popular badge, a feature list, and a CTA. Render several side by side for a pricing table. Copy-to-own via `npx shadcn add @willink/pricing-card`; the copy and features are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/pricing-card/pricing-card.tsx", "type": "registry:block", "target": "components/blocks/pricing-card.tsx" } ] }, { "name": "faq", "type": "registry:block", "title": "FAQ", "description": "A frequently-asked-questions section composing the @willink-labs/react Accordion primitive (single-open, collapsible) — an optional heading and a list of question/answer items. Copy-to-own via `npx shadcn add @willink/faq`; the heading and Q&A are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/faq/faq.tsx", "type": "registry:block", "target": "components/blocks/faq.tsx" } ] }, { "name": "testimonial", "type": "registry:block", "title": "Testimonial", "description": "A customer-quote card composing the @willink-labs/react primitives (Card + Avatar) — a quote with figure/figcaption attribution and an avatar that falls back to initials. Copy-to-own via `npx shadcn add @willink/testimonial`; the quote and attribution are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/testimonial/testimonial.tsx", "type": "registry:block", "target": "components/blocks/testimonial.tsx" } ] }, { "name": "stats", "type": "registry:block", "title": "Stats", "description": "A responsive metrics row composing the @willink-labs/react Card primitive — a grid of label/value (+ optional delta) stat cards in a real
. Copy-to-own via `npx shadcn add @willink/stats`; the metrics and layout are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/stats/stats.tsx", "type": "registry:block", "target": "components/blocks/stats.tsx" } ] }, { "name": "data-table", "type": "registry:block", "title": "Data table", "description": "An admin data table composing the @willink-labs/react primitives (Table + Checkbox + Badge + DropdownMenu + Pagination + Empty) — row + tri-state select-all (indeterminate), status badges, a per-row actions menu wired via an optional onAction prop, real client-side pagination, and an Empty state. Copy-to-own via `npx shadcn add @willink/data-table`; the columns and behaviour are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/data-table/data-table.tsx", "type": "registry:block", "target": "components/blocks/data-table.tsx" } ] }, { "name": "feature-grid", "type": "registry:block", "title": "Feature grid", "description": "A responsive product-feature grid composing the @willink-labs/react primitives (Card + Badge) — an optional eyebrow/heading and a responsive grid of feature cards (title + description). Copy-to-own via `npx shadcn add @willink/feature-grid`; the copy and layout are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/feature-grid/feature-grid.tsx", "type": "registry:block", "target": "components/blocks/feature-grid.tsx" } ] }, { "name": "cta-section", "type": "registry:block", "title": "CTA section", "description": "An end-of-page call-to-action band composing the @willink-labs/react primitives (Badge + Button) — an optional eyebrow, title, supporting copy, and primary/secondary CTA buttons (asChild link-wrapped). Copy-to-own via `npx shadcn add @willink/cta-section`; the copy is yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/cta-section/cta-section.tsx", "type": "registry:block", "target": "components/blocks/cta-section.tsx" } ] }, { "name": "settings-form", "type": "registry:block", "title": "Settings form", "description": "An account/preferences settings surface composing the @willink-labs/react primitives (Tabs + Card + Label + Input + Switch + Select + RadioGroup + Separator + Button) — tabbed sections of grouped setting rows (text fields, toggles, selects, radios) with a save/cancel footer. Copy-to-own via `npx shadcn add @willink/settings-form`; the fields and behaviour are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/settings-form/settings-form.tsx", "type": "registry:block", "target": "components/blocks/settings-form.tsx" } ] }, { "name": "command-palette", "type": "registry:block", "title": "Command palette", "description": "A ⌘K modal command palette composing the @willink-labs/react primitives (Command inside a controlled Dialog) — a ⌘K/Ctrl+K keyboard toggle, fuzzy-search input, grouped commands with shortcuts, and an empty state. Copy-to-own via `npx shadcn add @willink/command-palette`; the commands are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/command-palette/command-palette.tsx", "type": "registry:block", "target": "components/blocks/command-palette.tsx" } ] }, { "name": "page-header", "type": "registry:block", "title": "Page header", "description": "An app/admin page header composing the @willink-labs/react primitives (Breadcrumb + Badge + ButtonGroup + Button + DropdownMenu) — a breadcrumb trail, title with optional status badge, primary/secondary action buttons (onClick), and an overflow actions menu (onSelect). Copy-to-own via `npx shadcn add @willink/page-header`; the actions are yours to wire and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/page-header/page-header.tsx", "type": "registry:block", "target": "components/blocks/page-header.tsx" } ] }, { "name": "comparison-table", "type": "registry:block", "title": "Comparison table", "description": "A tiered pricing/feature comparison matrix composing the @willink-labs/react primitives (Table + ToggleGroup + HoverCard + Badge + Button) — a monthly/annual billing toggle, a plan-per-column table with ✓/✗ cells (with text alternatives), HoverCard feature explainers, and per-plan CTA buttons (onSelectPlan). Companion to pricing-card. Copy-to-own via `npx shadcn add @willink/comparison-table`; the plans and features are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/comparison-table/comparison-table.tsx", "type": "registry:block", "target": "components/blocks/comparison-table.tsx" } ] }, { "name": "confirm-dialog", "type": "registry:block", "title": "Confirm dialog", "description": "A reusable destructive-confirmation dialog composing the @willink-labs/react AlertDialog + Button primitives — a trigger button opens a focus-trapped `role=\"alertdialog\"` with a title, description, Cancel, and a danger-styled confirm action wired to an onConfirm callback. Copy-to-own via `npx shadcn add @willink/confirm-dialog`; the copy and handler are yours and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/confirm-dialog/confirm-dialog.tsx", "type": "registry:block", "target": "components/blocks/confirm-dialog.tsx" } ] }, { "name": "dashboard-shell", "type": "registry:block", "title": "Dashboard shell", "description": "A responsive app shell composing the @willink-labs/react primitives (Sheet + ScrollArea + Avatar + DropdownMenu + Button + Badge + Separator) — a fixed desktop sidebar (mobile Sheet drawer) with a scrollable nav rail, a topbar with the mobile menu trigger + title + a user Avatar menu (onSelect), wrapping arbitrary `children`. Copy-to-own via `npx shadcn add @willink/dashboard-shell`; the nav and user menu are yours to wire and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/dashboard-shell/dashboard-shell.tsx", "type": "registry:block", "target": "components/blocks/dashboard-shell.tsx" } ] }, { "name": "team-grid", "type": "registry:block", "title": "Team grid", "description": "A responsive team/people grid composing the @willink-labs/react primitives (Card + Avatar + HoverCard + Badge) — member cards with an avatar (image or initials fallback), name, role badge, and an optional HoverCard bio popover. Copy-to-own via `npx shadcn add @willink/team-grid`; the members are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/team-grid/team-grid.tsx", "type": "registry:block", "target": "components/blocks/team-grid.tsx" } ] }, { "name": "article-card", "type": "registry:block", "title": "Article card", "description": "A blog/article preview card composing the @willink-labs/react primitives (Card + Badge + Avatar + Button) — a category badge, title, excerpt, an author avatar + date footer, and a read-more link. Copy-to-own via `npx shadcn add @willink/article-card`; the content is yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/article-card/article-card.tsx", "type": "registry:block", "target": "components/blocks/article-card.tsx" } ] }, { "name": "stat-highlight", "type": "registry:block", "title": "Stat highlight", "description": "A single rich KPI/metric highlight card composing the @willink-labs/react primitives (Card + Progress + Badge) — a label, a large value, a trend badge, and a goal Progress bar. Complements the stats row block. Copy-to-own via `npx shadcn add @willink/stat-highlight`; the metric is yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/stat-highlight/stat-highlight.tsx", "type": "registry:block", "target": "components/blocks/stat-highlight.tsx" } ] }, { "name": "subscribe-inline", "type": "registry:block", "title": "Subscribe (inline)", "description": "A compact inline email-capture composing the @willink-labs/react primitives (FormField + Input + Button + Alert) — a single-field newsletter/waitlist form with inline validation and a success Alert, wired to an onSubscribe callback. Copy-to-own via `npx shadcn add @willink/subscribe-inline`; the copy is yours and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/subscribe-inline/subscribe-inline.tsx", "type": "registry:block", "target": "components/blocks/subscribe-inline.tsx" } ] }, { "name": "newsletter-signup", "type": "registry:block", "title": "Newsletter signup", "description": "A card-framed newsletter signup composing the @willink-labs/react primitives (Card + FormField + Input + Checkbox + Label + Button + toast) — email validation, a consent checkbox, and a success toast (mount once at your app root). Copy-to-own via `npx shadcn add @willink/newsletter-signup`; the copy is yours and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/newsletter-signup/newsletter-signup.tsx", "type": "registry:block", "target": "components/blocks/newsletter-signup.tsx" } ] }, { "name": "logo-cloud", "type": "registry:block", "title": "Logo cloud", "description": "A \"trusted by\" social-proof logo strip composing the @willink-labs/react primitives (ScrollArea + Avatar + Skeleton + Tooltip) — a horizontally-scrollable row of greyscale logos with company-name tooltips and an optional loading state. Copy-to-own via `npx shadcn add @willink/logo-cloud`; the logos are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/logo-cloud/logo-cloud.tsx", "type": "registry:block", "target": "components/blocks/logo-cloud.tsx" } ] }, { "name": "testimonial-wall", "type": "registry:block", "title": "Testimonial wall", "description": "A multi-quote social-proof wall composing the @willink-labs/react primitives (Card + Avatar + Badge) — a masonry layout of testimonial cards, each with figure/figcaption attribution, an avatar, and an optional tag badge. Extends the single testimonial block. Copy-to-own via `npx shadcn add @willink/testimonial-wall`; the quotes are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/testimonial-wall/testimonial-wall.tsx", "type": "registry:block", "target": "components/blocks/testimonial-wall.tsx" } ] }, { "name": "description-list", "type": "registry:block", "title": "Description list", "description": "A metadata/settings-summary readout composing the @willink-labs/react primitives (Card + Separator + Badge + Tooltip + Collapsible) — a real
of term/description rows with optional tooltips, badges, and an expandable details section. Copy-to-own via `npx shadcn add @willink/description-list`; the items are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/description-list/description-list.tsx", "type": "registry:block", "target": "components/blocks/description-list.tsx" } ] }, { "name": "range-filter", "type": "registry:block", "title": "Range filter", "description": "A faceted number/price range filter composing the @willink-labs/react primitives (Popover + Slider + Badge + Button + Label) — a popover trigger showing the current range as a badge, a two-thumb slider with a formatter, and apply/reset actions wired to onApply. Copy-to-own via `npx shadcn add @willink/range-filter`; the range and formatter are yours to edit and the `--color-brand` theming comes from the npm packages (ADR-0020).", "dependencies": ["@willink-labs/react", "@willink-labs/tailwind-preset"], "files": [ { "path": "registry/blocks/range-filter/range-filter.tsx", "type": "registry:block", "target": "components/blocks/range-filter.tsx" } ] } ] }