Interface craft.
104 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-ui104 systems
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
4 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.
Forms
16 systemsFormFieldA 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 that retains the platform's keyboard and touch behavior.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
6 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.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.