Components for React and Next.js, 366 and counting
The library
Every piece runs live. Install it with the shadcn command, or press Copy prompt and paste it into Claude Code, which installs the component and wires it into your page.
Featured
Hand-picked by us: a good place to start.
- Mesh OrbsBackgrounds
- Device ShellMedia
- Split FlapText
Interaction 162
- Arc DeckMedia
- Audio PillMedia
- Bead StatData
Navigation 109
- Action DockNavigation
- Albedo HeaderNavigation
- Atlas HeaderNavigation
- Aura HeaderNavigation
Animation 94
- Arc DeckMedia
- Award Toss CardsSections
- Bent Type CylinderHeroes
Sections 84
- Award Toss CardsSections
- Blueprint Track PanelsSections
- Bowed Card CarouselSections
Media 77
- Arc DeckMedia
- Audio PillMedia
Data 67
- Bead StatData
- Bill SplitterForms
- Boot SequenceData
Cards 64
- Audio PillMedia
- Award Toss CardsSections
- Bead StatData
- Blueprint Track PanelsSections
Forms 37
- Action DockNavigation
- Bill SplitterForms
- Compose DockNavigation
- Court Slot BoardForms
Heroes 32
- Bent Type CylinderHeroes
- Colour Panel ShowcaseHeroes
- Docking WordmarkHeroes
- Drift Caption FieldHeroes
Text 23
- Bent Type CylinderHeroes
- Digit RollText
- Dot MatrixText
- Focus Pull TextText
Layout 17
- Crosshair FrameCards
- Device ShellMedia
- Frame Shrink StepsSections
- Hero Panel LiftHeroes
Backgrounds 16
- Beam GridBackgrounds · WebGL
- Constellation LinksBackgrounds
- Cumulus SkyBackgrounds
- Data WallBackgrounds
Ambient 14
- Crosshair FrameCards
- Cumulus SkyBackgrounds
- Cursor LanternInteraction
- Diagonal BeamsBackgrounds
Canvas 12
- Constellation LinksBackgrounds
- Data WallBackgrounds
- Halftone Dot CloudAmbient
- Lens DotsBackgrounds
Buttons 7
- MagneticInteraction
- Notch ButtonButtons
- Pill UnfurlButtons
- Press ButtonsButtons
WebGL 7
- Beam GridBackgrounds · WebGL
- Drift RibbonsBackgrounds · WebGL
- Gel BlobWebGL · WebGL
- Glass OrbWebGL · WebGL
