Changelog
New and updated Kokonut UI components, release by release, with a link to each component and its pull request.
October 14, 2026
New components16
- CD-08Notification StackCardsStacked notifications that fan out on hover and swipe away, built with React and Tailwind CSS.#39
- IN-05Detent DialInputsRotary knob that clicks from notch to notch and coasts when flicked, built with React and Motion.#40
- IN-06Wheel PickerInputsiOS-style 3D drum picker with flick momentum, built with React and Motion.#41
- BG-05Topo BackgroundBackgroundsA living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas.#46
- BT-10Pull CordButtonsA lamp switch you pull on a swinging cord, built with React and a rope simulation.#47
- CD-09Liquid GaugeCardsA usage meter filled with liquid that sloshes, ripples and bubbles, built with React and a wave simulation.#50
- CD-10Activity TerrainCardsA contribution heatmap that tilts up into a 3D terrain you can turn, built with React and canvas.#51
- CD-11Receipt PrinterCardsA receipt that prints line by line, then tears off and falls when you pull it, built with React.#52
- IN-07Liquid SliderInputsA vertical slider you fill like a glass, with a sloshing surface and rising bubbles.#53
- IN-08Signature PadInputsA signature field with a sprung pen tip, speed-weighted ink and SVG output.#54
- BT-11Tear ButtonButtonsA confirm button you tear off like a ticket stub, hole by hole.#55
- BT-12Bell ButtonButtonsA subscribe button whose bell swings and rings, with a clapper that really strikes.#56
- TX-05Plucked TextTextsA headline sitting on a string you can pluck, strum and let ring, built with React and real string physics.#57
- NV-07Marking MenuNavigationA radial menu you hold to open or flick to pick blind, built with React and Motion.#58
- BG-06Drape BackgroundBackgroundsA pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.#59
- BG-01Dot FieldBackgroundsA halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.#67
Improved28
- CD-01Flick CardCardsRebuilt as Flick Card: drag or flick it to spin, with thickness and light that follow the angle.#67
- CD-02Throw DeckCardsRebuilt as Throw Deck: throw the top card off and it tucks back under the pile.#67
- CD-07Momentum RailCardsRebuilt as Momentum Rail: drag with momentum and cover-flow depth from scroll.#67
- CD-03Now PlayingCardsRebuilt as Now Playing: a spinning disc you turn to scrub the track.#67
- CD-05Widget GridCardsRebuilt as Widget Grid: pick up, reorder and resize widgets by pointer or keyboard.#67
- TX-02Dynamic TextTextsRebuilt as Morph Text: letters travel, fall and land between strings, with decode and cycle modes.#67
- TX-03Glitch TextTextsRebuilt as Signal Text: flat text with sliced band glitches, on idle, hover or change.#67
- TX-04Extruded TextTextsRebuilt as Extruded Text: 3D letters lit by the cursor that sink like keycaps.#67
- BG-04WindBackgroundsRebuilt as Wind: monochrome streamlines that part around the cursor and swirl in its wake.#67
- NV-02Tool DockNavigationRebuilt as Tool Dock: a draggable editor dock with tooltips, shortcuts and tool flyouts.#67
- NV-03Swipe TabsNavigationRebuilt as Swipe Tabs: swipe the panel and the indicator follows your finger.#67
- NV-01Split NavNavigationRebuilt as Split Nav: the bar splits around the active link and you can scrub across it.#67
- NV-04Account MenuNavigationRebuilt as Account Menu: the card morphs into its menu, with account switching and hold to sign out.#67
- NV-05Command PaletteNavigationRebuilt as Command Palette: nested pages, fuzzy matching and instant keyboard use.#67
- IN-02Avatar PickerInputsFaces generated from your name, on a 3D coin you can flick or shuffle.#67
- CD-06Currency TransferCardsOdometer amounts, a chip that carries the money across, and a progress arc.#67
- TX-01Typing TextTextsA caret that blinks only when idle, select-to-delete, and optional typos.#67
- CD-04Apple Activity CardCardsNumbers count up with the rings, and rings can go past 100%.#67
- CD-08Notification StackCardsReleased cards spring back or fly away with your finger's speed.#67
- BG-05Topo BackgroundBackgroundsElevation labels on the contour lines.#67
- BG-02Background PathsBackgroundsRebuilt as one flowing ribbon of lines that part around the cursor.#48
- BG-03Shape HeroBackgroundsRebuilt around a pile of shapes you can drag and throw.#49
- AI-05AI VoiceAIA scrolling waveform, and a take you review before sending.#60
- AI-01AI Input SelectorAIAttachment chips, slash commands, and Stop while it replies.#61
- AI-03AI State LoadingAIAgent steps with a live log, a step rail and timings.#62
- AI-04AI Text LoadingAIA letter wave instead of a gradient shimmer.#63
- BT-01Particle ButtonButtonsCalls your onClick and onSuccess, and keeps particles inside the button.#25
- BT-03Gradient ButtonButtonsCorrect light and dark themes, and renders its children and icon.#27
Across the library
