Still as snow.Moves like water.
miyuki-ui is a library of 323 React components for Next.js: backgrounds and effects, everyday controls, charts, AI blocks and full templates. Copy the source into your project and make it yours.
npx shadcn@latest add @miyuki-ui/buttonEvery tile is the real component, running.
See all componentsBackgrounds that set a scene
Aurora, ice, currents and falling snow. Each one is drawn for daylight and for night, and leaves room for your words.
Browse 48 backgroundsSlow curtains of northern light hanging from the top edge, behind your content.
A grid of ice tiles laid back in perspective; each tile the pointer crosses lights up and slowly melts back.
A whirlpool of particles circling a centre, turning faster as they spiral inward, with short trails.
Controls with a little physics
Switches stretch as they travel, check boxes fill from the bottom, sliders carry their value with them. The same controls by day and at night: try them.
Browse 25 controlsDay
Night
Cards that answer the pointer
They tilt, catch the light and reshuffle. Move across them.
Browse 33 cardsA card that tilts toward the pointer while its contents lift off the surface at different depths.
A plain card where a soft light follows the pointer and reveals a pattern that is otherwise invisible.
A small stack of cards that cycles, with the front card leaving and rejoining at the back.
Type that arrives
Words that flow, resolve, type themselves and settle into place, with the real text always there for screen readers.
Browse 24 text effectsLetters filled with thin wavy lines of colour that flow sideways like water, drawn on a canvas in the surrounding font.
Phrases typed out after a fixed prefix, held, erased and replaced, with a water-blue caret.
A passage that arrives word by word, each word rising slightly and coming into focus.
Text that starts as scrambled characters and resolves to the real text one character at a time.
Pickers that stay out of the way
Dates, ranges, times and colours, with full keyboard support and labels where assistive tech expects them.
Browse 10 pickersA month on the page for choosing one date or a range, with one or two months side by side.
Pick a colour by eye on a saturation and brightness area, by hex value, or from presets taken from the theme.
Charts built like instruments
Bars stand in tubes and fill like measuring cylinders. Areas are water. Every chart has a keyboard path and a table behind it.
Browse 31 chartsThe whole catalogue
All components- Backgrounds & effectsGrids, light, weather and texture to set behind content48
- CardsSurfaces that hold one piece of content and answer the pointer33
- Text effectsHeadlines that type, reveal, shimmer or rearrange themselves24
- Scroll & parallaxMotion tied to how far the page has scrolled5
- Cursor & pointerEffects that follow the pointer or answer it5
- ButtonsActions, from plain buttons to ones with a little motion19
- Inputs & formsFields, toggles and the other parts of a form25
- Selection & pickersChoosing a value: selects, comboboxes, dates and colours10
- OverlaysDialogs, drawers, popovers, menus and tooltips15
- NavigationHeaders, tabs, docks, breadcrumbs and banners19
- Data displayTables, lists, badges, timelines and figures28
- Carousels & mediaCarousels, galleries, image comparisons and players11
- Layout & gridsBento grids, columns and the structure of a page6
- Globes & mapsGlobes, world maps and the routes between places5
- ChartsLines, bars, areas and flows drawn from your data31
- AI & agentsChat, prompts, streamed answers and agent activity13
- BlocksLarger assemblies: heroes, pricing, footers and feature sections22
- TemplatesFull pages to start a product, a portfolio or a launch20
- LabsExperiments that do not fit anywhere else yet4
- FoundationsTokens, type, icons and the small pieces everything else uses2
Copy the source. Make it yours.
- The code lands in your project, in its own folder beside your other components.
- There is no runtime package to keep up with. What you install is plain React and Tailwind.
- Change anything. Rename it, restyle it, delete half of it.
+ components/miyuki-ui/<component>.tsx
+ a few theme tokens in your stylesheet