Skip to content
MIZU.

SIG—21 Signature system

Fader

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

View .md

Live — this one is real

Panel

Drag knobs and faders up or down (Shift for fine), press anywhere on the pad, or use the arrow keys; double-click or Backspace returns a control home. The synth really plays while you hold the button — the meters and scope read its audio.

Note

onValueCommitNothing yet

Usage

tsx
"use client";

import { Fader } from "mizu-ui";

export function Example() {
  return (
    <Fader
      label="Master"
      min={0}
      max={1}
      step={0.01}
      defaultValue={0.8}
      marks={[1, 0.5, 0]}
      level={0.62}
      format={(v) => `${Math.round(v * 100)}%`}
    />
  );
}

It starts with "use client" because it keeps state or passes functions to components, so it pastes into a Next.js page as it is. Other React setups ignore the directive.

This code, running — no configuration beyond the data

Keyboard

↑↓
Step up or down
Shift+arrowsPageUpPageDown
A tenth of the range
HomeEnd
Minimum or maximum
BackspaceDelete
Return home

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

sh
npx shadcn@latest add 0xuser64bit/mizu/fader

Every component imports from its own path, its name in kebab case. Its source, signature/Controls.tsx, also holds Knob and XYPad. Each has its own command and path; adding one after this copies only its small entry file. To paste the example, replace its mizu-ui import with:

tsx
import { Fader } from "@/components/ui/mizu/fader";

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion. A Client Component: its source starts with “use client”.

Inspect signature/Controls.tsx

Source is included in the npm package under src/signature/Controls.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
label / value / defaultValue / onValueChange / onValueCommitstring / number—As for Knob.
levelnumber | MotionValue<number>—A live signal from 0 to 1 for the meter; pass a motion value to update it without re-rendering.
marks / heightnumber[] / number—Values labelled beside the track; track height (176).
min / max / step / taper / format / resetValuenumber / linear | log / (value) => string—As for Knob.
name / disabledstring / boolean—Submit with a form; switch off.

Accessibility

Behind the drawing is a native range input: it takes focus, answers the arrow, Page, Home and End keys, reads its value as formatted text, and submits with a form when named. Shift steps by a tenth of the range, Backspace or Delete returns home, and focus shows in the accent.

Motion

The cap glides to track clicks and resets and follows the hand while dragged. The meter attacks instantly and releases steadily; its peak holds for a moment, then falls. Reduced motion jumps the cap.

Works alongside

ChronicleTrendChartWaveformPlane