Consuming the registry

​

Prerequisites

1. A components.json file — created by npx shadcn@latest init.
2. The cn() utility in lib/utils.ts.
3. Tailwind CSS with the Mzizi design tokens in your global stylesheet. See design tokens.

​

Installing

​

A single component

npx shadcn@latest add https://mzizi.dev/api/v1/ui/button

​

Several at once

npx shadcn@latest add \
  https://mzizi.dev/api/v1/ui/card \
  https://mzizi.dev/api/v1/ui/badge \
  https://mzizi.dev/api/v1/ui/dialog

​

Hooks and libraries

npx shadcn@latest add https://mzizi.dev/api/v1/ui/use-toast
npx shadcn@latest add https://mzizi.dev/api/v1/ui/utils
npx shadcn@latest add https://mzizi.dev/api/v1/ui/circuit-breaker

​

Dependency resolution

1. Install npm dependencies — packages such as radix-ui, class-variance-authority or recharts.
2. Install registry dependencies — other registry items the component needs. Installing dialog pulls in button.

​

What you get

components/
  ui/
    button.tsx    <- full source, in your repository, yours to edit

​

Customising after install

​

Adding a variant

// components/ui/button.tsx
const buttonVariants = cva("...", {
  variants: {
    variant: {
      default: "...",
      outline: "...",
      cobalt: "bg-[var(--color-cobalt)] text-white hover:bg-[var(--color-cobalt)]/90",
    },
  },
})

​

Extending props

interface ButtonProps
  extends React.ComponentProps<"button">,
    VariantProps<typeof buttonVariants> {
  loading?: boolean
}

​

Updating

npx shadcn@latest add https://mzizi.dev/api/v1/ui/button

1. Commit your current state.
2. Run the update.
3. Read the diff and re-apply your changes.

​

Using the API directly

curl https://mzizi.dev/api/v1/ui/button
curl https://mzizi.dev/api/v1/ui

​

Practices worth keeping

1. Install from the registry rather than copying code out of documentation — the docs paraphrase, the API does not.
2. Keep cn(). Components depend on it from @/lib/utils.
3. Keep the token layer. Components reference CSS custom properties; without them they render with whatever your project’s fallbacks happen to be.
4. Test after updating. Check appearance and behaviour, not just that the build passes.
5. Track changes in version control so an update diff is legible.