kokonutui
Open-source collection of stunning Components built with Tailwind CSS, shadcn/ui and Motion to use on your websites
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.
A button with its shortcut drawn as keycaps that sink as you press the real keys.
A two-sided card you spin with a drag or a flick, with thickness, light and a floor shadow that follow the angle.
Checkout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.
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.
A landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.
AI thinking text with a soft wave through the letters and words that swap letter by letter.
A card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.
A multi-file upload queue with per-file progress, retry and cancel.
⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
AI search input with Quick and Research modes and a live trace underneath that stacks each source as it is read, times the run and opens into the full source list. Built with React, Tailwind CSS and Motion.
A headline hung like a Newton's cradle, so a knock on one letter clacks through the word, built with React and pendulum physics.
Transfer 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.
A ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
A halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.
Streamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
A living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas.
A pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.
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.
Voice input with a scrolling waveform, then a take you can play back, discard or send.