sh4dcn
Registries
ActiveFeaturedAnimated componentspro available2,079

@kokonutui

Animated components · MIT · data updated 2026-09-05

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 folderProAgent brief (.md)
@kokonutui preview
aestheticaianimationaudiobackgroundsblocksbuttonscardsformsglassmorphismhooksloadersmarketingmediamobilenavigationoverlayspro-availablesaastext-effects

Install

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

Health

StatusActive
Last commit2 weeks ago
LicenseMIT
Open issues0
ArchivedNo
Stars2,079

Components (51)

ai-promptcommand-buttoncard-flipsmooth-drawershape-heroai-text-loadingshimmer-textcarousel-cardsfile-uploadaction-search-barai-input-searchcurrency-transferbackground-pathsmouse-effect-cardbeams-backgroundflow-fieldapple-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-dropdownloaderslide-text-buttonmorphic-navbarspotlight-cardsuse-auto-resize-textareause-click-outsideuse-copy-to-clipboarduse-mobileutils
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, mouse-effect-card, beams-background, flow-field, 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, loader, slide-text-button, morphic-navbar, spotlight-cards, use-auto-resize-textarea, use-click-outside, use-copy-to-clipboard, use-mobile, utils

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