@kokonutui

Animated AI chat input with model selection dropdown, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion.

Keyboard shortcut button with a Command icon, hover shimmer sweep, and smooth CSS transitions, built with React and Tailwind CSS.

Interactive card that flips in 3D on hover to reveal features and a call to action, built with React and Tailwind CSS transforms and transitions.

Bottom drawer with spring-based slide-in and staggered content reveal, built on Vaul with React, Motion, and Tailwind CSS.

Hero section with translucent geometric shapes that drop in and float over a gradient backdrop. Built with React, Tailwind CSS and Motion.

Animated AI thinking indicator that cycles status messages with a shimmering gradient text effect. Built with React, Tailwind CSS and Motion.

Animated shimmer text with a looping gradient sweep across the letters, built with React, Tailwind CSS gradients and Motion animations.

Horizontally scrolling card carousel with ratings, badges and arrow navigation, built with React, Tailwind CSS and shadcn/ui primitives.

Drag and drop file upload with animated progress, file validation and error states. Built with React, Tailwind CSS and Motion animations.

Search bar with debounced input, shortcut hints, and an animated action suggestions dropdown, built with React, Motion, and Tailwind CSS.

AI search chat input with toggleable web search mode, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion.

Multi-step currency exchange card with animated progress and SVG checkmark confirmation, built with React, Tailwind CSS and Motion animations.

Animated background of flowing SVG line paths drawn across the hero section. Built with React, Tailwind CSS and Motion path animations.

Interactive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and Motion spring physics.

Animated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React, Tailwind CSS and Motion.

Canvas particle flow field background with noise-driven streams of glowing light, color themes and density options. Built with React and Motion.

Animated activity rings card inspired by the Apple Fitness app, with progress circles built in React using Tailwind CSS and Motion animations.

AI voice input button with recording timer, pulsing waveform bars and listening state. Built with React and animated Tailwind CSS styles.

Animated tab switcher with a sliding active indicator and smooth card content transitions, built with React, Motion, and Tailwind CSS.

Animated team size selector with stacked overlapping avatars, spring transitions and increment controls. Built with React, Tailwind CSS and Motion.

Light and dark theme toggle button with a rotating sun icon and shimmer hover effect, built with React, next-themes, and Tailwind CSS.

Responsive bento grid of feature cards with animated charts, counters and timelines, built with React, Tailwind CSS and Motion animations.

Share button that expands into a row of social icon buttons with staggered Motion animations on hover, built with React and Tailwind CSS.

Press-and-hold confirmation button with an animated progress fill, configurable hold duration, and color variants, built with React and Motion.

Magnetic button that pulls floating particles to its center on hover using Motion spring animations, built with React and Tailwind CSS.

Layered gradient button with emerald, purple, and orange variants, soft inner glow, and hover overlay, styled entirely with Tailwind CSS in React.

Open in v0 button that sends a component registry JSON to v0.dev for instant editing, built with React, the shadcn Button, and Tailwind CSS.

Figma-inspired toolbar where the selected tool expands to reveal its label with spring animations, built with React, Motion, and Tailwind CSS.

Animated AI loading state cycling task statuses through a scrolling code-style log with an SVG progress spinner. Built with React and Tailwind CSS.

Stack of product cards that expands on click to reveal details and specs, animated with Motion and styled with React and Tailwind CSS.

Animated avatar picker with SVG avatar options, colored selection ring and username input. Built with React, Tailwind CSS and Motion.

Typewriter text animation that types and deletes multiple sequences with a blinking cursor and auto loop, built with React and Motion.

Hover text effect with layered colorful shadows that snap flat on mouseover, built with React, Tailwind CSS and Motion hover animations.

Text effect that splits into two offset slices and merges together on hover using clip-path, built with React, Tailwind CSS and Motion animations.

Customizable glitch text effect with adjustable intensity, colors and sizes, animated in React with Motion and styled with Tailwind CSS.

Matrix-style text effect where letters scramble through binary characters before revealing, built with React, Tailwind CSS and Motion animations.

Animated text switcher that cycles through greetings in multiple languages, built with React, Tailwind CSS and Motion enter and exit transitions.

Button that bursts animated particles from its center on click with a quick scale press effect, built with React, Motion, and Tailwind CSS.

X (Twitter) style post card with author details, verified badge, reply thread and hover gradient, built with React and Tailwind CSS.

Scroll-driven text list that highlights the active word as you scroll, using IntersectionObserver with React, Tailwind CSS and Motion animations.

Apple-inspired liquid glass card and buttons using SVG displacement filters for a refractive effect, built with React and Tailwind CSS.

User profile dropdown menu with avatar, subscription and model details, and quick action links, built with React, shadcn/ui, and Tailwind CSS.

Animated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React, Tailwind CSS and Motion.

Animated link button with a vertical text slide on hover and default and ghost variants, built with React, Motion, and Tailwind CSS.

Navigation bar whose active link morphs into a rounded pill with smooth CSS transitions, built with React, Next.js Link, and Tailwind CSS.

Feature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind CSS and Motion springs.

React hook that auto-resizes a textarea to fit its content between a min and max height.

React hook that runs a callback when the user clicks outside the referenced element.

React hook that copies text to the clipboard and exposes a copied state with a reset timeout.

React hook that reports whether the viewport is below the 768px mobile breakpoint.

The cn utility for merging Tailwind CSS classes, built on clsx and tailwind-merge.