Yes — previewing and copying Kokonut UI components on this page is free. Install through the shadcn CLI or copy the TSX; check each listing's license notes before production use.

Does Kokonut UI work with Next.js and shadcn/ui?

Yes. Components are TSX + Tailwind following shadcn/ui conventions, so they work in the App Router or Pages Router and integrate with your existing shadcn theme tokens.

Who makes Kokonut UI?

Kokonut UI is created by Dorian Baffier, who publishes the components on 21st — the project's own site is linked above. This page adds live previews, copyable source, and CLI/MCP install on top.

Kokonut UI

100+ modern UI components built with Tailwind CSS, shadcn/ui, and Motion.

by Kokonut UI

60components14.4Mviews33.6Kbookmarks

Uptime Card

AI Tool Approval

Notification Stack

Signature Pad

Wheel Picker

AI Citations

Loader

Smooth Drawer

Carousel Cards

AI Loading State

AI Text Loading

Glitch Text

Swoosh Text

Typewriter

Sliced Text

Profile Dropdown

Apple Activity Ring

Animated AI Input

Minimalist Hero Fashion

Avatar Picker

Matrix Text

Beams Background

V0 AI Chat

Background Paths

Kokonut UI

100+ modern UI components built with Tailwind CSS, shadcn/ui, and Motion.

by Kokonut UI

60components14.4Mviews33.6Kbookmarks

Uptime Card

AI Tool Approval

Notification Stack

Signature Pad

Wheel Picker

AI Citations

Loader

Smooth Drawer

Carousel Cards

AI Loading State

AI Text Loading

Glitch Text

Swoosh Text

Typewriter

Sliced Text

Profile Dropdown

Apple Activity Ring

Animated AI Input

Minimalist Hero Fashion

Avatar Picker

Matrix Text

Beams Background

V0 AI Chat

Background Paths

Related libraries

Magic UI

by Dillion Verma

64

components

ReUI

by Sean Hello

262

components

Origin UI

by Origin UI

44

components

cult ui

by cult/ui

50

components

Ruixen UI

by Ruixen UI

347

components

HextaUI

by Preet Suthar

119

components

About Kokonut UI

This page collects the Kokonut UI components published on 21st by Dorian Baffier — modern React components and blocks built with Tailwind CSS, with motion where it earns its place. The collection covers polished interface pieces you can preview live here, from cards and buttons to fuller sections.

Compare everything in one place, then copy the TSX, install through the shadcn CLI, or pull a component into Cursor or Claude Code over MCP. The components follow shadcn/ui conventions, so they drop into a Tailwind Next.js project cleanly.