Guide
Installation
Components are distributed through the shadcn registry and land in your own source tree as files you own and can edit. Five steps, in order. The registry has to be registered before the CLI can resolve anything, and the token layer has to exist before any component does.
1Set up shadcn, if you have not already
This creates the components.json that the next step edits, and the path aliases every component imports through. Skip it if your project already has one.
npx shadcn@latest init2Point the CLI at the registry
Add this to your components.json. The @minflow namespace is resolved from your own configuration rather than from the command, so without this entry every install fails with a message about a missing registry.
{
"registries": {
"@minflow": "https://minflow.design/r/{name}.json"
}
}3Add the token layer
Every colour, size, radius and duration in the library is a token reference, never a raw value, so this has to arrive before any component or they render against variables that do not exist. It merges the tokens into your stylesheet and installs the runtime dependencies for you: motion, auto-animate, lucide, and the class utilities.
npx shadcn@latest add @minflow/tokens4Add the fonts
Inter carries everything functional, Nunito is reserved for titles and focal numbers. They are the whole typographic budget. Install both, then import them once in your root layout.
pnpm add @fontsource-variable/inter @fontsource-variable/nunitoimport "@fontsource-variable/inter";
import "@fontsource-variable/nunito";5Add a component
Components are pulled in one at a time, and anything a component depends on comes with it. Each component page lists the exact command for that component.
npx shadcn@latest add @minflow/buttonTheme setup
Render the theme script in your root layout, before anything else in the body. It restores the reader's light or dark choice, their reduced-motion setting, and any custom palette before first paint, so the page never flashes the wrong theme on load.