# KokonutUI > Collection of 100+ stunning UI components free and open source built with Next.js, React, Tailwind CSS, and Motion. Components are installed with the shadcn CLI, e.g. `npx shadcn@latest add @kokonutui/card-flip`. Each page below links to its Markdown source, which includes the install command and the full component source code. - [Installation](https://kokonutui.com/docs.md): Install KokonutUI components in any React or Next.js project with the shadcn CLI, using namespaces or direct registry URLs. No extra setup required. ## Templates - [Agenta](https://kokonutui.pro/templates#agenta) - [Lume](https://kokonutui.pro/templates#lume) - [Sonae](https://kokonutui.pro/templates#sonae) - [AI](https://kokonutui.pro/templates#ai) - [Futur](https://kokonutui.pro/templates#futur) - [Postly](https://kokonutui.pro/templates#postly) - [Startup](https://kokonutui.pro/templates#startup) ## Backgrounds - [Beams Background](https://kokonutui.com/docs/backgrounds/beams-background.md): Animated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React, Tailwind CSS and Motion. - [Background Paths](https://kokonutui.com/docs/backgrounds/background-paths.md): Animated background of flowing SVG line paths drawn across the hero section. Built with React, Tailwind CSS and Motion path animations. - [Shapes Hero](https://kokonutui.com/docs/backgrounds/shape-hero.md): Hero section with translucent geometric shapes that drop in and float over a gradient backdrop. Built with React, Tailwind CSS and Motion. - [Flow Field](https://kokonutui.com/docs/backgrounds/flow-field.md): Canvas particle flow field background with noise-driven streams of glowing light, color themes and density options. Built with React and Motion. ## Cards - [Card Flip](https://kokonutui.com/docs/cards/card-flip.md): 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. - [Stack](https://kokonutui.com/docs/cards/card-stack.md): Stack of product cards that expands on click to reveal details and specs, animated with Motion and styled with React and Tailwind CSS. - [Liquid Glass](https://kokonutui.com/docs/cards/liquid-glass-card.md): Apple-inspired liquid glass card and buttons using SVG displacement filters for a refractive effect, built with React and Tailwind CSS. - [Apple Activity Card](https://kokonutui.com/docs/cards/apple-activity-card.md): Animated activity rings card inspired by the Apple Fitness app, with progress circles built in React using Tailwind CSS and Motion animations. - [Mouse Effect Card](https://kokonutui.com/docs/cards/mouse-effect-card.md): Interactive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and Motion spring physics. - [X Card](https://kokonutui.com/docs/cards/tweet-card.md): X (Twitter) style post card with author details, verified badge, reply thread and hover gradient, built with React and Tailwind CSS. - [Bento Grid](https://kokonutui.com/docs/cards/bento-grid.md): Responsive bento grid of feature cards with animated charts, counters and timelines, built with React, Tailwind CSS and Motion animations. - [Spotlight Cards](https://kokonutui.com/docs/cards/spotlight-cards.md): Feature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind CSS and Motion springs. - [Currency Transfer](https://kokonutui.com/docs/cards/currency-transfer.md): Multi-step currency exchange card with animated progress and SVG checkmark confirmation, built with React, Tailwind CSS and Motion animations. - [Carousel Cards](https://kokonutui.com/docs/cards/carousel-cards.md): Horizontally scrolling card carousel with ratings, badges and arrow navigation, built with React, Tailwind CSS and shadcn/ui primitives. ## Navigation - [Morphic Navbar](https://kokonutui.com/docs/navigation/morphic-navbar.md): Navigation bar whose active link morphs into a rounded pill with smooth CSS transitions, built with React, Next.js Link, and Tailwind CSS. - [Toolbar](https://kokonutui.com/docs/navigation/toolbar.md): Figma-inspired toolbar where the selected tool expands to reveal its label with spring animations, built with React, Motion, and Tailwind CSS. - [Smooth Tab](https://kokonutui.com/docs/navigation/smooth-tab.md): Animated tab switcher with a sliding active indicator and smooth card content transitions, built with React, Motion, and Tailwind CSS. - [Profile Dropdown](https://kokonutui.com/docs/navigation/profile-dropdown.md): User profile dropdown menu with avatar, subscription and model details, and quick action links, built with React, shadcn/ui, and Tailwind CSS. - [Action Search Bar](https://kokonutui.com/docs/navigation/action-search-bar.md): Search bar with debounced input, shortcut hints, and an animated action suggestions dropdown, built with React, Motion, and Tailwind CSS. - [Smooth Drawer](https://kokonutui.com/docs/navigation/smooth-drawer.md): Bottom drawer with spring-based slide-in and staggered content reveal, built on Vaul with React, Motion, and Tailwind CSS. ## Inputs - [File Upload](https://kokonutui.com/docs/inputs/file-upload.md): Drag and drop file upload with animated progress, file validation and error states. Built with React, Tailwind CSS and Motion animations. - [Avatar Picker](https://kokonutui.com/docs/inputs/avatar-picker.md): Animated avatar picker with SVG avatar options, colored selection ring and username input. Built with React, Tailwind CSS and Motion. - [Team Selector](https://kokonutui.com/docs/inputs/team-selector.md): Animated team size selector with stacked overlapping avatars, spring transitions and increment controls. Built with React, Tailwind CSS and Motion. - [Loader](https://kokonutui.com/docs/inputs/loader.md): Animated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React, Tailwind CSS and Motion. ## AI - [AI Input Selector](https://kokonutui.com/docs/ai/ai-prompt.md): Animated AI chat input with model selection dropdown, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion. - [AI Input Search](https://kokonutui.com/docs/ai/ai-input-search.md): AI search chat input with toggleable web search mode, file attachment and auto-resizing textarea. Built with React, Tailwind CSS and Motion. - [AI State Loading](https://kokonutui.com/docs/ai/ai-loading.md): Animated AI loading state cycling task statuses through a scrolling code-style log with an SVG progress spinner. Built with React and Tailwind CSS. - [AI Text Loading](https://kokonutui.com/docs/ai/ai-text-loading.md): Animated AI thinking indicator that cycles status messages with a shimmering gradient text effect. Built with React, Tailwind CSS and Motion. - [AI Voice](https://kokonutui.com/docs/ai/ai-voice.md): AI voice input button with recording timer, pulsing waveform bars and listening state. Built with React and animated Tailwind CSS styles. ## Texts - [Scroll Text](https://kokonutui.com/docs/texts/scroll-text.md): Scroll-driven text list that highlights the active word as you scroll, using IntersectionObserver with React, Tailwind CSS and Motion animations. - [Typing Text](https://kokonutui.com/docs/texts/type-writer.md): Typewriter text animation that types and deletes multiple sequences with a blinking cursor and auto loop, built with React and Motion. - [Matrix Text](https://kokonutui.com/docs/texts/matrix-text.md): Matrix-style text effect where letters scramble through binary characters before revealing, built with React, Tailwind CSS and Motion animations. - [Dynamic Text](https://kokonutui.com/docs/texts/dynamic-text.md): Animated text switcher that cycles through greetings in multiple languages, built with React, Tailwind CSS and Motion enter and exit transitions. - [Glitch Text](https://kokonutui.com/docs/texts/glitch-text.md): Customizable glitch text effect with adjustable intensity, colors and sizes, animated in React with Motion and styled with Tailwind CSS. - [Shimmer Text](https://kokonutui.com/docs/texts/shimmer-text.md): Animated shimmer text with a looping gradient sweep across the letters, built with React, Tailwind CSS gradients and Motion animations. - [Sliced Text](https://kokonutui.com/docs/texts/sliced-text.md): Text effect that splits into two offset slices and merges together on hover using clip-path, built with React, Tailwind CSS and Motion animations. - [Swoosh Text](https://kokonutui.com/docs/texts/swoosh-text.md): Hover text effect with layered colorful shadows that snap flat on mouseover, built with React, Tailwind CSS and Motion hover animations. ## Buttons - [Particle Button](https://kokonutui.com/docs/buttons/particle-button.md): Button that bursts animated particles from its center on click with a quick scale press effect, built with React, Motion, and Tailwind CSS. - [V0 Button](https://kokonutui.com/docs/buttons/v0-button.md): 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. - [Gradient Button](https://kokonutui.com/docs/buttons/gradient-button.md): Layered gradient button with emerald, purple, and orange variants, soft inner glow, and hover overlay, styled entirely with Tailwind CSS in React. - [Magnet Button](https://kokonutui.com/docs/buttons/attract-button.md): Magnetic button that pulls floating particles to its center on hover using Motion spring animations, built with React and Tailwind CSS. - [Hold Button](https://kokonutui.com/docs/buttons/hold-button.md): Press-and-hold confirmation button with an animated progress fill, configurable hold duration, and color variants, built with React and Motion. - [Social Button](https://kokonutui.com/docs/buttons/social-button.md): Share button that expands into a row of social icon buttons with staggered Motion animations on hover, built with React and Tailwind CSS. - [Command Button](https://kokonutui.com/docs/buttons/command-button.md): Keyboard shortcut button with a Command icon, hover shimmer sweep, and smooth CSS transitions, built with React and Tailwind CSS. - [Switch Button](https://kokonutui.com/docs/buttons/switch-button.md): Light and dark theme toggle button with a rotating sun icon and shimmer hover effect, built with React, next-themes, and Tailwind CSS. - [Slide Text Button](https://kokonutui.com/docs/buttons/slide-text-button.md): Animated link button with a vertical text slide on hover and default and ghost variants, built with React, Motion, and Tailwind CSS. ## Optional - [Full documentation](https://kokonutui.com/llms-full.txt): Every page concatenated into one file. - [Component registry](https://kokonutui.com/r/registry.json): shadcn registry index.