ThemefoundationsLabs examplesMIT
Design From theme
The Design From Labs color, radius and focus tokens for light and dark, using shadcn's variable names.
Not yet available: this combination has no tested variant yet. Pick another option above.
- background
- foreground
- primary
- secondary
- muted
- accent
- destructive
- border
Install
Item designfrom-theme · registry JSON
npx shadcn@latest add https://labs.designfrom.com/r/designfrom-theme.jsonnpx shadcn@latest add @designfrom/designfrom-themeOnce, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }
Dependencies
- None.
Usage
npx shadcn@latest add https://labs.designfrom.com/r/designfrom-theme.jsonAccessibility
- Text tokens meet WCAG AA contrast (4.5:1) on their background tokens in light and dark.
- The ring token reaches at least 3:1 against the background, so focus indicators stay visible.
Credits
- shadcn/ui and its registry schema · shadcn · MIT
- Tailwind CSS · Tailwind Labs · MIT
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