K
kokonut-labs/kokonutui
Action Search Baraction-search-barSearch bar with debounced input, shortcut hints, and an animated action suggestions dropdown, built with React, Motion, and Tailwind CSS.
AI Input Searchai-input-searchAI search chat input with toggleable web search mode, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion.
AI State Loadingai-loadingAnimated AI loading state cycling task statuses through a scrolling code-style log with an SVG progress spinner. Built with React and Tailwind CSS.
AI Input Selectorai-promptAnimated AI chat input with model selection dropdown, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion.
AI Text Loadingai-text-loadingAnimated AI thinking indicator that cycles status messages with a shimmering gradient text effect. Built with React, Tailwind CSS and Motion.
AI Voiceai-voiceAI voice input button with recording timer, pulsing waveform bars and listening state. Built with React and animated Tailwind CSS styles.
Apple Activity Cardapple-activity-cardAnimated activity rings card inspired by the Apple Fitness app, with progress circles built in React using Tailwind CSS and Motion animations.
Magnet Buttonattract-buttonMagnetic button that pulls floating particles to its center on hover using Motion spring animations, built with React and Tailwind CSS.
Avatar Pickeravatar-pickerAnimated avatar picker with SVG avatar options, colored selection ring and username input. Built with React, Tailwind CSS and Motion.
Background Pathsbackground-pathsAnimated background of flowing SVG line paths drawn across the hero section. Built with React, Tailwind CSS and Motion path animations.
Beams Backgroundbeams-backgroundAnimated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React, Tailwind CSS and Motion.
Bento Gridbento-gridResponsive bento grid of feature cards with animated charts, counters and timelines, built with React, Tailwind CSS and Motion animations.
Card Flipcard-flipInteractive card that flips in 3D on hover to reveal features and a call to action, built with React and Tailwind CSS transforms and transitions.
Stackcard-stackStack of product cards that expands on click to reveal details and specs, animated with Motion and styled with React and Tailwind CSS.
Carousel Cardscarousel-cardsHorizontally scrolling card carousel with ratings, badges and arrow navigation, built with React, Tailwind CSS and shadcn/ui primitives.
Command Buttoncommand-buttonKeyboard shortcut button with a Command icon, hover shimmer sweep, and smooth CSS transitions, built with React and Tailwind CSS.
Currency Transfercurrency-transferMulti-step currency exchange card with animated progress and SVG checkmark confirmation, built with React, Tailwind CSS and Motion animations.
Dynamic Textdynamic-textAnimated text switcher that cycles through greetings in multiple languages, built with React, Tailwind CSS and Motion enter and exit transitions.
File Uploadfile-uploadDrag and drop file upload with animated progress, file validation and error states. Built with React, Tailwind CSS and Motion animations.
Flow Fieldflow-fieldCanvas particle flow field background with noise-driven streams of glowing light, color themes and density options. Built with React and Motion.
Glitch Textglitch-textCustomizable glitch text effect with adjustable intensity, colors and sizes, animated in React with Motion and styled with Tailwind CSS.
Gradient Buttongradient-buttonLayered gradient button with emerald, purple, and orange variants, soft inner glow, and hover overlay, styled entirely with Tailwind CSS in React.
Hold Buttonhold-buttonPress-and-hold confirmation button with an animated progress fill, configurable hold duration, and color variants, built with React and Motion.
Liquid Glassliquid-glass-cardApple-inspired liquid glass card and buttons using SVG displacement filters for a refractive effect, built with React and Tailwind CSS.
LoaderloaderAnimated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React, Tailwind CSS and Motion.
Matrix Textmatrix-textMatrix-style text effect where letters scramble through binary characters before revealing, built with React, Tailwind CSS and Motion animations.
Morphic Navbarmorphic-navbarNavigation bar whose active link morphs into a rounded pill with smooth CSS transitions, built with React, Next.js Link, and Tailwind CSS.
Mouse Effect Cardmouse-effect-cardInteractive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and Motion spring physics.
Particle Buttonparticle-buttonButton that bursts animated particles from its center on click with a quick scale press effect, built with React, Motion, and Tailwind CSS.
Profile Dropdownprofile-dropdownUser profile dropdown menu with avatar, subscription and model details, and quick action links, built with React, shadcn/ui, and Tailwind CSS.
Scroll Textscroll-textScroll-driven text list that highlights the active word as you scroll, using IntersectionObserver with React, Tailwind CSS and Motion animations.
Shapes Heroshape-heroHero section with translucent geometric shapes that drop in and float over a gradient backdrop. Built with React, Tailwind CSS and Motion.
Shimmer Textshimmer-textAnimated shimmer text with a looping gradient sweep across the letters, built with React, Tailwind CSS gradients and Motion animations.
Sliced Textsliced-textText effect that splits into two offset slices and merges together on hover using clip-path, built with React, Tailwind CSS and Motion animations.
Slide Text Buttonslide-text-buttonAnimated link button with a vertical text slide on hover and default and ghost variants, built with React, Motion, and Tailwind CSS.
Smooth Drawersmooth-drawerBottom drawer with spring-based slide-in and staggered content reveal, built on Vaul with React, Motion, and Tailwind CSS.
Smooth Tabsmooth-tabAnimated tab switcher with a sliding active indicator and smooth card content transitions, built with React, Motion, and Tailwind CSS.
Social Buttonsocial-buttonShare button that expands into a row of social icon buttons with staggered Motion animations on hover, built with React and Tailwind CSS.
Spotlight Cardsspotlight-cardsFeature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind CSS and Motion springs.
Switch Buttonswitch-buttonLight and dark theme toggle button with a rotating sun icon and shimmer hover effect, built with React, next-themes, and Tailwind CSS.
Swoosh Textswoosh-textHover text effect with layered colorful shadows that snap flat on mouseover, built with React, Tailwind CSS and Motion hover animations.
Team Selectorteam-selectorAnimated team size selector with stacked overlapping avatars, spring transitions and increment controls. Built with React, Tailwind CSS and Motion.
ToolbartoolbarFigma-inspired toolbar where the selected tool expands to reveal its label with spring animations, built with React, Motion, and Tailwind CSS.
X Cardtweet-cardX (Twitter) style post card with author details, verified badge, reply thread and hover gradient, built with React and Tailwind CSS.
Typing Texttype-writerTypewriter text animation that types and deletes multiple sequences with a blinking cursor and auto loop, built with React and Motion.
V0 Buttonv0-buttonOpen in v0 button that sends a component registry JSON to v0.dev for instant editing, built with React, the shadcn Button, and Tailwind CSS.