@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.

40 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://kokonutui.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://kokonutui.com/r/registry.json

bun bunx shadcn@latest add https://kokonutui.com/r/registry.json

fetch registry curl -s https://kokonutui.com/r/registry.json

Components

40 total

AI Input Selector component

My own style of chat AI input.

npx shadcn@latest add https://kokonutui.com/r/ai-prompt.json

Command Button component

Command button for shortcut.

npx shadcn@latest add https://kokonutui.com/r/command-button.json

Card Flip component

Animated flip card with gradient button and animation.

npx shadcn@latest add https://kokonutui.com/r/card-flip.json

Smooth Drawer 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

Shapes Hero component

Shapes that fall from the top.

npx shadcn@latest add https://kokonutui.com/r/shape-hero.json

AI Text Loading component

Thinking mode.

npx shadcn@latest add https://kokonutui.com/r/ai-text-loading.json

Shimmer Text component

Quite fancy.

npx shadcn@latest add https://kokonutui.com/r/shimmer-text.json

Carousel Cards component

Interactive carousel with card navigation.

npx shadcn@latest add https://kokonutui.com/r/carousel-cards.json

File Upload 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 component

Action Bar with shortcuts, and smooth dropdown animation.

npx shadcn@latest add https://kokonutui.com/r/action-search-bar.json

AI Input Search component

AI input with search mode.

npx shadcn@latest add https://kokonutui.com/r/ai-input-search.json

Currency Transfer component

Multiples step animation transaction inspired.

npx shadcn@latest add https://kokonutui.com/r/currency-transfer.json

Background Paths component

Drawed line paths in the middle.

npx shadcn@latest add https://kokonutui.com/r/background-paths.json

Beams Background component

Animated Beams in the background that are customizable.

npx shadcn@latest add https://kokonutui.com/r/beams-background.json

Apple Activity Card component

Inspired by Apple activity app.

npx shadcn@latest add https://kokonutui.com/r/apple-activity-card.json

AI Voice component

Voice mode.

npx shadcn@latest add https://kokonutui.com/r/ai-voice.json

Smooth Tab component

Animated tab switcher.

npx shadcn@latest add https://kokonutui.com/r/smooth-tab.json

Team Selector component

Group selector with a different style.

npx shadcn@latest add https://kokonutui.com/r/team-selector.json

Switch Button component

Animated shadow theme switcher button.

npx shadcn@latest add https://kokonutui.com/r/switch-button.json

Bento Grid component

Grid of 4 cards with different content and animations.

npx shadcn@latest add https://kokonutui.com/r/bento-grid.json

Social Button component

Animated Social show-up

npx shadcn@latest add https://kokonutui.com/r/social-button.json

Hold Button component

Hold Button with different hold duration and colors.

npx shadcn@latest add https://kokonutui.com/r/hold-button.json

Magnet Button component

Attract particles button!

npx shadcn@latest add https://kokonutui.com/r/attract-button.json

Gradient Button component

That was so hard to make.

npx shadcn@latest add https://kokonutui.com/r/gradient-button.json

V0 Button component

Open in V0.

npx shadcn@latest add https://kokonutui.com/r/v0-button.json

Toolbar component

Multiples actions toolbar inspired by Figma.

npx shadcn@latest add https://kokonutui.com/r/toolbar.json

AI State Loading component

Code loading pending.

npx shadcn@latest add https://kokonutui.com/r/ai-loading.json

Stack component

Stack of cards that expend onclick.

npx shadcn@latest add https://kokonutui.com/r/card-stack.json

Avatar Picker component

Avatar picker with rotation animation.

npx shadcn@latest add https://kokonutui.com/r/avatar-picker.json

Typing Text component

Animated TypeWritter with multiples options.

npx shadcn@latest add https://kokonutui.com/r/type-writer.json

Swoosh Text component

Nike inspired Text

npx shadcn@latest add https://kokonutui.com/r/swoosh-text.json

Sliced Text 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 component

Why not?

npx shadcn@latest add https://kokonutui.com/r/glitch-text.json

Matrix Text component

010110010110111101110101011100100010000001110111011001010110110001100011011011110110110101100101

npx shadcn@latest add https://kokonutui.com/r/matrix-text.json

Dynamic Text component

Dynamic switcher text.

npx shadcn@latest add https://kokonutui.com/r/dynamic-text.json

Particle Button component

Particle Button Animation on click.

npx shadcn@latest add https://kokonutui.com/r/particle-button.json

X Card component

Gradient on hover X card. (The post is real!)

npx shadcn@latest add https://kokonutui.com/r/tweet-card.json

Scroll Text component

Animated on scroll texts.

npx shadcn@latest add https://kokonutui.com/r/scroll-text.json

Liquid Glass component

Liquid Glass inspired by @Apple

npx shadcn@latest add https://kokonutui.com/r/liquid-glass-card.json

Profile Dropdown component

Menu dropdown with action buttons.

npx shadcn@latest add https://kokonutui.com/r/profile-dropdown.json