Interface craft.
131 useful systems, one considered language. Find a piece, try its states, read the source, make it yours.
Install Mizu in your React app, import the stylesheet, and make it yours. Getting started ↗
npm install mizu-ui131 systems
Signature
22 systemsChronicleA zoomable, multi-lane timeline for incidents, releases and audit trails — spans, instants, a playhead and an overview brush.TrendChartValues over time as an instrument: a live legend that reads the crosshair, drag-to-measure deltas, annotations, thresholds and linked views.WaveformAudio you can see and scrub: a waveform over a native audio element, with chapters, speed, skips and an imperative handle.PlaneAn infinite, zoomable surface for boards, maps and diagrams — inertia, pinch, a minimap and a camera that follows keyboard focus.FlowGraphA node-and-wire editor: drag, wire with magnetic ports or the keyboard, refuse bad connections, watch runs flow and tidy into layers.TreemapA hierarchy by size that you enter like a place: squarified blocks, a camera that moves inside, nested previews, heat and a path back out.BoardA kanban board with lift-and-carry dragging, cards that part and fly into place, advisory limits, collapsible columns and a full keyboard path.OutlinerA keyboard-first outline: Enter splits, Tab restructures, whole branches move and fold, and any item can be zoomed into until it becomes the title.QueryBuilderConditions that read as a sentence: typed operators per field, nested any/all groups, a plain-language reading and an evaluator for local filtering.AnnotatorReview pins on anything: drop numbered pins, discuss in threads, resolve and reopen, and find every conversation in the list beside the work.TourA guided tour whose spotlight travels between real elements, follows them through scrolling and reflow, and explains each one beside it.InterviewA conversation instead of a form: one question at a time, letter keys for choices, branching, a review before sending and an honest submit.TransferQueueUploads you can watch and steer: a concurrency-limited queue around your own transfer function, with live speed, time left, pause, retry and cancel.TriageDeckDecisions at the speed of a gesture: fling the top card toward a decision, or use arrows and buttons — with tallies and an undo that flies the card back.GalleryA justified photo grid whose photos open from exactly where they sit: swipe to travel, pull down to put one back, pinch or double-tap to look closer.FolioA long-form reading surface: sidenotes sit in the margin beside their marks and fold into the text on narrow screens, while a contents rail keeps your place.SplitFlapA mechanical flip display: every character falls forward through the drum to its new value, cell after cell, and lands with a slap.ColumnBrowserMiller columns: choose an item and its contents open alongside, loading on demand, until a leaf opens in a preview — a stack you push and pop on narrow screens.LogStreamA live log tail that renders only what is in view: it follows new lines until you scroll away, counts what you missed, and searches, filters and opens any line whole.KnobA rotary control for instruments rather than forms: drag up or down, Shift for fine, arrows to step, double-click to return home — with log tapers for frequencies and times.FaderA console fader with a live meter: drag the cap, click the track to jump, and watch the level fall away beside it with a held peak.XYPadTwo parameters under one finger: press anywhere and the puck springs there, then sweep both at once with a trail behind it.
Foundation
9 systemsButtonThe primary action surface — solid, ghost and inverse, with a loading state and an arrow that leans into the hover.MarkThe diamond: a small marker for a state or position.SectionTagCompact structural text with an optional diamond marker.RuleA hairline separator with a meaningful optional label.BadgeA compact, bordered label for metadata and status.SpinnerA rotating diamond with a clear loading announcement.FrameCrop marks that frame media without competing with it.SliderA diamond-thumb range with an always-readable value.TooltipA small, linked explanation that works with focus and can be dismissed.
Motion
9 systemsMaskLineThe Mizu headline reveal — text rises from inside its own mask, one line at a time.RevealScroll-triggered entrance with direction, distance and delay control.MagneticA spring-follow wrapper — the surface leans toward the cursor and settles back.MarqueeA seamless infinite ticker that pauses on hover and stands still for reduced motion.PageWipeThe page transition — a full-screen sweep with a label, and an imperative API that hands you the midpoint.PresenceA keyed state enters after the previous state has made room.TiltA restrained depth response to the pointer, returning cleanly to rest.ParallaxA bounded depth cue linked to the surface's actual position in the viewport.ScrollProgressA thin reading indicator driven by real document scroll progress.
Type
4 systemsSpecimenA live type tester — set text, size, weight, tracking and serif voice while the specimen redraws.SoftTypeA variable-font engine in CSS — weight and width oscillate through the Archivo axes.WaveTextKinetic text that answers the cursor — each letter lifts, scales and warms as you pass over it.GhostWordAn oversized outlined word that fills with accent when hovered — built for footers and chapter markers.
Instruments
3 systemsPinfieldA grid of pins that carries pulses — click and a wavefront travels outward, lighting the field.SignalA waveform you can scrub — drag horizontally to move the phase, hover to light the bars.RippleSurfaceAn ambient surface that ripples where you touch it — built for hero sections and invite panels.
Feedback
3 systemsComposites
6 systemsAccordionHeight-animated disclosure with a diamond marker that morphs between states.TabsControlled or uncontrolled tabs with a sliding underline that travels between triggers.DialogA modal with focus trap, Escape handling, scroll lock and an expo entrance.NavThe thread header — scroll progress with a diamond node, chapter tracking, and a full-screen mobile menu.DrawerA panel that slides in from an edge for filters, details and quick edits, with all of Dialog's modal care.PopoverA small panel that opens beside its button for settings and filters, closing when you look away.
Forms
18 systemsDateRangeFieldA date window with native calendars, useful presets and clear boundaries.OneTimeCodeA one-time code, one digit to a cell, that fills itself from the message it came in.FormFieldA label, hint and error linked to a single control without manual IDs.TextFieldA precise, labelled input with native validation and clear error feedback.TextAreaLong-form input with resizable room for thoughts, labels and validation.SelectFieldNative selection with a Mizu-styled option menu where supported.CheckboxA generous check target with a secondary description and native form submission.SwitchA tactile binary setting whose thumb tracks the state.SearchFieldSearch with a clear action that belongs to the input.PasswordFieldA revealable secret with explicit visibility feedback.RadioGroupMutually exclusive choices with room to explain what each choice means.SegmentedControlA compact selection rail for density, view and other immediate choices.NumberFieldA bounded numeric stepper that survives decimals and repeated actions.RatingA star rating you can choose with a mouse, touch or arrow keys.ColorPickerNamed swatches and a native custom-color dialog, with the hex value always visible.TagInputAdd, remove and deduplicate tags without losing the keyboard path.FileDropzoneStart a file upload by dropping or browsing, with size and type validation on both paths.AsyncFormA form that follows the save promise and preserves input when a save fails.
Status
12 systemsStatusA quiet diamond and a readable state, never color alone.AlertContextual feedback with a title, explanation and a place to recover.ProgressDeterminate or indeterminate progress, measured on a hairline track.MeterA bounded measurement that distinguishes a reading from task completion.SkeletonA restrained placeholder that retains a readable loading announcement.EmptyStateA useful absence: explain what belongs here and give the next action.ErrorStateA failure surface that names the problem and lets the user try again.ConnectionStatusA connection hint that follows actual browser online and offline events.SaveIndicatorKeep the difference between saved, dirty, saving and failed visible.AsyncBoundaryOne readable contract for ready, loading, empty and failed content.TaskProgressMake a multi-stage operation legible, including partial completion and failure.AsyncButtonAn action whose feedback follows the real promise, with duplicate clicks prevented.
Data
12 systemsDataTableA sortable, typed table that keeps native table semantics and nulls in their place.DescriptionListAligned names and values with the semantics of a description list.StatA metric with context: direction and favorability are separate decisions.BarChartReadable, labelled comparisons without a charting dependency.SparklineA compact history trace with the underlying readings in its accessible name.HeatmapA daily activity field with every date and reading available as text.TimelineEvents connected by a fine thread, with the present kept distinct.ActivityFeedFilter a real event stream by its event type without losing chronological context.DiffViewTwo text versions, aligned by line, with changes made visible.DataInspectorOpen a payload, follow its structure and copy the JSON without a developer-tools panel.TreeViewBrowse a hierarchy with native disclosure and an optional selected leaf.ComparisonTableA feature matrix whose rows and columns stay connected to their meaning.
Content
10 systemsAvatarIdentity at a glance, with initials that survive a missing image.KbdKeyboard hints set apart from the surrounding sentence.CodeBlockSelectable source with a real copy action and room for long lines.QuoteA serif voice in the margin, with an honest attribution.ProseA readable measure for long-form documents inside an interface.ImageFigureResponsive imagery with a caption and a visible failure state.MediaPlayerPlayback handed to the browser's accessible controls.LinkCardA destination with enough context to decide whether to follow it.FileCardA downloadable resource with a legible name and size.ChecklistComplete a set of real tasks and see how much remains.
Layout
7 systemsStackA single-axis layout that wraps when the task calls for it.GridResponsive columns that make room for the content without breakpoint bookkeeping.SplitPaneGive two working regions the space they need, with a real resizable boundary.DockA two-pane workspace that keeps your drafts intact as tabs move, panels collapse and the working space changes.AspectRatioReserve media space before it arrives, keeping the surrounding reading rhythm steady.ScrollAreaA bounded reading region that keyboard users can enter and scroll.AppShellNamed working regions and a skip link, composed around the product's real content.
Interaction
8 systemsComboboxSearch a bounded set of choices and select without leaving the keyboard.MultiSelectFilter a set, keep several choices and make the selection limit clear.InlineEditChange a value in place, with validation and an explicit path back.RangeSelectorTwo bounded handles define an interval without crossing or hiding their values.ReorderListRearrange a sequence while each item keeps its identity.ImageCompareReveal two versions with a divider that follows your hand.HistoryControlsUndo and redo a bounded edit history, including the branch created by a new change.ConfirmActionReview a consequential action, execute the actual promise and recover from failure.