---
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", "loaders", "marketing", "media", "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: 40
generated_at: "2026-07-28T08:59:05.895Z"
---

# @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 (40)

| name | type | description | install |
| --- | --- | --- | --- |
| ai-prompt | registry:component | My own style of chat AI input. | `npx shadcn@latest add https://kokonutui.com/r/ai-prompt.json` |
| command-button | registry:component | Command button for shortcut. | `npx shadcn@latest add https://kokonutui.com/r/command-button.json` |
| card-flip | registry:component | Animated flip card with gradient button and animation. | `npx shadcn@latest add https://kokonutui.com/r/card-flip.json` |
| smooth-drawer | registry:component | Smooth slide-in drawer. (this was harder than i thought to make that one) | `npx shadcn@latest add https://kokonutui.com/r/smooth-drawer.json` |
| shape-hero | registry:component | Shapes that fall from the top. | `npx shadcn@latest add https://kokonutui.com/r/shape-hero.json` |
| ai-text-loading | registry:component | Thinking mode. | `npx shadcn@latest add https://kokonutui.com/r/ai-text-loading.json` |
| shimmer-text | registry:component | Quite fancy. | `npx shadcn@latest add https://kokonutui.com/r/shimmer-text.json` |
| carousel-cards | registry:component | Interactive carousel with card navigation. | `npx shadcn@latest add https://kokonutui.com/r/carousel-cards.json` |
| file-upload | registry:component | File upload with special uploading animation. Make sure to try the drag and drop. | `npx shadcn@latest add https://kokonutui.com/r/file-upload.json` |
| action-search-bar | registry:component | Action Bar with shortcuts, and smooth dropdown animation. | `npx shadcn@latest add https://kokonutui.com/r/action-search-bar.json` |
| ai-input-search | registry:component | AI input with search mode. | `npx shadcn@latest add https://kokonutui.com/r/ai-input-search.json` |
| currency-transfer | registry:component | Multiples step animation transaction inspired. | `npx shadcn@latest add https://kokonutui.com/r/currency-transfer.json` |
| background-paths | registry:component | Drawed line paths in the middle. | `npx shadcn@latest add https://kokonutui.com/r/background-paths.json` |
| beams-background | registry:component | Animated Beams in the background that are customizable. | `npx shadcn@latest add https://kokonutui.com/r/beams-background.json` |
| apple-activity-card | registry:component | Inspired by Apple activity app. | `npx shadcn@latest add https://kokonutui.com/r/apple-activity-card.json` |
| ai-voice | registry:component | Voice mode. | `npx shadcn@latest add https://kokonutui.com/r/ai-voice.json` |
| smooth-tab | registry:component | Animated tab switcher. | `npx shadcn@latest add https://kokonutui.com/r/smooth-tab.json` |
| team-selector | registry:component | Group selector with a different style. | `npx shadcn@latest add https://kokonutui.com/r/team-selector.json` |
| switch-button | registry:component | Animated shadow theme switcher button. | `npx shadcn@latest add https://kokonutui.com/r/switch-button.json` |
| bento-grid | registry:component | Grid of 4 cards with different content and animations. | `npx shadcn@latest add https://kokonutui.com/r/bento-grid.json` |
| social-button | registry:component | Animated Social show-up | `npx shadcn@latest add https://kokonutui.com/r/social-button.json` |
| hold-button | registry:component | Hold Button with different hold duration and colors. | `npx shadcn@latest add https://kokonutui.com/r/hold-button.json` |
| attract-button | registry:component | Attract particles button! | `npx shadcn@latest add https://kokonutui.com/r/attract-button.json` |
| gradient-button | registry:component | That was so hard to make. | `npx shadcn@latest add https://kokonutui.com/r/gradient-button.json` |
| v0-button | registry:component | Open in V0. | `npx shadcn@latest add https://kokonutui.com/r/v0-button.json` |
| toolbar | registry:component | Multiples actions toolbar inspired by Figma. | `npx shadcn@latest add https://kokonutui.com/r/toolbar.json` |
| ai-loading | registry:component | Code loading pending. | `npx shadcn@latest add https://kokonutui.com/r/ai-loading.json` |
| card-stack | registry:component | Stack of cards that expend onclick. | `npx shadcn@latest add https://kokonutui.com/r/card-stack.json` |
| avatar-picker | registry:component | Avatar picker with rotation animation. | `npx shadcn@latest add https://kokonutui.com/r/avatar-picker.json` |
| type-writer | registry:component | Animated TypeWritter with multiples options. | `npx shadcn@latest add https://kokonutui.com/r/type-writer.json` |
| swoosh-text | registry:component | Nike inspired Text | `npx shadcn@latest add https://kokonutui.com/r/swoosh-text.json` |
| sliced-text | registry:component | I haven't found any usage for that component, but i like it. | `npx shadcn@latest add https://kokonutui.com/r/sliced-text.json` |
| glitch-text | registry:component | Why not? | `npx shadcn@latest add https://kokonutui.com/r/glitch-text.json` |
| matrix-text | registry:component | 010110010110111101110101011100100010000001110111011001010110110001100011011011110110110101100101 | `npx shadcn@latest add https://kokonutui.com/r/matrix-text.json` |
| dynamic-text | registry:component | Dynamic switcher text. | `npx shadcn@latest add https://kokonutui.com/r/dynamic-text.json` |
| particle-button | registry:component | Particle Button Animation on click. | `npx shadcn@latest add https://kokonutui.com/r/particle-button.json` |
| tweet-card | registry:component | Gradient on hover X card. (The post is real!) | `npx shadcn@latest add https://kokonutui.com/r/tweet-card.json` |
| scroll-text | registry:component | Animated on scroll texts. | `npx shadcn@latest add https://kokonutui.com/r/scroll-text.json` |
| liquid-glass-card | registry:component | Liquid Glass inspired by @Apple | `npx shadcn@latest add https://kokonutui.com/r/liquid-glass-card.json` |
| profile-dropdown | registry:component | Menu dropdown with action buttons. | `npx shadcn@latest add https://kokonutui.com/r/profile-dropdown.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).
```