Skip to content
MIZU.

SIG—08 Signature system

Outliner

A keyboard-first outline: Enter splits, Tab restructures, whole branches move and fold, and any item can be zoomed into until it becomes the title.

View .md

Live — this one is real

Scenario

Enter splits a line, Tab and Shift+Tab restructure, Alt+↑↓ moves a branch, ⌘/Ctrl+Enter marks done, ⌘/Ctrl+↑↓ folds, Alt+→ focuses on an item (or click its diamond).

  • Done.
  • Collapsed, 3 items hidden.

Enter adds a line, Tab and Shift Tab change level, Alt with arrows moves a line, Control or Command with Enter marks it done, Control or Command with arrows folds it, Alt Right focuses on it and Alt Left steps back out.

onItemsChange → Markdown
- Week one — make it boring
  - [x] Name one owner for the migration
  - Rehearse the rollback on staging
    - Time it with a stopwatch
    - Write down every manual step
  - Freeze the schema
- Week two — rehearse in public
  - Load test against the new schema
  - Status page copy reviewed by support
  - Dry run with the on-call rotation
- Launch day
  - Flag on for 5% · watch error budget
  - Everyone else at 14:00 if quiet

Usage

tsx
"use client";

import { useState } from "react";
import { Outliner, type OutlineItem } from "mizu-ui";

export function Example() {
  const [items, setItems] = useState<OutlineItem[]>([
    {
      id: "a",
      text: "Plan the launch",
      children: [
        { id: "b", text: "Name an owner", done: true },
        { id: "c", text: "Rehearse the rollback" },
      ],
    },
    { id: "d", text: "Write the announcement" },
  ]);
  return <Outliner label="Launch" items={items} onItemsChange={setItems} />;
}

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

  • Done.

Enter adds a line, Tab and Shift Tab change level, Alt with arrows moves a line, Control or Command with Enter marks it done, Control or Command with arrows folds it, Alt Right focuses on it and Alt Left steps back out.

Keyboard

Enter·Shift+Enter
New line (splits at the caret) · line break
Tab·Shift+Tab
Indent · outdent with descendants
Alt+↑↓
Move the branch among its siblings
⌘/Ctrl+Enter
Mark done
⌘/Ctrl+↑↓
Fold or unfold
Alt+→←
Focus on the item · step back out
Backspace
At the start: merge with the line above

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/outliner

Every component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:

tsx
import { Outliner, type OutlineItem } from "@/components/ui/mizu/outliner";

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/Outliner.tsx

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

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Accessible name and the root of the location trail.
items / defaultItems / onItemsChangeOutlineItem[]—A tree of id, text, done, collapsed and children. Every edit returns a fresh tree.
placeholderstring"Write a line…"Prompt for the first line.
createId() => string—Id factory for new lines; defaults to a random id.

Accessibility

Each line is a labelled text field that states its level and position; done and folded states are described. Every structural command is a key chord with an announcement. The location trail is a navigation landmark; focusing into an item moves focus to its first line.

Motion

Lines slide to their new level or place, open and close in height, and a focused item's text grows into the page title through a shared layout transition; stepping out reverses it. The active thread is traced in accent. Reduced motion changes structure instantly.

Works alongside

ChronicleTrendChartWaveformPlane