Design From base
The whole Design From system in one install: theme tokens, the three fonts, utilities, your icon library and your primitive library.
Not yet available: this combination has no tested variant yet. Pick another option above.
Install
Item designfrom-base-radix-lucide · registry JSON
npx shadcn@latest init https://labs.designfrom.com/r/designfrom-base-radix-lucide.jsonnpx shadcn@latest add @designfrom/designfrom-base-radix-lucideOnce, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }
Dependencies
- class-variance-authority@^0.7
- lucide-react@^1
- radix-ui@^1
- utils
- https://labs.designfrom.com/r/designfrom-theme.json
- https://labs.designfrom.com/r/font-figtree.json
- https://labs.designfrom.com/r/font-jetbrains-mono.json
- https://labs.designfrom.com/r/font-instrument-serif.json
- https://labs.designfrom.com/r/use-reduced-motion.json
- https://labs.designfrom.com/r/compose-refs.json
Install
Item designfrom-base-radix-phosphor · registry JSON
npx shadcn@latest init https://labs.designfrom.com/r/designfrom-base-radix-phosphor.jsonnpx shadcn@latest add @designfrom/designfrom-base-radix-phosphorOnce, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }
Dependencies
- class-variance-authority@^0.7
- @phosphor-icons/react@^2
- radix-ui@^1
- utils
- https://labs.designfrom.com/r/designfrom-theme.json
- https://labs.designfrom.com/r/font-figtree.json
- https://labs.designfrom.com/r/font-jetbrains-mono.json
- https://labs.designfrom.com/r/font-instrument-serif.json
- https://labs.designfrom.com/r/use-reduced-motion.json
- https://labs.designfrom.com/r/compose-refs.json
Install
Item designfrom-base-base-lucide · registry JSON
npx shadcn@latest init https://labs.designfrom.com/r/designfrom-base-base-lucide.jsonnpx shadcn@latest add @designfrom/designfrom-base-base-lucideOnce, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }
Dependencies
- class-variance-authority@^0.7
- lucide-react@^1
- @base-ui/react@^1
- utils
- https://labs.designfrom.com/r/designfrom-theme.json
- https://labs.designfrom.com/r/font-figtree.json
- https://labs.designfrom.com/r/font-jetbrains-mono.json
- https://labs.designfrom.com/r/font-instrument-serif.json
- https://labs.designfrom.com/r/use-reduced-motion.json
- https://labs.designfrom.com/r/compose-refs.json
Install
Item designfrom-base-base-phosphor · registry JSON
npx shadcn@latest init https://labs.designfrom.com/r/designfrom-base-base-phosphor.jsonnpx shadcn@latest add @designfrom/designfrom-base-base-phosphorOnce, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }
Dependencies
- class-variance-authority@^0.7
- @phosphor-icons/react@^2
- @base-ui/react@^1
- utils
- https://labs.designfrom.com/r/designfrom-theme.json
- https://labs.designfrom.com/r/font-figtree.json
- https://labs.designfrom.com/r/font-jetbrains-mono.json
- https://labs.designfrom.com/r/font-instrument-serif.json
- https://labs.designfrom.com/r/use-reduced-motion.json
- https://labs.designfrom.com/r/compose-refs.json
Install
Item designfrom-base-aria-lucide · registry JSON
npx shadcn@latest init https://labs.designfrom.com/r/designfrom-base-aria-lucide.jsonnpx shadcn@latest add @designfrom/designfrom-base-aria-lucideOnce, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }
Dependencies
- class-variance-authority@^0.7
- lucide-react@^1
- react-aria-components@^1
- utils
- https://labs.designfrom.com/r/designfrom-theme.json
- https://labs.designfrom.com/r/font-figtree.json
- https://labs.designfrom.com/r/font-jetbrains-mono.json
- https://labs.designfrom.com/r/font-instrument-serif.json
- https://labs.designfrom.com/r/use-reduced-motion.json
- https://labs.designfrom.com/r/compose-refs.json
Install
Item designfrom-base-aria-phosphor · registry JSON
npx shadcn@latest init https://labs.designfrom.com/r/designfrom-base-aria-phosphor.jsonnpx shadcn@latest add @designfrom/designfrom-base-aria-phosphorOnce, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }
Dependencies
- class-variance-authority@^0.7
- @phosphor-icons/react@^2
- react-aria-components@^1
- utils
- https://labs.designfrom.com/r/designfrom-theme.json
- https://labs.designfrom.com/r/font-figtree.json
- https://labs.designfrom.com/r/font-jetbrains-mono.json
- https://labs.designfrom.com/r/font-instrument-serif.json
- https://labs.designfrom.com/r/use-reduced-motion.json
- https://labs.designfrom.com/r/compose-refs.json
Usage
npx shadcn@latest init https://labs.designfrom.com/r/designfrom-base-radix-lucide.jsonCredits
- shadcn/ui and its registry schema · shadcn · MIT
- Lucide icons · Lucide contributors · ISC
- Phosphor Icons · Phosphor Icons (Helena Zhang and Tobias Fried) · MIT
- Tailwind CSS · Tailwind Labs · MIT
- Radix Primitives (the unified radix-ui package) · WorkOS and contributors · MIT
- Base UI (@base-ui/react) · MUI and contributors · MIT
- React Aria Components (react-aria-components) · Adobe and contributors · Apache-2.0
- Figtree typeface · Erik Kennedy · OFL-1.1
- JetBrains Mono typeface · JetBrains · OFL-1.1
- Instrument Serif typeface · Instrument · OFL-1.1
License and source
- License
- MIT
- Author
- Design From Labs <https://labs.designfrom.com>
- Source
- github.com/Design-from-labs/labs
- Commit
- 803b92c1a30e
- Date
- 2026-10-12
- Origin
- labs-examples