Zellify is a shadcn/ui registry. A project adds it once, then installs the theme and each component with the shadcn CLI.
In components.json, add the registry under registries. A project without shadcn yet runs npx shadcn@latest init first.
{ "registries": { "@zellify": "https://zellify-design-system.vercel.app/r/{name}.json" }}The theme writes the tokens for light and dark into your stylesheet, with the radius scale and the fonts.
npx shadcn@latest add @zellify/themeAdd each component when a screen needs it. The CLI brings its dependencies along.
npx shadcn@latest add @zellify/buttonnpx shadcn@latest add @zellify/dialognpx shadcn@latest add @zellify/fieldGive your agent this prompt. It is the same one the Copy install prompt button copies.
Install the Zellify design system in this project. It is a shadcn/ui registry built on Radix UI.
1. In components.json, add the registry: "registries": {"@zellify":"https://zellify-design-system.vercel.app/r/{name}.json"}2. Install the theme (tokens for light and dark, fonts, radius): npx shadcn@latest add @zellify/theme3. Add the components the screen needs, for example: npx shadcn@latest add @zellify/button
Rules: use the theme's tokens for every colour, never raw palette values. Keep shadcn's component APIs as they are.Docs and examples: https://zellify-design-system.vercel.appDesigners use the same components from the Figma library. Its variables carry the CSS variable names as code syntax, so Dev Mode shows var(--primary) rather than a hex value.