---
name: "@kokonutui"
slug: "kokonutui"
description: "Kokonut UI is an open-source collection of 100+ animated React components and 8+ templates built with Tailwind CSS, shadcn/ui, and Motion (framer-motion). Categories include Backgrounds (Beams, Paths, Shapes, Flow Field), Cards (Flip, Stack, Liquid Glass, Apple Activity, Mouse Effect, Bento Grid), Navigations (Morphic Navbar, Smooth Tabs, Action Search Bar), AI Inputs, loaders, text effects (Matrix, Glitch, Shimmer, Swoosh), and animated Buttons. A Kokonut UI Pro tier adds 70+ premium components and templates. Sponsored by Vercel OSS Program. Use for: injecting polished, motion-forward UI elements into SaaS or marketing sites that need standout visual effects beyond default shadcn components."
category: "Animated components"
tags: ["aesthetic", "ai", "animation", "audio", "backgrounds", "blocks", "buttons", "cards", "e-commerce", "forms", "glassmorphism", "hooks", "loaders", "maps", "marketing", "media", "mobile", "navigation", "overlays", "pro-available", "saas", "text-effects"]
framework: "react"
license: "MIT"
author: "kokonut-labs"
website: "https://kokonutui.com"
github: "https://github.com/kokonut-labs/kokonutui"
registry: "https://kokonutui.com/r/registry.json"
pro: true
pro_url: "https://kokonutui.pro"
github_stars: 2221
component_count: 107
generated_at: "2026-10-27T06:34:08.542Z"
---

# @kokonutui

Kokonut UI is an open-source collection of 100+ animated React components and 8+ templates built with Tailwind CSS, shadcn/ui, and Motion (framer-motion). Categories include Backgrounds (Beams, Paths, Shapes, Flow Field), Cards (Flip, Stack, Liquid Glass, Apple Activity, Mouse Effect, Bento Grid), Navigations (Morphic Navbar, Smooth Tabs, Action Search Bar), AI Inputs, loaders, text effects (Matrix, Glitch, Shimmer, Swoosh), and animated Buttons. A Kokonut UI Pro tier adds 70+ premium components and templates. Sponsored by Vercel OSS Program. Use for: injecting polished, motion-forward UI elements into SaaS or marketing sites that need standout visual effects beyond default shadcn components.

## Links

- Website: https://kokonutui.com
- GitHub: https://github.com/kokonut-labs/kokonutui
- Registry JSON: https://kokonutui.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/kokonutui
- This file: https://sh4dcn.netlify.app/md/kokonutui.md
- Pro / pricing: https://kokonutui.pro

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://kokonutui.com/r/registry.json
pnpm dlx shadcn@latest add https://kokonutui.com/r/registry.json
bunx shadcn@latest add https://kokonutui.com/r/registry.json
# clone the source repo
git clone https://github.com/kokonut-labs/kokonutui.git
# fetch the raw registry index
curl -s https://kokonutui.com/r/registry.json
```

## Components (107)

| name | type | description | install |
| --- | --- | --- | --- |
| ai-prompt | registry:component | AI chat input with a model menu, a separate Effort control, file chips you can drop or paste, a / command menu, and Stop while replying. | `npx shadcn@latest add https://kokonutui.com/r/ai-prompt.json` |
| command-button | registry:component | A button with its shortcut drawn as keycaps that sink as you press the real keys. | `npx shadcn@latest add https://kokonutui.com/r/command-button.json` |
| card-flip | registry:component | A two-sided card you spin with a drag or a flick, with thickness, light and a floor shadow that follow the angle. | `npx shadcn@latest add https://kokonutui.com/r/card-flip.json` |
| smooth-drawer | registry:component | Checkout bottom sheet on Vaul snap points, peeking at the total and dragging up for details. | `npx shadcn@latest add https://kokonutui.com/r/smooth-drawer.json` |
| halftone-background | registry:component | 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. | `npx shadcn@latest add https://kokonutui.com/r/halftone-background.json` |
| shape-hero | registry:component | A landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown. | `npx shadcn@latest add https://kokonutui.com/r/shape-hero.json` |
| ai-text-loading | registry:component | AI thinking text with a soft wave through the letters and words that swap letter by letter. | `npx shadcn@latest add https://kokonutui.com/r/ai-text-loading.json` |
| carousel-cards | registry:component | A card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax. | `npx shadcn@latest add https://kokonutui.com/r/carousel-cards.json` |
| file-upload | registry:component | A multi-file upload queue with per-file progress, retry and cancel. | `npx shadcn@latest add https://kokonutui.com/r/file-upload.json` |
| action-search-bar | registry:component | ⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions. | `npx shadcn@latest add https://kokonutui.com/r/action-search-bar.json` |
| ai-input-search | registry:component | AI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that stacks each source's avatar as it is read. | `npx shadcn@latest add https://kokonutui.com/r/ai-input-search.json` |
| cradle-text | registry:component | A headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and pendulum physics. | `npx shadcn@latest add https://kokonutui.com/r/cradle-text.json` |
| currency-transfer | registry:component | Transfer tracker that converts the amount in place, walks through each step on a filling rail and ends with a copyable reference. | `npx shadcn@latest add https://kokonutui.com/r/currency-transfer.json` |
| background-paths | registry:component | A ribbon of lines in one color that keeps flowing at any size and parts around the cursor. | `npx shadcn@latest add https://kokonutui.com/r/background-paths.json` |
| dot-field | registry:component | A halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas. | `npx shadcn@latest add https://kokonutui.com/r/dot-field.json` |
| flow-field | registry:component | Streamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas. | `npx shadcn@latest add https://kokonutui.com/r/flow-field.json` |
| topo-background | registry:component | A living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas. | `npx shadcn@latest add https://kokonutui.com/r/topo-background.json` |
| drape-background | registry:component | A pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation. | `npx shadcn@latest add https://kokonutui.com/r/drape-background.json` |
| apple-activity-card | registry:component | 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. | `npx shadcn@latest add https://kokonutui.com/r/apple-activity-card.json` |
| ai-voice | registry:component | Voice input with a scrolling waveform, then a take you can play back, discard or send. | `npx shadcn@latest add https://kokonutui.com/r/ai-voice.json` |
| smooth-tab | registry:component | Tabs with a swipeable panel, a drag-tracked indicator and spring physics. | `npx shadcn@latest add https://kokonutui.com/r/smooth-tab.json` |
| marking-menu | registry:component | A radial menu you hold to open or flick to pick blind, built with React and Motion. | `npx shadcn@latest add https://kokonutui.com/r/marking-menu.json` |
| team-selector | registry:component | Seat picker with a scrubbable number, generated avatars and an optional rolling price line. | `npx shadcn@latest add https://kokonutui.com/r/team-selector.json` |
| detent-dial | registry:component | Rotary knob that clicks from notch to notch and coasts when flicked, built with React and Motion. | `npx shadcn@latest add https://kokonutui.com/r/detent-dial.json` |
| liquid-slider | registry:component | A vertical slider you fill like a glass, with a sloshing surface and rising bubbles. | `npx shadcn@latest add https://kokonutui.com/r/liquid-slider.json` |
| signature-pad | registry:component | A signature field with a sprung pen tip, speed-weighted ink and SVG output. | `npx shadcn@latest add https://kokonutui.com/r/signature-pad.json` |
| switch-button | registry:component | Light and dark theme toggle whose sun folds into a moon while the new theme spreads from the button as a circle. | `npx shadcn@latest add https://kokonutui.com/r/switch-button.json` |
| pull-cord | registry:component | A lamp switch you pull on a swinging cord, built with React and a rope simulation. | `npx shadcn@latest add https://kokonutui.com/r/pull-cord.json` |
| tear-button | registry:component | A confirm button you tear off like a ticket stub, hole by hole. | `npx shadcn@latest add https://kokonutui.com/r/tear-button.json` |
| bell-button | registry:component | A subscribe button whose bell swings and rings, with a clapper that really strikes. | `npx shadcn@latest add https://kokonutui.com/r/bell-button.json` |
| bento-grid | registry:component | Dashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support. | `npx shadcn@latest add https://kokonutui.com/r/bento-grid.json` |
| hold-button | registry:component | Press and hold to confirm, with a fill that drains back on early release and a drawn check on completion. | `npx shadcn@latest add https://kokonutui.com/r/hold-button.json` |
| attract-button | registry:component | A call-to-action button wrapped in a field of iron filings that align to its magnetic field and lean toward your cursor. | `npx shadcn@latest add https://kokonutui.com/r/attract-button.json` |
| gradient-button | registry:component | Layered gradient button with emerald, purple and orange variants, a gradient border, a soft inner glow, press feedback and an optional icon. | `npx shadcn@latest add https://kokonutui.com/r/gradient-button.json` |
| v0-button | registry:component | 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. | `npx shadcn@latest add https://kokonutui.com/r/v0-button.json` |
| toolbar | registry:component | An editor tool dock with a sliding selection plate, shortcut tooltips and flyouts that you can throw to any edge. | `npx shadcn@latest add https://kokonutui.com/r/toolbar.json` |
| ai-loading | registry:component | Agent progress as a list of steps with a live log, elapsed time and a summary when done. | `npx shadcn@latest add https://kokonutui.com/r/ai-loading.json` |
| ai-tool-approval | registry:component | Approve or deny an agent's tool calls. Destructive calls need a press and hold, and decided calls fold into a trace with their output. | `npx shadcn@latest add https://kokonutui.com/r/ai-tool-approval.json` |
| ai-context-meter | registry:component | How full the context window is, as a ring in the prompt footer that opens a breakdown by source and compacts when it fills. | `npx shadcn@latest add https://kokonutui.com/r/ai-context-meter.json` |
| ai-citations | registry:component | An answer with source chips beside each claim. One preview glides between chips and lights up the sentence it backs. | `npx shadcn@latest add https://kokonutui.com/r/ai-citations.json` |
| ai-diff-review | registry:component | A coding agent's edits streaming in file by file, then reviewed per file with accept, reject and undo. | `npx shadcn@latest add https://kokonutui.com/r/ai-diff-review.json` |
| ai-model-selector | registry:component | Pick a model and how hard it thinks. Effort is a detent track that reshapes for each model and keeps your level when you switch. | `npx shadcn@latest add https://kokonutui.com/r/ai-model-selector.json` |
| card-stack | registry:component | A pile of image cards you drag, flick off the top and send under the deck, with arrow keys and a details view. | `npx shadcn@latest add https://kokonutui.com/r/card-stack.json` |
| notification-stack | registry:component | Stacked notifications that fan out on hover and swipe away, built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/notification-stack.json` |
| liquid-gauge | registry:component | A usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation. | `npx shadcn@latest add https://kokonutui.com/r/liquid-gauge.json` |
| activity-terrain | registry:component | A contribution heatmap that tilts up into a 3D terrain you can turn, built with React and canvas. | `npx shadcn@latest add https://kokonutui.com/r/activity-terrain.json` |
| receipt-printer | registry:component | A receipt that prints line by line, then tears off and falls when you pull it, built with React. | `npx shadcn@latest add https://kokonutui.com/r/receipt-printer.json` |
| metric-card | registry:component | A revenue KPI card. Scrub a day, drag a range, or pick a segment; the number rolls, the line morphs and the breakdown follows. | `npx shadcn@latest add https://kokonutui.com/r/metric-card.json` |
| uptime-card | registry:component | A status page card with 90 days per service that swell under the cursor, and a day you click opens its incident log. | `npx shadcn@latest add https://kokonutui.com/r/uptime-card.json` |
| spending-ring | registry:component | A spending breakdown you spin like a dial; flick the ring and it settles with a category under the marker. | `npx shadcn@latest add https://kokonutui.com/r/spending-ring.json` |
| focal-point-picker | registry:component | Set where a photo's subject is and see every crop follow it live. Hover a crop to see what it cuts. | `npx shadcn@latest add https://kokonutui.com/r/focal-point-picker.json` |
| photo-straighten | registry:component | Level a crooked photo on a ruler you drag or flick. The crop grows to hide the corners, and a grid shows while you adjust. | `npx shadcn@latest add https://kokonutui.com/r/photo-straighten.json` |
| clip-trimmer | registry:component | A video trim timeline with a filmstrip, handles that snap to whole seconds and a playhead that loops the kept range. | `npx shadcn@latest add https://kokonutui.com/r/clip-trimmer.json` |
| synced-transcript | registry:component | A transcript that follows the spoken word, lets you click any word to jump there, and waits when you scroll away. | `npx shadcn@latest add https://kokonutui.com/r/synced-transcript.json` |
| avatar-picker | registry:component | Generated avatars from a name, morphing as you type, on a 3D coin you can flick, tap or shuffle. | `npx shadcn@latest add https://kokonutui.com/r/avatar-picker.json` |
| wheel-picker | registry:component | iOS-style 3D drum picker with flick momentum, built with React and Motion. | `npx shadcn@latest add https://kokonutui.com/r/wheel-picker.json` |
| type-writer | registry:component | 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. | `npx shadcn@latest add https://kokonutui.com/r/type-writer.json` |
| swoosh-text | registry:component | Zinc 3D extruded text lit by your pointer, with letters that press in like keycaps. | `npx shadcn@latest add https://kokonutui.com/r/swoosh-text.json` |
| scroll-index | registry:component | A section rail for long pages, with a tick per heading that you can hover, click or drag to scrub, built with React. | `npx shadcn@latest add https://kokonutui.com/r/scroll-index.json` |
| plucked-text | registry:component | A headline sitting on a string you can pluck, strum and let ring, built with React and real string physics. | `npx shadcn@latest add https://kokonutui.com/r/plucked-text.json` |
| glitch-text | registry:component | Flat text that cuts into hard-shifted bands with a thin red/cyan split, on idle, hover or text change. | `npx shadcn@latest add https://kokonutui.com/r/glitch-text.json` |
| dynamic-text | registry:component | Morphing text where shared letters travel, old ones fall and new ones land, with decode and cycle modes. | `npx shadcn@latest add https://kokonutui.com/r/dynamic-text.json` |
| particle-button | registry:component | A status button for async actions, with a spinner, a drawn check and a particle burst on success. | `npx shadcn@latest add https://kokonutui.com/r/particle-button.json` |
| liquid-glass-card | registry:component | Music card with a spinning disc you can grab and turn to scrub, built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/liquid-glass-card.json` |
| profile-dropdown | registry:component | An account card that morphs into its own menu, with account switching, status, theme and hold-to-sign-out. | `npx shadcn@latest add https://kokonutui.com/r/profile-dropdown.json` |
| loader | registry:component | Animated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/loader.json` |
| slide-text-button | registry:component | Animated link button with a vertical text slide on hover and default and ghost variants, built with React, Next.js Link, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/slide-text-button.json` |
| morphic-navbar | registry:component | Navigation bar that splits around the active link, with drag-to-scrub, flick projection and an optional compact fold. | `npx shadcn@latest add https://kokonutui.com/r/morphic-navbar.json` |
| status-island | registry:component | A pill that reports background work, reshaping as tasks change and opening into a list of everything in flight. | `npx shadcn@latest add https://kokonutui.com/r/status-island.json` |
| morph-popover | registry:component | A button that grows into the form it opens, with its label sliding up to become the title, then shrinks into a confirmation. | `npx shadcn@latest add https://kokonutui.com/r/morph-popover.json` |
| lightbox-grid | registry:component | A photo grid whose thumbnails grow into a full view and fly back to their slot when you drag them down. | `npx shadcn@latest add https://kokonutui.com/r/lightbox-grid.json` |
| spoiler-text | registry:component | Inline text hidden under drifting specks, like a chat spoiler. A click blows the specks away from the point you touched. | `npx shadcn@latest add https://kokonutui.com/r/spoiler-text.json` |
| stack-panel | registry:component | A panel that drills into pages like settings on a phone. The tapped row's label flies up into the title, and a swipe right takes you back. | `npx shadcn@latest add https://kokonutui.com/r/stack-panel.json` |
| ai-autocomplete | registry:component | A text box that suggests how your sentence ends in grey after the caret. Tab takes it all, the right arrow takes one word, and typing the same letters keeps it. | `npx shadcn@latest add https://kokonutui.com/r/ai-autocomplete.json` |
| undo-button | registry:component | An action button that gives you a few seconds to take it back, with the time left drawn around its own edge. | `npx shadcn@latest add https://kokonutui.com/r/undo-button.json` |
| timezone-planner | registry:component | Find a meeting time across time zones. Turn the meeting round a 24-hour dial where each ring is someone's day. | `npx shadcn@latest add https://kokonutui.com/r/timezone-planner.json` |
| page-flip | registry:component | A book you turn by the corner. Drag a page over the spine or tap to turn it. | `npx shadcn@latest add https://kokonutui.com/r/page-flip.json` |
| ai-token-alternatives | registry:component | An answer where every unsure word shows what else the model weighed. Pick another word and the reply writes itself again from there. | `npx shadcn@latest add https://kokonutui.com/r/ai-token-alternatives.json` |
| ai-branches | registry:component | A chat where editing a message starts a new branch. A small tree beside it shows every version, and you can jump between them. | `npx shadcn@latest add https://kokonutui.com/r/ai-branches.json` |
| ai-agent-lanes | registry:component | A lead agent hands work to sub-agents that run side by side. Each gets a lane of tool calls, and you can scrub through the whole run. | `npx shadcn@latest add https://kokonutui.com/r/ai-agent-lanes.json` |
| ai-inline-edit | registry:component | Select text in a document and ask AI to rewrite it. The edit streams in place as a word-level diff you accept, discard or try again. | `npx shadcn@latest add https://kokonutui.com/r/ai-inline-edit.json` |
| ai-message-queue | registry:component | Keep typing while the agent works. Follow-ups stack above the composer, where you can reorder, edit or send one now, and go in one by one when the run ends. | `npx shadcn@latest add https://kokonutui.com/r/ai-message-queue.json` |
| ai-redact | registry:component | Masks names, emails, card numbers and keys as placeholders before a prompt is sent, then fills the real values back into the reply. | `npx shadcn@latest add https://kokonutui.com/r/ai-redact.json` |
| ai-memory | registry:component | An assistant that saves what it learns about you into a memory list. New facts replace the ones they contradict, and you can edit or forget any of them. | `npx shadcn@latest add https://kokonutui.com/r/ai-memory.json` |
| marker-text | registry:component | Hand-drawn highlights, underlines, circles, boxes and strikes that draw themselves in reading order when the text comes into view. | `npx shadcn@latest add https://kokonutui.com/r/marker-text.json` |
| ink-background | registry:component | A hero written in ink on water. Stir it and the letters bleed, click to drop ink, and the headline gathers itself again. Built with WebGL. | `npx shadcn@latest add https://kokonutui.com/r/ink-background.json` |
| caustics-background | registry:component | A hero on the floor of a pool. Light ripples across it, clicks drop rings that bend the light, and the headline's shadow wobbles below. | `npx shadcn@latest add https://kokonutui.com/r/caustics-background.json` |
| rain-glass-background | registry:component | A hero seen through a rainy window. Drops gather and run, each a tiny lens on the view, and dragging wipes the fog off the glass. | `npx shadcn@latest add https://kokonutui.com/r/rain-glass-background.json` |
| shadow-text | registry:component | A headline that works as a sundial. Each letter casts a long, soft shadow set by the reader's clock, and bringing the pointer close turns it into a lamp. | `npx shadcn@latest add https://kokonutui.com/r/shadow-text.json` |
| seat-map | registry:component | Pick seats for a show. Drag along a row to take several, and it points out any single seat you'd leave stranded. | `npx shadcn@latest add https://kokonutui.com/r/seat-map.json` |
| amount-pad | registry:component | A keypad for sending money. Digits spring into place, commas slide them along, and the amount shrinks to fit as it grows. | `npx shadcn@latest add https://kokonutui.com/r/amount-pad.json` |
| slide-to-confirm | registry:component | A confirm control for payments and other actions you can't take back. Slide the thumb to the end, or flick it. | `npx shadcn@latest add https://kokonutui.com/r/slide-to-confirm.json` |
| save-button | registry:component | A bookmark button that files into collections. Tap to save to the last one, then change it or make a new one from the strip. | `npx shadcn@latest add https://kokonutui.com/r/save-button.json` |
| cart-button | registry:component | An Add button that opens into a quantity stepper in place, with a bin at one and press-and-hold to repeat. | `npx shadcn@latest add https://kokonutui.com/r/cart-button.json` |
| card-field | registry:component | A one-row card input for checkout. The number groups the way the brand prints it, then slides to its last four to make room for expiry and CVC. | `npx shadcn@latest add https://kokonutui.com/r/card-field.json` |
| stay-picker | registry:component | A date range picker for booking stays. Every night shows its price, sold-out nights are hatched, and your stay is one pill that wraps across weeks. | `npx shadcn@latest add https://kokonutui.com/r/stay-picker.json` |
| slot-picker | registry:component | Book a meeting on a day rail. Drag a meeting into a free gap; it hops over existing bookings, resizes in place and shows the host's local time. | `npx shadcn@latest add https://kokonutui.com/r/slot-picker.json` |
| tip-selector | registry:component | A tip picker for checkout, set on a tape you drag and flick. The ticks you pass fill in, the amounts roll, and Round up makes the total a whole amount. | `npx shadcn@latest add https://kokonutui.com/r/tip-selector.json` |
| boarding-pass | registry:component | A boarding pass that keeps itself current. When the gate or times change, only the changed characters roll over, the old value struck through. | `npx shadcn@latest add https://kokonutui.com/r/boarding-pass.json` |
| split-flap-text | registry:component | Departure-board lettering for headlines and status lines. Each tile flips only as far as its new letter, on a hinge, a beat after its neighbour. | `npx shadcn@latest add https://kokonutui.com/r/split-flap-text.json` |
| location-picker | registry:component | Set a pickup point the way ride apps do. Drag the map under a fixed pin; it lifts off its shadow, glides onto the nearest curb, drops, and the street rolls in. | `npx shadcn@latest add https://kokonutui.com/r/location-picker.json` |
| contact-sheet | registry:component | Pick from a shoot the way photographers do. Circle a frame in china marker, click again to strike it, and look through a loupe at the detail first. | `npx shadcn@latest add https://kokonutui.com/r/contact-sheet.json` |
| use-auto-resize-textarea | registry:hook | React hook that auto-resizes a textarea to fit its content between a min and max height. | `npx shadcn@latest add https://kokonutui.com/r/use-auto-resize-textarea.json` |
| use-click-outside | registry:hook | React hook that runs a callback when the user clicks outside the referenced element. | `npx shadcn@latest add https://kokonutui.com/r/use-click-outside.json` |
| use-copy-to-clipboard | registry:hook | React hook that copies text to the clipboard and exposes a copied state with a reset timeout. | `npx shadcn@latest add https://kokonutui.com/r/use-copy-to-clipboard.json` |
| use-mobile | registry:hook | React hook that reports whether the viewport is below the 768px mobile breakpoint. | `npx shadcn@latest add https://kokonutui.com/r/use-mobile.json` |
| utils | registry:lib | The cn utility for merging Tailwind CSS classes, built on clsx and tailwind-merge. | `npx shadcn@latest add https://kokonutui.com/r/utils.json` |

## For AI agents

```text
You are adding components from @kokonutui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/kokonutui.md) for the component list.
2. Fetch the machine-readable index: https://kokonutui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: kokonutui).
```