Labs UI

Components built on Radix, Base UI or React Aria, with Lucide or Phosphor icons. Install them with the shadcn CLI, the designfrom CLI or npm.

npx designfrom list

Components

Badge
Component
A compact status label in five tones, with a matching status icon and a subtle tinted style.
4 variants · Labs examples
Button
Component
A button with five variants, four sizes and a loading state that keeps focus and announces progress, on Radix, Base UI or React Aria.
6 variants · Labs examples
Tooltip
Component
A short text hint for a control that opens on hover after a delay and on keyboard focus, and closes with Escape, on Radix, Base UI or React Aria.
3 variants · Labs examples

composeRefs
Utility
Combines several React refs (callbacks or objects) into one ref callback, with React 19 cleanup support.
1 variant · Labs examples
Design From base
Base
The whole Design From system in one install: theme tokens, the three fonts, utilities, your icon library and your primitive library.
6 variants · Labs examples
- background
- foreground
- primary
- secondary
- muted
- accent
- destructive
- border
Design From theme
Theme
The Design From Labs color, radius and focus tokens for light and dark, using shadcn's variable names.
1 variant · Labs examples
Figtree
Font
The Figtree variable typeface as the sans-serif font (--font-sans).
1 variant · Labs examples
Instrument Serif
Font
The Instrument Serif typeface as the display serif font (--font-serif).
1 variant · Labs examples
JetBrains Mono
Font
The JetBrains Mono variable typeface as the monospace font (--font-mono).
1 variant · Labs examples
useReducedMotion
Hook
A hook that reports whether the user prefers reduced motion and updates when the setting changes.
1 variant · Labs examples