--- name: amezquita-design-system description: Build UI with @amezquita/design-system — React 19 components, DTCG design tokens, and a shadcn-spec component registry. Use when writing or reviewing code that imports from `@amezquita/design-system`, references its CSS custom properties, or when a page needs a Button, Dialog, DataTable, or any of its 32 other public components. metadata: author: Antonio Amezquita homepage: https://design.amezquita.dk --- @amezquita/design-system is a token-first, multi-brand React component library — 35 public components across primitives, composition, and pattern tiers, DTCG design tokens resolved across base/portfolio × light/dark, and a real npm package. Not copy-paste source: components are imported, not vendored. ## Install ```bash npm install @amezquita/design-system ``` Or install a single component via the registry: ```bash npx shadcn add https://design.amezquita.dk/r/.json ``` ```tsx import { Button } from '@amezquita/design-system/components/primitives/Button' import '@amezquita/design-system/styles/brands/base-light.css' import '@amezquita/design-system/styles/brands/base-dark.css' ``` Import the brand CSS once, in your root layout. `base` is the neutral default; for the portfolio brand, also import `portfolio-light.css` and `portfolio-dark.css` after these. Dark mode applies inside any element with `data-mode="dark"`. To show the portfolio brand in one part of a page only, import `portfolio-scoped.css` instead of those two and wrap that part in `` (composition tier). `mode="dark"` or `mode="light"` on a ThemeScope sets that part's mode, and overlays opened inside it follow both. Next.js apps also need `transpilePackages: ['@amezquita/design-system']` in `next.config.js` — this package ships source `.tsx`/`.css`, not a pre-built bundle. ## Components Full prop tables, real tokens, and a usage example for every component: `https://design.amezquita.dk/components/.md`. Don't guess a prop name or a token — read the twin. ### Primitives (16) | Component | Reference | |---|---| | Avatar | [avatar](https://design.amezquita.dk/components/avatar.md) — User profile picture with fallback to initials when no image is provided | | Badge | [badge](https://design.amezquita.dk/components/badge.md) — Small status indicator or numeric count overlay attached to another element | | Button | [button](https://design.amezquita.dk/components/button.md) — Trigger for user actions; renders as `