---
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", "forms", "glassmorphism", "hooks", "loaders", "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: 1908
component_count: 51
generated_at: "2026-09-21T01:50:16.753Z"
---

# @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.vercel.app/registry/kokonutui
- This file: https://sh4dcn.vercel.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 (51)

| name | type | description | install |
| --- | --- | --- | --- |
| ai-prompt | registry:component | Animated AI chat input with model selection dropdown, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion. | `npx shadcn@latest add https://kokonutui.com/r/ai-prompt.json` |
| command-button | registry:component | Keyboard shortcut button with a Command icon, hover shimmer sweep, and smooth CSS transitions, built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/command-button.json` |
| card-flip | registry:component | Interactive card that flips in 3D on hover to reveal features and a call to action, built with React and Tailwind CSS transforms and transitions. | `npx shadcn@latest add https://kokonutui.com/r/card-flip.json` |
| smooth-drawer | registry:component | Bottom drawer with spring-based slide-in and staggered content reveal, built on Vaul with React, Motion, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/smooth-drawer.json` |
| shape-hero | registry:component | Hero section with translucent geometric shapes that drop in and float over a gradient backdrop. Built with React, Tailwind CSS and Motion. | `npx shadcn@latest add https://kokonutui.com/r/shape-hero.json` |
| ai-text-loading | registry:component | Animated AI thinking indicator that cycles status messages with a shimmering gradient text effect. Built with React, Tailwind CSS and Motion. | `npx shadcn@latest add https://kokonutui.com/r/ai-text-loading.json` |
| shimmer-text | registry:component | Animated shimmer text with a looping gradient sweep across the letters, built with React, Tailwind CSS gradients and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/shimmer-text.json` |
| carousel-cards | registry:component | Horizontally scrolling card carousel with ratings, badges and arrow navigation, built with React, Tailwind CSS and shadcn/ui primitives. | `npx shadcn@latest add https://kokonutui.com/r/carousel-cards.json` |
| file-upload | registry:component | Drag and drop file upload with animated progress, file validation and error states. Built with React, Tailwind CSS and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/file-upload.json` |
| action-search-bar | registry:component | Search bar with debounced input, shortcut hints, and an animated action suggestions dropdown, built with React, Motion, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/action-search-bar.json` |
| ai-input-search | registry:component | AI search chat input with toggleable web search mode, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion. | `npx shadcn@latest add https://kokonutui.com/r/ai-input-search.json` |
| currency-transfer | registry:component | Multi-step currency exchange card with animated progress and SVG checkmark confirmation, built with React, Tailwind CSS and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/currency-transfer.json` |
| background-paths | registry:component | Animated background of flowing SVG line paths drawn across the hero section. Built with React, Tailwind CSS and Motion path animations. | `npx shadcn@latest add https://kokonutui.com/r/background-paths.json` |
| mouse-effect-card | registry:component | Interactive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and Motion spring physics. | `npx shadcn@latest add https://kokonutui.com/r/mouse-effect-card.json` |
| beams-background | registry:component | Animated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React, Tailwind CSS and Motion. | `npx shadcn@latest add https://kokonutui.com/r/beams-background.json` |
| flow-field | registry:component | Canvas particle flow field background with noise-driven streams of glowing light, color themes and density options. Built with React and Motion. | `npx shadcn@latest add https://kokonutui.com/r/flow-field.json` |
| apple-activity-card | registry:component | Animated activity rings card inspired by the Apple Fitness app, with progress circles built in React using Tailwind CSS and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/apple-activity-card.json` |
| ai-voice | registry:component | AI voice input button with recording timer, pulsing waveform bars and listening state. Built with React and animated Tailwind CSS styles. | `npx shadcn@latest add https://kokonutui.com/r/ai-voice.json` |
| smooth-tab | registry:component | Animated tab switcher with a sliding active indicator and smooth card content transitions, built with React, Motion, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/smooth-tab.json` |
| team-selector | registry:component | Animated team size selector with stacked overlapping avatars, spring transitions and increment controls. Built with React, Tailwind CSS and Motion. | `npx shadcn@latest add https://kokonutui.com/r/team-selector.json` |
| switch-button | registry:component | Light and dark theme toggle button with a rotating sun icon and shimmer hover effect, built with React, next-themes, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/switch-button.json` |
| bento-grid | registry:component | Responsive bento grid of feature cards with animated charts, counters and timelines, built with React, Tailwind CSS and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/bento-grid.json` |
| social-button | registry:component | Share button that expands into a row of social icon buttons with staggered Motion animations on hover, built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/social-button.json` |
| hold-button | registry:component | Press-and-hold confirmation button with an animated progress fill, configurable hold duration, and color variants, built with React and Motion. | `npx shadcn@latest add https://kokonutui.com/r/hold-button.json` |
| attract-button | registry:component | Magnetic button that pulls floating particles to its center on hover using Motion spring animations, built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/attract-button.json` |
| gradient-button | registry:component | Layered gradient button with emerald, purple, and orange variants, soft inner glow, and hover overlay, styled entirely with Tailwind CSS in React. | `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 | Figma-inspired toolbar where the selected tool expands to reveal its label with spring animations, built with React, Motion, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/toolbar.json` |
| ai-loading | registry:component | Animated AI loading state cycling task statuses through a scrolling code-style log with an SVG progress spinner. Built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/ai-loading.json` |
| card-stack | registry:component | Stack of product cards that expands on click to reveal details and specs, animated with Motion and styled with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/card-stack.json` |
| avatar-picker | registry:component | Animated avatar picker with SVG avatar options, colored selection ring and username input. Built with React, Tailwind CSS and Motion. | `npx shadcn@latest add https://kokonutui.com/r/avatar-picker.json` |
| type-writer | registry:component | Typewriter text animation that types and deletes multiple sequences with a blinking cursor and auto loop, built with React and Motion. | `npx shadcn@latest add https://kokonutui.com/r/type-writer.json` |
| swoosh-text | registry:component | Hover text effect with layered colorful shadows that snap flat on mouseover, built with React, Tailwind CSS and Motion hover animations. | `npx shadcn@latest add https://kokonutui.com/r/swoosh-text.json` |
| sliced-text | registry:component | Text effect that splits into two offset slices and merges together on hover using clip-path, built with React, Tailwind CSS and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/sliced-text.json` |
| glitch-text | registry:component | Customizable glitch text effect with adjustable intensity, colors and sizes, animated in React with Motion and styled with Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/glitch-text.json` |
| matrix-text | registry:component | Matrix-style text effect where letters scramble through binary characters before revealing, built with React, Tailwind CSS and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/matrix-text.json` |
| dynamic-text | registry:component | Animated text switcher that cycles through greetings in multiple languages, built with React, Tailwind CSS and Motion enter and exit transitions. | `npx shadcn@latest add https://kokonutui.com/r/dynamic-text.json` |
| particle-button | registry:component | Button that bursts animated particles from its center on click with a quick scale press effect, built with React, Motion, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/particle-button.json` |
| tweet-card | registry:component | X (Twitter) style post card with author details, verified badge, reply thread and hover gradient, built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/tweet-card.json` |
| scroll-text | registry:component | Scroll-driven text list that highlights the active word as you scroll, using IntersectionObserver with React, Tailwind CSS and Motion animations. | `npx shadcn@latest add https://kokonutui.com/r/scroll-text.json` |
| liquid-glass-card | registry:component | Apple-inspired liquid glass card and buttons using SVG displacement filters for a refractive effect, built with React and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/liquid-glass-card.json` |
| profile-dropdown | registry:component | User profile dropdown menu with avatar, subscription and model details, and quick action links, built with React, shadcn/ui, and Tailwind CSS. | `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, Tailwind CSS and Motion. | `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, Motion, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/slide-text-button.json` |
| morphic-navbar | registry:component | Navigation bar whose active link morphs into a rounded pill with smooth CSS transitions, built with React, Next.js Link, and Tailwind CSS. | `npx shadcn@latest add https://kokonutui.com/r/morphic-navbar.json` |
| spotlight-cards | registry:component | Feature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind CSS and Motion springs. | `npx shadcn@latest add https://kokonutui.com/r/spotlight-cards.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.vercel.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.vercel.app/json (library slug: kokonutui).
```