Kokonut UI Pro - 100+ components to build websites faster, works with Claude Code, Cursor and more
logo|
ComponentsTemplates

Kokonut UI

Component catalog

React, Tailwind CSS, Motion

Free and open source

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
Loading…
Apple Activity Cardmotion

Ask your agent

Connect your editor onceshadcn MCP

Your editor
LibraryBrowse all componentsBacked byVercel OSS

01

Animated React components

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

AI-01Type, switch models, press Enter
Loading…
AI Input Selectorlucide-react, motion
IN-03Use − and +
Loading…
Team Selectormotion, lucide-react
BT-01Click it
Loading…
Particle Buttonlucide-react, motion
CD-09Completes once as it mounts
Loading…
Currency Transferlucide-react, motion
NV-03Switch tabs both ways
Loading…
Smooth Tabmotion, lucide-react
BT-05Press and hold
Loading…
Hold Buttonclass-variance-authority, lucide-react
CD-01Hover to flip
Loading…
Card Fliplucide-react
IN-01Drop any image
Loading…
File Uploadlucide-react, motion
TX-04Plays once as it mounts
Hello
Dynamic Textmotion

02

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.

03

How to install

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

  1. AI agentA

    Name a component, or describe what you need. Your agent finds it in the registry and installs it with its dependencies.

  2. shadcn CLIB

    Name the component. The shadcn CLI writes the file and installs what it needs.

  3. RegistryC

    Add the namespace to components.json once, then use the short names everywhere.

04

What developers say

What developers said when they found it, including the person behind shadcn/ui.

Re: “All components from KokonutUI can now be open in @v0 🎉” · Jan 18, 2025Awesome.shadcn, creator of shadcn/ui
“if you use @shadcn ui for your apps, you're gonna love these 7 ui libraries: kokonutui.com”
Rexan Wong@rexan_wong
“Super cool background paths by @dorianbaffier's, check out https://kokonutui.com”
Rajiv S@rjv_im
“3 React @shadcn libraries you NEED to know! 🔥”
OrcDev@orcdev
“Looking to add animations and beautiful components to your website? Check out these two UI libraries for @nextjs + @tailwindcss”
Nitro@Mehdi_B_25
“KokonutUI Open Source - Interactive UI components built with Tailwind CSS & shadcn for React and Next.js”
Toolfolio@toolfolio

05

Kokonut UI Pro

Complete website templates and premium sections, on the same stack: Next.js, Tailwind CSS, Motion and shadcn/ui.

PR-01TemplateAgenta templateAgentaFuturistic, rich in small detailsPR-02TemplateLume templateLumeFor startups building AI and SaaSPR-03TemplateSonae templateSonaeClean and modern, for AI agents

Pro adds full website templates and sections built with Next.js, Tailwind CSS, Motion and shadcn/ui.

Explore Pro