kokonutui

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

#ItemInstall
1
ai-prompt

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.

2
command-button

A button with its shortcut drawn as keycaps that sink as you press the real keys.

3
card-flip

A two-sided card you spin with a drag or a flick, with thickness, light and a floor shadow that follow the angle.

4
smooth-drawer

Checkout bottom sheet on Vaul snap points, peeking at the total and dragging up for details.

5
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.

6
shape-hero

A landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.

7
ai-text-loading

AI thinking text with a soft wave through the letters and words that swap letter by letter.

8
carousel-cards

A card rail you flick with momentum, snapping on a spring, with scroll-driven cover-flow depth and parallax.

9
file-upload

A multi-file upload queue with per-file progress, retry and cancel.

10
action-search-bar

⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.

11
ai-input-search

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.

12
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.

13
currency-transfer

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.

14
background-paths

A ribbon of lines in one color that keeps flowing at any size and parts around the cursor.

15
dot-field

A halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.

16
flow-field

Streamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.

17
topo-background

A living contour map that drifts, rises under the cursor and ripples on click, built with React and Canvas.

18
drape-background

A pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.

19
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.

20
ai-voice

Voice input with a scrolling waveform, then a take you can play back, discard or send.