# KokonutUI

> Collection of stunning UI components, free and open source, built with Next.js, React, Tailwind CSS, and Motion.

Components are installed with the shadcn CLI, e.g.
`npx shadcn@latest add @kokonutui/card-flip`. Each page below links to
its Markdown source, which includes the install command and the full
component source code.

To set Kokonut UI up in a project, follow https://kokonutui.com/setup.md.

- [Installation](https://kokonutui.com/docs.md): Install KokonutUI components in any React or Next.js project with the shadcn CLI, using namespaces or direct registry URLs. No extra setup required.
- [Agents](https://kokonutui.com/docs/agents.md): Use Kokonut UI with Claude Code, Cursor, VS Code or Codex. Connect the shadcn MCP server, add a rules file, and give your agent the docs as Markdown.
- [Changelog](https://kokonutui.com/docs/changelog.md): New and updated Kokonut UI components, release by release, with a link to each component and its pull request.

## Templates

- [Agenta](https://kokonutui.pro/templates#agenta)
- [Lume](https://kokonutui.pro/templates#lume)
- [Sonae](https://kokonutui.pro/templates#sonae)
- [AI](https://kokonutui.pro/templates#ai)
- [Futur](https://kokonutui.pro/templates#futur)
- [Postly](https://kokonutui.pro/templates#postly)
- [Startup](https://kokonutui.pro/templates#startup)

## Backgrounds

- [Dot Field](https://kokonutui.com/docs/backgrounds/dot-field.md): A halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.
- [Background Paths](https://kokonutui.com/docs/backgrounds/background-paths.md): A ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
- [Shape Hero](https://kokonutui.com/docs/backgrounds/shape-hero.md): A landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
- [Wind](https://kokonutui.com/docs/backgrounds/flow-field.md): Streamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
- [Topo Background](https://kokonutui.com/docs/backgrounds/topo-background.md): A living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas.
- [Drape Background](https://kokonutui.com/docs/backgrounds/drape-background.md): A pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.
- [Halftone Background](https://kokonutui.com/docs/backgrounds/halftone-background.md): Any image, or a lit sphere, printed as a halftone dot screen, with a loupe that looks closer under the cursor, built with React and canvas.

## Cards

- [Flick Card](https://kokonutui.com/docs/cards/card-flip.md): A two-sided card you spin with a drag or a flick, with thickness, light and a floor shadow that follow the angle.
- [Throw Deck](https://kokonutui.com/docs/cards/card-stack.md): A pile of image cards you drag, flick off the top and send under the deck, with arrow keys and a details view.
- [Now Playing](https://kokonutui.com/docs/cards/liquid-glass-card.md): Music card with a spinning disc you can grab and turn to scrub, built with React and Tailwind CSS.
- [Apple Activity Card](https://kokonutui.com/docs/cards/apple-activity-card.md): Activity rings that draw with a count-up, lap past 100% with a shadowed end cap and dim to focus, built with React and Motion.
- [Widget Grid](https://kokonutui.com/docs/cards/bento-grid.md): Dashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
- [Currency Transfer](https://kokonutui.com/docs/cards/currency-transfer.md): Currency transfer card with odometer amounts, a live rate, a chip that carries the money across and a progress arc, built with React and Motion.
- [Momentum Rail](https://kokonutui.com/docs/cards/carousel-cards.md): A card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.
- [Notification Stack](https://kokonutui.com/docs/cards/notification-stack.md): Stacked notifications that fan out on hover and swipe away, built with React and Tailwind CSS.
- [Liquid Gauge](https://kokonutui.com/docs/cards/liquid-gauge.md): A usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation.
- [Activity Terrain](https://kokonutui.com/docs/cards/activity-terrain.md): A contribution heatmap that tilts up into a 3D terrain you can turn, built with React and canvas.
- [Receipt Printer](https://kokonutui.com/docs/cards/receipt-printer.md): A receipt that prints line by line, then tears off and falls when you pull it, built with React.
- [Metric Card](https://kokonutui.com/docs/cards/metric-card.md): A KPI card whose number rolls to any day you scrub, with periods that reshape the line instead of swapping it.
- [Uptime Card](https://kokonutui.com/docs/cards/uptime-card.md): A status page card with 90 days per service that swell under the cursor, and a day you click opens its incident log.

## Navigation

- [Split Nav](https://kokonutui.com/docs/navigation/morphic-navbar.md): Navigation bar that splits around the active link, with drag-to-scrub, flick projection and an optional compact fold.
- [Tool Dock](https://kokonutui.com/docs/navigation/toolbar.md): An editor tool dock with a sliding selection plate, shortcut tooltips and flyouts that you can throw to any edge.
- [Swipe Tabs](https://kokonutui.com/docs/navigation/smooth-tab.md): Tabs with a swipeable panel, a drag-tracked indicator and spring physics.
- [Account Menu](https://kokonutui.com/docs/navigation/profile-dropdown.md): An account card that morphs into its own menu, with account switching, status, theme and hold-to-sign-out.
- [Command Palette](https://kokonutui.com/docs/navigation/action-search-bar.md): ⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
- [Smooth Drawer](https://kokonutui.com/docs/navigation/smooth-drawer.md): Bottom drawer with spring-based slide-in and staggered content reveal, built on Vaul with React, Motion, and Tailwind CSS.
- [Marking Menu](https://kokonutui.com/docs/navigation/marking-menu.md): A radial menu you hold to open or flick to pick blind, built with React and Motion.
- [Scroll Index](https://kokonutui.com/docs/navigation/scroll-index.md): A section rail for long pages, with a tick per heading that you can hover, click or drag to scrub, built with React.

## Inputs

- [File Upload](https://kokonutui.com/docs/inputs/file-upload.md): Drag and drop file upload with animated progress, file validation and error states. Built with React, Tailwind CSS and Motion animations.
- [Avatar Picker](https://kokonutui.com/docs/inputs/avatar-picker.md): Generated avatars from a name, morphing as you type, on a 3D coin you can flick, tap or shuffle.
- [Team Selector](https://kokonutui.com/docs/inputs/team-selector.md): Animated team size selector with stacked overlapping avatars, spring transitions and increment controls. Built with React, Tailwind CSS and Motion.
- [Loader](https://kokonutui.com/docs/inputs/loader.md): Animated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React and Tailwind CSS.
- [Detent Dial](https://kokonutui.com/docs/inputs/detent-dial.md): Rotary knob that clicks from notch to notch and coasts when flicked, built with React and Motion.
- [Wheel Picker](https://kokonutui.com/docs/inputs/wheel-picker.md): iOS-style 3D drum picker with flick momentum, built with React and Motion.
- [Liquid Slider](https://kokonutui.com/docs/inputs/liquid-slider.md): A vertical slider you fill like a glass, with a sloshing surface and rising bubbles.
- [Signature Pad](https://kokonutui.com/docs/inputs/signature-pad.md): A signature field with a sprung pen tip, speed-weighted ink and SVG output.

## AI

- [AI Input Selector](https://kokonutui.com/docs/ai/ai-prompt.md): AI chat input with a model picker, file chips you can drop or paste, and Stop while replying.
- [AI Input Search](https://kokonutui.com/docs/ai/ai-input-search.md): AI search chat input with toggleable web search mode, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion.
- [AI State Loading](https://kokonutui.com/docs/ai/ai-loading.md): Agent progress as a list of steps with a live log, elapsed time and a summary when done.
- [AI Text Loading](https://kokonutui.com/docs/ai/ai-text-loading.md): AI thinking text with a soft wave through the letters and words that swap letter by letter.
- [AI Voice](https://kokonutui.com/docs/ai/ai-voice.md): Voice input with a scrolling waveform, then a take you can play back, discard or send.

## Texts

- [Typing Text](https://kokonutui.com/docs/texts/type-writer.md): Typewriter text that makes the odd typo and corrects it, erases by selecting, and blinks its caret only when idle, built with React and Motion.
- [Dynamic Text](https://kokonutui.com/docs/texts/dynamic-text.md): Morphing text where shared letters travel, old ones fall and new ones land, with decode and cycle modes.
- [Glitch Text](https://kokonutui.com/docs/texts/glitch-text.md): Flat text that cuts into hard-shifted bands with a thin red/cyan split, on idle, hover or text change.
- [Extruded Text](https://kokonutui.com/docs/texts/swoosh-text.md): Zinc 3D extruded text lit by your pointer, with letters that press in like keycaps.
- [Plucked Text](https://kokonutui.com/docs/texts/plucked-text.md): A headline sitting on a string you can pluck, strum and let ring, built with React and real string physics.
- [Cradle Text](https://kokonutui.com/docs/texts/cradle-text.md): A headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and pendulum physics.

## Buttons

- [Particle Button](https://kokonutui.com/docs/buttons/particle-button.md): Button that bursts animated particles from its center on click with a quick scale press effect, built with React, Motion, and Tailwind CSS.
- [V0 Button](https://kokonutui.com/docs/buttons/v0-button.md): Open in v0 button that sends a component registry JSON to v0.dev for instant editing, built with React, the shadcn Button, and Tailwind CSS.
- [Gradient Button](https://kokonutui.com/docs/buttons/gradient-button.md): Layered gradient button with emerald, purple, and orange variants, a gradient border in light and dark mode, soft inner glow, press feedback, and an optional icon, styled entirely with Tailwind CSS in React.
- [Magnet Button](https://kokonutui.com/docs/buttons/attract-button.md): Magnetic button that pulls floating particles to its center on hover using Motion spring animations, built with React and Tailwind CSS.
- [Hold Button](https://kokonutui.com/docs/buttons/hold-button.md): Press-and-hold confirmation button with an animated progress fill, configurable hold duration, and color variants, built with React and Motion.
- [Social Button](https://kokonutui.com/docs/buttons/social-button.md): Share button that expands into a row of social icon buttons with staggered Motion animations on hover, built with React and Tailwind CSS.
- [Command Button](https://kokonutui.com/docs/buttons/command-button.md): Keyboard shortcut button with a Command icon, hover shimmer sweep, and smooth CSS transitions, built with React and Tailwind CSS.
- [Switch Button](https://kokonutui.com/docs/buttons/switch-button.md): Light and dark theme toggle button with a rotating sun icon and shimmer hover effect, built with React and Tailwind CSS. Works on its own or with a theme provider such as next-themes.
- [Slide Text Button](https://kokonutui.com/docs/buttons/slide-text-button.md): Animated link button with a vertical text slide on hover and default and ghost variants, built with React, Next.js Link, and Tailwind CSS.
- [Pull Cord](https://kokonutui.com/docs/buttons/pull-cord.md): A lamp switch you pull on a swinging cord, built with React and a rope simulation.
- [Tear Button](https://kokonutui.com/docs/buttons/tear-button.md): A confirm button you tear off like a ticket stub, hole by hole.
- [Bell Button](https://kokonutui.com/docs/buttons/bell-button.md): A subscribe button whose bell swings and rings, with a clapper that really strikes.

## Optional

- [Full documentation](https://kokonutui.com/llms-full.txt): Every page concatenated into one file.
- [Component registry](https://kokonutui.com/r/registry.json): shadcn registry index.