Components
that feel right.

Open-source React components built with Tailwind CSS, Motion and shadcn/ui. Every component on this page is live: try it, then install it with one command or one prompt.

CD-04Rings fill as it mounts

Activity Rings

MOVE479 of 800 CAL
EXERCISE42 of 30 MIN
STAND6 of 12 HR

Loading…

Apple Activity Cardmotion

Ask your agent

Connect your editor onceshadcn MCP

LibraryBrowse all components Backed byVercel OSS

Animated React components

Live demos, not screenshots. Each component installs as a single file you own.

AI-01Type / for commands, drop a file

AI Input Selectorlucide-react, motion

IN-05Turn it, or flick and let it coast

Detent Dialmotion

AI-03An agent working through its steps

AI State Loadinglucide-react, motion

BT-11Tear the stub off to confirm

Tear Buttonno extra packages

BG-06Sweep through it, or grab a fold

Drape Backgroundno extra packages

IN-06Flick a wheel

Wheel Pickermotion

TX-05Pluck the string under the words

Plucked Textno extra packages

BT-10Pull the cord

Pull Cordno extra packages

CD-10Drag to turn the terrain

Activity Terrainno extra packages

CD-09Drag sideways to slosh it

Liquid Gaugeno extra packages

BT-12Click it to ring the bell

Bell Buttonno extra packages

All components

Every Kokonut UI component by category, from AI chat inputs to text effects. Each name opens its docs page.

BackgroundsBG

CardsCD

NavigationNV

InputsIN

AIAI

TextsTX

ButtonsBT

Something missing?The library grows in the open. Ask for a component, or send one, on GitHub.

How to install

Kokonut UI is a shadcn/ui registry, so every component arrives as source in your repo, with its dependencies installed.

AI agentA
Name a component, or describe what you need. Your agent finds it in the registry and installs it with its dependencies.
shadcn CLIB
Name the component. The shadcn CLI writes the file and installs what it needs.
RegistryC
Add the namespace to components.json once, then use the short names everywhere.