Open source, MIT licensed
React components that animate every change of state
Primitives, components, blocks and templates on one design language. A dialog grows to fit its next step, a tab indicator slides to the new choice. Copy any of them into your project with one command.
604 components in 30 categories
Components grouped by what they do
Every category shows its variants side by side, each with its code and the command that installs it.
72 primitives
Try the pieces before you install them
Every component is built from these primitives on Base UI. Press, slide and open them here: the motion you feel is the motion you install.
Button
Gives on press, then its label morphs
Dialog
Resizes to the content of each step
Tabs
The thumb travels to the new choice
Slider
A bubble follows the thumb while it moves
Switch
The thumb slides to its new side
Checkbox
The mark swaps in when checked
Select
The list grows from its trigger
Radio group
The dot swaps in when picked
50 blocks in 21 groups
Whole sections of a product, with fictional data
App shells, boards, task lists, settings and marketing sections. Each one installs with its parts and works from a phone to a wide screen.
10 templates
Complete pages to start a product from
Landing, pricing, changelog and contact pages assembled from the blocks, one fictional product each.
33 motion components
Motion you can drop into any screen
Numbers that slide, labels that morph, highlights that follow the pointer. Each one reads the reduced motion setting.
Installation
Three commands, then it is your code
Nothing to depend on at runtime: every file lands in your project, ready to change.
- 1
Set up shadcn in your project
Once per project. It creates the components.json file the CLI reads.
npx shadcn@latest init - 2
Add the theme
Tokens for light and dark, hairlines and the 3D materials.
npx shadcn@latest add https://ui.ndekocode.dev/r/theme.json - 3
Add what you need
A primitive, a component or a block. Its own pieces come with it.
npx shadcn@latest add https://ui.ndekocode.dev/r/button.json
Questions
Everything people ask first
The short answers. The repository has the long ones.
General
Using it
Contributing