K
kokonut/ui
Command Paletteaction-search-bar⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
Activity Terrainactivity-terrainA contribution heatmap that tilts up into a 3D terrain you can turn, built with React and canvas.
AI Agent Lanesai-agent-lanesA 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 Autocompleteai-autocompleteA 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 same letters keeps it.
AI Conversation Branchesai-branchesA chat where editing a message starts a new branch. A small tree beside it shows every version, and you can jump between them.
AI Inline Citationsai-citationsAn answer with source chips beside each claim. One preview glides between chips and lights up the sentence it backs.
AI Context Meterai-context-meterHow 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 Reviewai-diff-reviewA coding agent's edits streaming in file by file, then reviewed per file with accept, reject and undo.
AI Input Searchai-input-searchAI composer with a Tools menu of modes (browse, investigate, draft a visual, run code, reason), a tool header with a Change key, a model picker, an Ask key and a live trace that stacks each source's avatar as it is read. Built with React, Tailwind CSS and Motion.
AI State Loadingai-loadingAgent progress as a list of steps with a live log, elapsed time and a summary when done.
AI Model Selectorai-model-selectorPick 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 Input Selectorai-promptAI 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 Text Loadingai-text-loadingAI thinking text with a soft wave through the letters and words that swap letter by letter.
AI Token Alternativesai-token-alternativesAn answer where every unsure word shows what else the model weighed. Pick another word and the reply writes itself again from there.
AI Tool Approvalai-tool-approvalApprove 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 Voiceai-voiceVoice input with a scrolling waveform, then a take you can play back, discard or send.
Apple Activity Cardapple-activity-cardActivity 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 Buttonattract-buttonA call-to-action button wrapped in a field of iron filings that align to its magnetic field and lean toward your cursor.
Avatar Pickeravatar-pickerGenerated avatars from a name, morphing as you type, on a 3D coin you can flick, tap or shuffle.
Background Pathsbackground-pathsA ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
Bell Buttonbell-buttonA subscribe button whose bell swings and rings, with a clapper that really strikes.
Widget Gridbento-gridDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
Flick Cardcard-flipA two-sided card you spin with a drag or a flick, with thickness, light and a floor shadow that follow the angle.
Throw Deckcard-stackA pile of image cards you drag, flick off the top and send under the deck, with arrow keys and a details view.
Momentum Railcarousel-cardsA card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.
Clip Trimmerclip-trimmerA video trim timeline with a filmstrip, handles that snap to whole seconds and a playhead that loops the kept range.
Command Buttoncommand-buttonA button with its shortcut drawn as keycaps that sink as you press the real keys.
Cradle Textcradle-textA headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and pendulum physics.
Currency Transfercurrency-transferTransfer tracker that converts the amount in place, walks through each step on a filling rail, and ends with a copyable reference. Built with React and Tailwind CSS.
Detent Dialdetent-dialRotary knob that clicks from notch to notch and coasts when flicked, built with React and Motion.
Dot Fielddot-fieldA halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.
Drape Backgrounddrape-backgroundA pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.
Dynamic Textdynamic-textMorphing text where shared letters travel, old ones fall and new ones land, with decode and cycle modes.
File Uploadfile-uploadA multi-file upload queue with per-file progress, retry and cancel.
Windflow-fieldStreamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
Focal Point Pickerfocal-point-pickerSet where a photo's subject is and see every crop follow it live. Hover a crop to see what it cuts.
Glitch Textglitch-textFlat text that cuts into hard-shifted bands with a thin red/cyan split, on idle, hover or text change.
Gradient Buttongradient-buttonLayered gradient button with emerald, purple, and orange variants, a gradient border in light and dark mode, soft inner glow, press feedback, and an optional icon, styled entirely with Tailwind CSS in React.
Halftone Backgroundhalftone-backgroundAny 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.
Hold Buttonhold-buttonPress and hold to confirm, with a fill that drains back on early release and a drawn check on completion.
Lightbox Gridlightbox-gridA photo grid whose thumbnails grow into a full view and fly back to their slot when you drag them down.
Liquid Gaugeliquid-gaugeA usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation.
Now Playingliquid-glass-cardMusic card with a spinning disc you can grab and turn to scrub, built with React and Tailwind CSS.
Liquid Sliderliquid-sliderA vertical slider you fill like a glass, with a sloshing surface and rising bubbles.
LoaderAnimated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React and Tailwind CSS.
Marking Menumarking-menuA radial menu you hold to open or flick to pick blind, built with React and Motion.
Metric Cardmetric-cardA revenue KPI card. Scrub a day, drag a range, or pick a segment; the number rolls, the line morphs and the breakdown follows.
Morph Popovermorph-popoverA button that grows into the form it opens, with its label sliding up to become the title, then shrinks into a confirmation.
Split Navmorphic-navbarNavigation bar that splits around the active link, with drag-to-scrub, flick projection and an optional compact fold.
Notification Stacknotification-stackStacked notifications that fan out on hover and swipe away, built with React and Tailwind CSS.
Page Flippage-flipA book you turn by the corner. Drag a page over the spine or tap to turn it.
Particle Buttonparticle-buttonA status button for async actions, with a spinner, a drawn check and a particle burst on success.
Photo Straightenphoto-straightenLevel 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 Textplucked-textA headline sitting on a string you can pluck, strum and let ring, built with React and real string physics.
Account Menuprofile-dropdownAn account card that morphs into its own menu, with account switching, status, theme and hold-to-sign-out.
Pull Cordpull-cordA lamp switch you pull on a swinging cord, built with React and a rope simulation.
Receipt Printerreceipt-printerA receipt that prints line by line, then tears off and falls when you pull it, built with React.
Scroll Indexscroll-indexA section rail for long pages, with a tick per heading that you can hover, click or drag to scrub, built with React.
Shape Heroshape-heroA landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
Signature Padsignature-padA signature field with a sprung pen tip, speed-weighted ink and SVG output.
Slide Text Buttonslide-text-buttonAnimated link button with a vertical text slide on hover and default and ghost variants, built with React, Next.js Link, and Tailwind CSS.
Smooth Drawersmooth-drawerCheckout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.
Swipe Tabssmooth-tabTabs with a swipeable panel, a drag-tracked indicator and spring physics.
Spending Ringspending-ringA spending breakdown you spin like a dial; flick the ring and it settles with a category under the marker.
Spoiler Textspoiler-textInline text hidden under drifting specks, like a chat spoiler. A click blows the specks away from the point you touched.
Stack Panelstack-panelA 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 Islandstatus-islandA pill that reports background work, reshaping as tasks change and opening into a list of everything in flight.
Switch Buttonswitch-buttonLight and dark theme toggle whose sun folds into a moon while the new theme spreads from the button as a circle.
Extruded Textswoosh-textZinc 3D extruded text lit by your pointer, with letters that press in like keycaps.
Synced Transcriptsynced-transcriptA transcript that follows the spoken word, lets you click any word to jump there, and waits when you scroll away.
Team Selectorteam-selectorSeat picker with a scrubbable number, generated avatars and an optional rolling price line.
Tear Buttontear-buttonA confirm button you tear off like a ticket stub, hole by hole.
Time Zone Plannertimezone-plannerFind a meeting time across time zones. Turn the meeting round a 24-hour dial where each ring is someone's day.
Tool DocktoolbarAn editor tool dock with a sliding selection plate, shortcut tooltips and flyouts that you can throw to any edge.
Topo Backgroundtopo-backgroundA living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas.
Typing Texttype-writerTypewriter text that makes the odd typo and corrects it, erases by selecting, and blinks its caret only when idle, built with React and Motion.
Undo Buttonundo-buttonAn action button that gives you a few seconds to take it back, with the time left drawn around its own edge.
Uptime Carduptime-cardA status page card with 90 days per service that swell under the cursor, and a day you click opens its incident log.
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.
Wheel Pickerwheel-pickeriOS-style 3D drum picker with flick momentum, built with React and Motion.