Kokonut UI components

Open-source collection of stunning Components built with Tailwind CSS, shadcn/ui and Motion to use on your websites

Components: 125
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 2,129
Source: https://github.com/kokonut-labs/kokonutui
Website: https://kokonutui.com
Install: npx shadcn@latest add @kokonutui/{name}

All Kokonut UI components

Command Palette: ⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
Activity Terrain: A contribution heatmap that tilts up into a 3D terrain you can turn, built with React and canvas.
AI Agent Lanes: A lead agent hands work to sub-agents that run side by side. Each gets a lane of tool calls, and you can scrub through the whole run.
AI Attachment: A file dropped into the chat uploads, then the assistant reads it page by page. Page citations in the answer light up the page they point…
AI Autocomplete: A text box that suggests how your sentence ends in grey after the caret. Tab takes it all, the right arrow takes one word, and typing the…
AI Conversation Branches: A chat where editing a message starts a new branch. A small tree beside it shows every version, and you can jump between them.
AI Checkout: An order the assistant puts together, paid without leaving the chat. The button fills while the charge runs, then the card folds into a…
AI Inline Citations: An answer with source chips beside each claim. One preview glides between chips and lights up the sentence it backs.
AI Code Run: The assistant runs a short Python script in the reply. A marker steps down the lines, the output prints, and the chart it draws grows in.
AI Connect: A tool call that stops because an app is not connected. Connect it right in the message, and the call picks up where it stopped.
AI Context Meter: How full the context window is, as a ring in the prompt footer that opens a breakdown by source and compacts when it fills.
AI Diff Review: A coding agent's edits streaming in file by file, then reviewed per file with accept, reject and undo.
AI Handoff: The assistant hands the chat to a person, with what they will see so you don't repeat yourself. The queue counts down and the agent joins…
AI Inline Edit: Select text in a document and ask AI to rewrite it. The edit streams in place as a word-level diff you accept, discard or try again.
AI Input Search: AI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that stacks each source's…
AI State Loading: Agent progress as a list of steps with a live log, elapsed time and a summary when done.
AI Memory: An assistant that saves what it learns about you into a memory list. New facts replace the ones they contradict, and you can edit or…
AI Message Queue: Keep typing while the agent works. Follow-ups stack above the composer, where you can reorder, edit or send one now, and go in one by one…
AI Model Selector: Pick a model and how hard it thinks. Effort is a detent track that reshapes for each model and keeps your level when you switch.
AI Order Status: A live delivery card in the reply. The courier moves along the route while the ETA counts down, and the route turns green on arrival.
AI Input Selector: AI chat input with a model menu, a separate Effort control, file chips you can drop or paste, a / command menu, and Stop while replying.
AI Redact: Masks names, emails, card numbers and keys as placeholders before a prompt is sent, then fills the real values back into the reply.
AI Schedule: Meeting times the assistant found, each with a strip of both calendars so you can see why it is free. Booking folds the list into the event.
AI Send: An email the assistant drafted, editable in place. Send starts a short countdown you can undo before anything goes out.
AI Text Loading: AI thinking text with a soft wave through the letters and words that swap letter by letter.
AI Token Alternatives: An answer where every unsure word shows what else the model weighed. Pick another word and the reply writes itself again from there.
AI Tool Approval: Approve or deny an agent's tool calls. Destructive calls need a press and hold, and decided calls fold into a trace with their output.
AI Tool Calls: Tool calls inside a chat reply. Each call streams in as one row with a live timer, then they fold into a single line once the answer is…
AI Voice: Voice input with a scrolling waveform, then a take you can play back, discard or send.
Amount Pad: A keypad for sending money. Digits spring into place, commas slide them along, and the amount shrinks to fit as it grows.
Apple Activity Card: Activity rings that draw with a count-up, lap past 100% with a shadowed end cap and dim to focus, built with React and Motion.
Magnet Button: A call-to-action button wrapped in a field of iron filings that align to its magnetic field and lean toward your cursor.
Avatar Picker: Generated avatars from a name, morphing as you type, on a 3D coin you can flick, tap or shuffle.
Background Paths: A ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
Beams Background: Animated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React, Tailwind CSS and…
Bell Button: A subscribe button whose bell swings and rings, with a clapper that really strikes.
Widget Grid: Dashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
Boarding Pass: A boarding pass that keeps itself current. When the gate or times change, only the changed characters roll over, the old value struck…
Card Field: A one-row card input for checkout. The number groups the way the brand prints it, then slides to its last four to make room for expiry and…
Flick Card: A two-sided card you spin with a drag or a flick, with thickness, light and a floor shadow that follow the angle.
Throw Deck: A pile of image cards you drag, flick off the top and send under the deck, with arrow keys and a details view.
Momentum Rail: A card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.
Cart Button: An Add button that opens into a quantity stepper in place, with a bin at one and press-and-hold to repeat.
Caustics Background: A hero on the floor of a pool. Light ripples across it, clicks drop rings that bend the light, and the headline's shadow wobbles below.
Clip Trimmer: A video trim timeline with a filmstrip, handles that snap to whole seconds and a playhead that loops the kept range.
Command Button: A button with its shortcut drawn as keycaps that sink as you press the real keys.
Contact Sheet: Pick from a shoot the way photographers do. Circle a frame in china marker, click again to strike it, and look through a loupe at the…
Cradle Text: A headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and pendulum physics.
Currency Transfer: Transfer tracker that converts the amount in place, walks through each step on a filling rail and ends with a copyable reference.
Detent Dial: Rotary knob that clicks from notch to notch and coasts when flicked, built with React and Motion.
Dot Field: A halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.
Drape Background: A pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.
Dynamic Text: Morphing text where shared letters travel, old ones fall and new ones land, with decode and cycle modes.
Empty State: "An empty list that shows what is missing and turns into it: the card in the drawing becomes your first project, ready to rename."
File Upload: A multi-file upload queue with per-file progress, retry and cancel.
Wind: Streamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
Focal Point Picker: Set where a photo's subject is and see every crop follow it live. Hover a crop to see what it cuts.
Glitch Text: Flat text that cuts into hard-shifted bands with a thin red/cyan split, on idle, hover or text change.
Gradient Button: Layered gradient button with emerald, purple and orange variants, a gradient border, a soft inner glow, press feedback and an optional icon.
Halftone Background: Any image, or a lit sphere, printed as a halftone dot screen, with a loupe that looks closer under the cursor, built with React and canvas.
Helpful Rating: "A page rating whose face changes with each answer, then asks what went wrong or what helped, with quick reasons and an optional note."
Hold Button: Press and hold to confirm, with a fill that drains back on early release and a drawn check on completion.
Ink Background: A hero written in ink on water. Stir it and the letters bleed, click to drop ink, and the headline gathers itself again. Built with WebGL.
Inline Alert: "An alert that does something about the problem: it lists the failed checks, re-runs them one by one, and turns from red to green when…
Lightbox Grid: A photo grid whose thumbnails grow into a full view and fly back to their slot when you drag them down.
Liquid Gauge: A usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation.
Now Playing: Music card with a spinning disc you can grab and turn to scrub, built with React and Tailwind CSS.
Liquid Slider: A vertical slider you fill like a glass, with a sloshing surface and rising bubbles.
Loader: Animated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React and Tailwind CSS.
Location Picker: Set a pickup point the way ride apps do. Drag the map under a fixed pin; it lifts off its shadow, glides onto the nearest curb, drops, and…
Marker Text: Hand-drawn highlights, underlines, circles, boxes and strikes that draw themselves in reading order when the text comes into view.
Marking Menu: A radial menu you hold to open or flick to pick blind, built with React and Motion.
Matrix Text: Matrix-style text effect where letters scramble through binary characters before revealing, built with React, Tailwind CSS and Motion…
Metric Card: A revenue KPI card. Scrub a day, drag a range, or pick a segment; the number rolls, the line morphs and the breakdown follows.
Morph Popover: A button that grows into the form it opens, with its label sliding up to become the title, then shrinks into a confirmation.
Split Nav: Navigation bar that splits around the active link, with drag-to-scrub, flick projection and an optional compact fold.
Mouse Effect Card: Interactive card with an animated dot pattern that repels away from the cursor, powered by React, Tailwind CSS and Motion spring physics.
Notification Stack: Stacked notifications that fan out on hover and swipe away, built with React and Tailwind CSS.
Page Flip: A book you turn by the corner. Drag a page over the spine or tap to turn it.
Particle Button: A status button for async actions, with a spinner, a drawn check and a particle burst on success.
Photo Straighten: Level a crooked photo on a ruler you drag or flick. The crop grows to hide the corners, and a grid shows while you adjust.
Plucked Text: A headline sitting on a string you can pluck, strum and let ring, built with React and real string physics.
Account Menu: An account card that morphs into its own menu, with account switching, status, theme and hold-to-sign-out.
Promise Toast: "A toast that follows a task: the ring spins while it works, closes into a check or a warning when it lands, and offers Undo or Retry…
Pull Cord: A lamp switch you pull on a swinging cord, built with React and a rope simulation.
Rain Glass Background: A hero seen through a rainy window. Drops gather and run, each a tiny lens on the view, and dragging wipes the fog off the glass.
Receipt Printer: A receipt that prints line by line, then tears off and falls when you pull it, built with React.
Save Button: A bookmark button that files into collections. Tap to save to the last one, then change it or make a new one from the strip.
Save Status: "An autosave pill for editors that says Editing, Saving or Saved, counts changes while offline, and syncs them when the connection comes…
Scroll Index: A section rail for long pages, with a tick per heading that you can hover, click or drag to scrub, built with React.
Scroll Text: Scroll-driven text list that highlights the active word as you scroll, using IntersectionObserver with React, Tailwind CSS and Motion…
Seat Map: Pick seats for a show. Drag along a row to take several, and it points out any single seat you'd leave stranded.
Shadow Text: A headline that works as a sundial. Each letter casts a long, soft shadow set by the reader's clock, and bringing the pointer close turns…
Shape Hero: A landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
Shimmer Text: Animated shimmer text with a looping gradient sweep across the letters, built with React, Tailwind CSS gradients and Motion animations.
Signature Pad: A signature field with a sprung pen tip, speed-weighted ink and SVG output.
Sliced Text: Text effect that splits into two offset slices and merges together on hover using clip-path, built with React, Tailwind CSS and Motion…
Slide Text Button: Animated link button with a vertical text slide on hover and default and ghost variants, built with React, Next.js Link, and Tailwind CSS.
Slide to Confirm: A confirm control for payments and other actions you can't take back. Slide the thumb to the end, or flick it.
Slot Picker: Book a meeting on a day rail. Drag a meeting into a free gap; it hops over existing bookings, resizes in place and shows the host's local…
Smooth Drawer: Checkout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.
Swipe Tabs: Tabs with a swipeable panel, a drag-tracked indicator and spring physics.
Social Button: Share button that expands into a row of social icon buttons with staggered Motion animations on hover, built with React and Tailwind CSS.
Spending Ring: A spending breakdown you spin like a dial; flick the ring and it settles with a category under the marker.
Split Flap Text: Departure-board lettering for headlines and status lines. Each tile flips only as far as its new letter, on a hinge, a beat after its…
Spoiler Text: Inline text hidden under drifting specks, like a chat spoiler. A click blows the specks away from the point you touched.
Spotlight Cards: Feature card grid with ambient aurora glow, magnetic 3D tilt and focus dimming on hover, built with React, Tailwind CSS and Motion springs.
Stack Panel: A panel that drills into pages like settings on a phone. The tapped row's label flies up into the title, and a swipe right takes you back.
Status Island: A pill that reports background work, reshaping as tasks change and opening into a list of everything in flight.
Stay Picker: A date range picker for booking stays. Every night shows its price, sold-out nights are hatched, and your stay is one pill that wraps…
Switch Button: Light and dark theme toggle whose sun folds into a moon while the new theme spreads from the button as a circle.
Extruded Text: Zinc 3D extruded text lit by your pointer, with letters that press in like keycaps.
Synced Transcript: A transcript that follows the spoken word, lets you click any word to jump there, and waits when you scroll away.
Team Selector: Seat picker with a scrubbable number, generated avatars and an optional rolling price line.
Tear Button: A confirm button you tear off like a ticket stub, hole by hole.
Time Zone Planner: Find a meeting time across time zones. Turn the meeting round a 24-hour dial where each ring is someone's day.
Tip Selector: A tip picker for checkout, set on a tape you drag and flick. The ticks you pass fill in, the amounts roll, and Round up makes the total a…
Tool Dock: An editor tool dock with a sliding selection plate, shortcut tooltips and flyouts that you can throw to any edge.
Topo Background: A living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas.
X Card: X (Twitter) style post card with author details, verified badge, reply thread and hover gradient, built with React and Tailwind CSS.
Typing Text: Typewriter text that makes the odd typo and corrects it, erases by selecting, and blinks its caret only when idle, built with React and…
Undo Button: An action button that gives you a few seconds to take it back, with the time left drawn around its own edge.
Uptime Card: A status page card with 90 days per service that swell under the cursor, and a day you click opens its incident log.
V0 Button: 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.
Wheel Picker: iOS-style 3D drum picker with flick momentum, built with React and Motion.

Kokonut UI components

All Kokonut UI components

Browse by category