Guide
Installation
Four steps, in order. The token layer has to exist before any component does, because every component styles itself entirely through it.
1Install the dependencies
Motion and auto-animate are not optional; every component's transitions run through them. Lucide supplies every glyph in the system, and the two variable fonts are the whole typographic budget.
pnpm add motion @formkit/auto-animate lucide-react class-variance-authority tailwind-merge clsx2Add the fonts
Inter carries everything functional, Nunito is reserved for titles and focal numbers. Import both once in your root layout.
pnpm add @fontsource-variable/inter @fontsource-variable/nunito3Generate the token layer
Every colour in the library is a token reference, never a raw value. Copy the token block into your global stylesheet before adding any component, or components will render against variables that do not exist yet.
npx shadcn@latest add @minflow/tokens4Add a component
Components are pulled in one at a time and land in your own source tree, so you can edit them. 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.