Registries
ActiveFeaturedAnimated components1,908

@kokonutui

Animated components · MIT · data updated 2026-07-08

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.

WebsiteDocsGitHubComponents folder

Install

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

Health

StatusActive
Last commit1 month ago
LicenseMIT
Open issues1
ArchivedNo
Stars1,908

Components (40)

ai-promptcommand-buttoncard-flipsmooth-drawershape-heroai-text-loadingshimmer-textcarousel-cardsfile-uploadaction-search-barai-input-searchcurrency-transferbackground-pathsbeams-backgroundapple-activity-cardai-voicesmooth-tabteam-selectorswitch-buttonbento-gridsocial-buttonhold-buttonattract-buttongradient-buttonv0-buttontoolbarai-loadingcard-stackavatar-pickertype-writerswoosh-textsliced-textglitch-textmatrix-textdynamic-textparticle-buttontweet-cardscroll-textliquid-glass-cardprofile-dropdown
Components: ai-prompt, command-button, card-flip, smooth-drawer, shape-hero, ai-text-loading, shimmer-text, carousel-cards, file-upload, action-search-bar, ai-input-search, currency-transfer, background-paths, beams-background, apple-activity-card, ai-voice, smooth-tab, team-selector, switch-button, bento-grid, social-button, hold-button, attract-button, gradient-button, v0-button, toolbar, ai-loading, card-stack, avatar-picker, type-writer, swoosh-text, sliced-text, glitch-text, matrix-text, dynamic-text, particle-button, tweet-card, scroll-text, liquid-glass-card, profile-dropdown

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@kokonutui · ai-prompt

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