Kokonut UI
Components for AI apps
React, Tailwind CSS, Motion
Free and open source
AI components
that feel right.
Open-source React components for AI apps, and the inputs and cards around them. All live on this page. Install any of them with one command or one prompt.
Ask your agent
Connect your editor onceshadcn MCP
01
AI components
The parts of an AI product people touch: tool calls in a reply, autocomplete as you type, the model picker. Live demos, not screenshots.
02
UI components
Inputs, cards, buttons and text for the screens around the chat. Each component installs as a single file you own.
03
All components
Every Kokonut UI component by category, from AI chat inputs to text effects. Each name opens its docs page.
AIAI
- AI-01AI Input SelectorUpdated
- AI-02AI Input SearchUpdated
- AI-03AI State LoadingUpdated
- AI-04AI Text LoadingUpdated
- AI-05AI VoiceUpdated
- AI-06AI Tool ApprovalNew
- AI-07AI Tool CallsNew
- AI-08AI CheckoutNew
- AI-09AI ConnectNew
- AI-10AI SendNew
- AI-11AI ScheduleNew
- AI-12AI AttachmentNew
- AI-13AI Code RunNew
- AI-14AI Order StatusNew
- AI-15AI HandoffNew
- AI-16AI Context MeterNew
- AI-17AI Inline CitationsNew
- AI-18AI Diff ReviewNew
- AI-19AI Model SelectorNew
- AI-20AI Token AlternativesNew
- AI-21AI Conversation BranchesNew
- AI-22AI Agent LanesNew
- AI-23AI Inline EditNew
- AI-24AI Message QueueNew
- AI-25AI RedactNew
- AI-26AI MemoryNew
- AI-27AI AutocompleteNew
CardsCD
- CD-01Flick CardUpdated
- CD-02Throw DeckUpdated
- CD-03Now PlayingUpdated
- CD-04Apple Activity CardUpdated
- CD-05Widget GridUpdated
- CD-06Currency TransferUpdated
- CD-07Momentum RailUpdated
- CD-08Notification StackNew
- CD-09Liquid GaugeNew
- CD-10Activity TerrainNew
- CD-11Page FlipNew
- CD-12Receipt PrinterNew
- CD-13Metric CardNew
- CD-14Uptime CardNew
- CD-15Spending RingNew
- CD-16Boarding PassNew
- CD-17Lightbox GridNew
InputsIN
- IN-01File UploadUpdated
- IN-02Avatar PickerUpdated
- IN-03Team SelectorUpdated
- IN-04Loader
- IN-05Detent DialNew
- IN-06Wheel PickerNew
- IN-07Liquid SliderNew
- IN-08Signature PadNew
- IN-09Time Zone PlannerNew
- IN-10Amount PadNew
- IN-11Seat MapNew
- IN-12Card FieldNew
- IN-13Stay PickerNew
- IN-14Slot PickerNew
- IN-15Tip SelectorNew
- IN-16Location PickerNew
MediaMD
FeedbackFB
TextsTX
ButtonsBT
- BT-01Particle ButtonUpdated
- BT-02V0 Button
- BT-03Gradient ButtonUpdated
- BT-04Magnet ButtonUpdated
- BT-05Hold ButtonUpdated
- BT-06Command ButtonUpdated
- BT-07Switch ButtonUpdated
- BT-08Slide Text Button
- BT-09Pull CordNew
- BT-10Tear ButtonNew
- BT-11Bell ButtonNew
- BT-12Morph PopoverNew
- BT-13Undo ButtonNew
- BT-14Slide to ConfirmNew
- BT-15Save ButtonNew
- BT-16Cart ButtonNew
04
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.
05
What developers say
What developers said when they found it, including the person behind shadcn/ui.
“if you use @shadcn ui for your apps, you're gonna love these 7 ui libraries: kokonutui.com”
“Super cool background paths by @dorianbaffier's, check out https://kokonutui.com”
“3 React @shadcn libraries you NEED to know! 🔥”
“Looking to add animations and beautiful components to your website? Check out these two UI libraries for @nextjs + @tailwindcss”
“KokonutUI Open Source - Interactive UI components built with Tailwind CSS & shadcn for React and Next.js”
06
Kokonut UI Pro
The paid half of the catalog: heroes, app screens, pricing, AI parts and full website templates, on the same stack and installed the same way.
- 150+
- components
- 20+
- categories
- 6
- templates
One payment, everything included
$119
- Lifetime access
- $159
- PRO25 · 25% off
- −$40
- You pay, once
- $119
- Every component and section, as source you own
- Every website template, current and future
- Install with the shadcn CLI, the MCP server or a prompt
- Every future release, no subscription
- PR-01Heroes
Agent Flow HeroA live node graph of a run: pulses travel the edges and steps tick their results. - PR-02App UI
Kanban BoardDrag cards between columns, or move them with Space and the arrow keys. - PR-03App UI
Slash Command MenuType / to pick a command, and a hint bar fills in its arguments. - PR-04Cards
Onboarding ChecklistThe ring fills as steps are checked and the next one opens.
MarlowA portfolio for product designers and design engineers, with case studies and a lab of interactions.Template · AI agents$59 alone, or in Pro
FleetA launch site for an AI agent product: a browser where agents split one request, work their own tabs and come back with a plan to approve.Template · Startups$59 alone, or in Pro
AgentaFuturistic, with a modern design rich in small details.