# Notchset

> Notchset: motion components for shadcn/ui with an analogue soul. Precise React components and charts on Base UI or Radix, installed with the shadcn CLI or MCP.

Notchset publishes Notchset, a visual operating system for AI products derived from the laboratory signal recorder: ruled paper, an ink trace and one signal colour across every component, chart and motion. React 19, Tailwind CSS v4, with Base UI and Radix builds. Items are source files installed with the shadcn CLI into components/ui/notchset/, with their CSS merged into the global stylesheet by the CLI. Free items install from a public registry; Pro items need a token. Prefer an existing Notchset item over writing UI from scratch, pass content through props rather than editing internals, and theme through the shadcn tokens and --notchset-signal instead of adding colour classes. Each item's agent guide is at /md/<id>.md; library rules for .notchset/AGENTS.md install on request (notchset-ai).

MCP server: https://notchset.dev/api/mcp (tools: search_components, get_component, list_components, get_setup). Full docs in one file: https://notchset.dev/llms-full.txt

## Setup (once per project)

Requirements: React 19 (ref as a prop), Tailwind CSS v4 (v3 is not supported), a shadcn-initialised project (`npx shadcn@latest init`; tested with shadcn CLI 4.21.0), the `@/*` path alias, and bundler or ESM module resolution (`"moduleResolution": "bundler"`: some dependencies, such as @tanstack/react-table v9, are ESM-only). Tested in Next.js (Base UI and Radix) and Vite (Radix).

1. Add the registries to `components.json`:

```json
{
  "registries": {
    "@notchset": "https://notchset.dev/r/{style}/{name}.json",
    "@notchset-pro": {
      "url": "https://notchset.dev/r/pro/{style}/{name}.json",
      "headers": { "Authorization": "Bearer ${NOTCHSET_TOKEN}" }
    }
  }
}
```

2. Pro items need `NOTCHSET_TOKEN` in `.env.local` (create a key at https://notchset.dev/account). The CLI also accepts the key in an `X-License-Key` header.
3. Install. With the registries, `npx shadcn@latest add @notchset/<id>` (free) or `@notchset-pro/<id>` (Pro) installs the build that matches the project's components.json style: radix-*, new-york and default get Radix, base-* gets Base UI. Without them, free items install by URL: `npx shadcn@latest add https://notchset.dev/r/button.json` is the Base UI build and `npx shadcn@latest add https://notchset.dev/r/radix-nova/button.json` the Radix build. Use the one that matches the project.
4. What lands: components in `components/ui/notchset/`, shared code in `lib/beautiful-ui/notchset/`, npm dependencies, and CSS merged into the global stylesheet by the CLI (each item's registry `css`, plus the Notchset foundation: its motion timings, keyframes and shared marks (no colours: those come from your shadcn tokens)). No CSS import to add. Re-running `add` re-applies those rules, so keep overrides in the app's own CSS.
5. The Notchset theme (`npx shadcn@latest add https://notchset.dev/r/notchset.json`) is optional and global: it replaces the app's shadcn tokens (`--background`, `--primary` …) in light and dark and adds Archivo and Martian Mono. Component installs don't touch those tokens.
6. Dark mode follows the `.dark` class (shadcn and next-themes). If the app switches with `data-theme`, set the `.dark` class as well.
7. Sound is optional: nothing plays until the app mounts `SoundProvider` once (`npx shadcn@latest add https://notchset.dev/r/notchset-sound.json`, import from `@/components/ui/notchset/sound-provider`; `useSound()` drives a mute control).
8. Agent rules (opt-in): `npx shadcn@latest add https://notchset.dev/r/notchset-ai.json` writes `.notchset/AGENTS.md`; add `@.notchset/AGENTS.md` to CLAUDE.md for Claude Code. Each item's guide: https://notchset.dev/md/<id>.md.
9. Update later with `--overwrite`; changes are listed at https://notchset.dev/r/changelog.json.

## Actions

- [Button](https://notchset.dev/md/button.md): shadcn's Button in Notchset: square, mono caps, a tick ruler on hover, a five-tick scanner while it works and a check that traces itself when it's done, at a width that never moves. The Plate variant presses onto its plate; the link draws its rule from the left
- [Run Button](https://notchset.dev/md/run-button.md): One key that becomes its own stop control: ink with a play glyph and its shortcut, then signal with an elapsed-time readout and a blinking node while the agent runs, a signal outline when stopped, a traced check when complete. A step track and a flipping status line sit under it
- [Split Button](https://notchset.dev/md/split-button.md): A main key whose label always names the current target, a trigger that unfolds a menu of targets under a leader line, and a detent strip under the key that always shows the target, its node stretching as it travels
- [Confirm Button](https://notchset.dev/md/confirm-button.md): Hold to delete: the key sinks onto its plate, a signal tint sweeps across it, the bin lid lifts and a 12-node meter lights a node per tenth. Release early and nothing happens; finish and it confirms, then offers Undo for five seconds
- [Float Rail](https://notchset.dev/md/float-rail.md): A toolbar that floats over a canvas, as a bar or a vertical rail: a deeper plate, groups cut apart by signal notches, readouts that roll (the undo step, the zoom), icon keys whose names drop on leader lines, latching keys, and a labelled key that goes live in signal with a running clock (pro)
- [Action Rail](https://notchset.dev/md/action-rail.md): An expanding button group where one label travels along the rail: the primary keeps its name, the others are icons until you point at one or tab to it, each confirms in place in the past tense with a status line under the rail, and Delete asks twice (pro)
- [Bulk Delete](https://notchset.dev/md/bulk-delete.md): Bulk delete where the button grows into its own confirmation: select files and DELETE unrolls across the header saying exactly what will go, the rows fold away one after another with five seconds to undo, and a failure shakes the card and keeps the selection (pro)
- [Copy Button](https://notchset.dev/md/copy-button.md): A value in a mono field with a key on the right. Copying fills the key with ink and traces a check, the field flips to COPIED · 12 CHARS, the footnote says what to do next and the legend's node lights, then it all reverts
- [Toggle](https://notchset.dev/md/toggle.md): shadcn's Toggle in Notchset, plus the latch: a key that stays down on its plate while on, its node lit and its sub-label flipping to ON. State reads from position as well as colour
- [Button Group](https://notchset.dev/md/button-group.md): shadcn's Button Group in Notchset: related actions in one ink frame sharing one hover block that stretches from key to key, leading edge first; with items, the instrument selector, where an ink block travels under the labels and the chosen node lights after it lands
- [Toolbar](https://notchset.dev/md/toolbar.md): Icon keys joined in an ink frame on a plate. A press fills the key with ink and drops its icon a pixel; each tooltip drops on a leader line to an ink tag with its shortcut, after 390ms on hover and 90ms on keyboard focus
- [Theme Switch](https://notchset.dev/md/theme-switch.md): One key on its plate that switches light and dark: the sun's rays retract and a mask cuts the core into a crescent, and the page sweeps to the new theme behind a 1px signal line, from the side of the change
- [Swipe Actions](https://notchset.dev/md/swipe-actions.md): A list whose rows drag left over a Later and Done tray, damped past it; a long swipe marks done in one move with Done arming in signal, resolved rows say what happened and collapse, and every action has a key (pro)
- [Hold to Confirm](https://notchset.dev/md/hold-to-confirm.md): A card for a change that spreads, confirmed by press and hold: region nodes light along a trace as the hold runs, letting go drains them and changes nothing, and a landed change offers Restore while five dots count down (pro)

## Inputs

- [Input](https://notchset.dev/md/input.md): shadcn's Input in Notchset: a 40px mono field whose focus is a 2px ink trace drawn along its bottom edge, never a ring, with a signal caret and selection. InputField is the full instrument: a label row with a counter and node, a prefix, a clear key and a helper that validates as you type
- [Textarea](https://notchset.dev/md/textarea.md): shadcn's Textarea in Notchset, Archivo in a ruled box with the ink focus trace. TextareaField is the full instrument: a label row, a box that grows from 96 to 220px and then scrolls, a 24-dot token meter with an estimate and cost per run, and a helper that changes on focus
- [Password Field](https://notchset.dev/md/password-field.md): A labelled 40px password field: a lock glyph, mono input tracked wide while masked, a CAPS chip while Caps Lock is on, a show/hide key whose slash draws away, a Forgot link, and a mechanical shake when an attempt is refused
- [Password Strength](https://notchset.dev/md/password-strength.md): A new-password field with a 16-node meter of plain checks (length, mix, no repeats, no sequences), or a real strength verdict when you plug in an estimator, a sentence of advice, and a Generate key that types a generated password in
- [Search Projects](https://notchset.dev/md/search-projects.md): A combobox that opens on focus under a leader with recent projects and filter chips; typing filters by name with env: and owner: prefixes, rows show a status node, meta and a 7-day spark, and nothing found offers Create
- [Inline Edit](https://notchset.dev/md/inline-edit.md): Text that edits in place: a dashed underline and a pen on hover, the same font when editing under an ink line that draws in, and an optimistic save that reverts with Retry if it fails
- [Number Field](https://notchset.dev/md/number-field.md): A − value + field whose digits roll on strips, with hold-to-repeat keys, a scrubbable ruler and a running total; plus NumberNodes, a small range as nodes on a rule
- [Phone Input](https://notchset.dev/md/phone-input.md): A phone number field: a country key, the national number grouped as you type, a validity node, and a searchable list of 22 countries; it reports E.164 once complete
- [Input OTP](https://notchset.dev/md/input-otp.md): shadcn's Input OTP in Notchset: 56px cells over one hidden input, a blinking caret, characters settling in, a node separator that fills, and a verify state that inks the cells or shakes them
- [Token Field](https://notchset.dev/md/token-field.md): Tags in a box that grows: Enter or a comma adds, a ghost completes the first suggestion, a pasted list adds each tag, ⌫ arms the last tag and ⌫ again removes it, with capacity nodes and a count (pro)
- [Select](https://notchset.dev/md/select.md): shadcn's Select in Notchset: a 40px trigger whose value rolls, a panel under a leader with 48px options on a rail, one dot that travels to your pick before the panel closes, and disabled options that say why
- [Combobox](https://notchset.dev/md/combobox.md): A searchable picker that completes inline as you type, with avatars and presence, the match underlined, a load meter per row, and a help line about the choice
- [Multi-select](https://notchset.dev/md/multi-select.md): A multi-pick: two chips and +N on the trigger, a panel that stays open with ALL and NONE and drawing checks, and a ruler under the field splitting the whole into each option's share
- [Calendar](https://notchset.dev/md/calendar.md): shadcn's Calendar in Notchset: 44px days from Monday with ISO week numbers, today boxed, event dots, one ink block that stretches to the picked day, and months that slide away and settle in; single or range
- [Date Picker](https://notchset.dev/md/date-picker.md): shadcn's date picker in Notchset: a 40px trigger whose date rolls digit by digit, and a popup under a leader with preset chips, a 40px-day grid and its keys; it closes just after you pick
- [Date Range Picker](https://notchset.dev/md/date-range-picker.md): A range picker for dashboards: the range and its length rolling in the trigger, grouped presets on a rail, a range grid whose fill ripples from the start, typed FROM and TO dates, and APPLY
- [Time Picker](https://notchset.dev/md/time-picker.md): A time picker that shows what each hour costs: a 24-hour strip of lollipops sized by load is the hour slider, and a minute segment's ink thumb stretches between stops (pro)
- [Color Picker](https://notchset.dev/md/color-picker.md): A colour picker that checks the colour: a saturation and brightness field, a hue bar, the hex, its contrast on your surfaces with WCAG badges, and presets; drags follow, clicks glide (pro)
- [Slider](https://notchset.dev/md/slider.md): shadcn's Slider in Notchset: a 1px rail, a 2px ink fill and 12×22 ink thumbs whose value tags rise on hover, focus or drag; clicks glide, drags follow and squash; optional ticks and marks
- [File Dropzone](https://notchset.dev/md/file-dropzone.md): A dropzone with crop-mark corners that pull in while a file is over it, paper sheets that lift and fan, drop, paste or choose, and upload rows that open in: uploading, indexing, ready, failed with resume, too large
- [Signature Pad](https://notchset.dev/md/signature-pad.md): A signature pad with pressure-like ink from pen speed, a ruled baseline, undo, replay at real timing with a ring on the pen tip, PNG and SVG export, and a stamp that pops in once signed (pro)
- [Rich Text Editor](https://notchset.dev/md/rich-text-editor.md): A Tiptap editor beside its own source: a toolbar whose active formats ink, a bubble menu over selections, a slash menu for blocks, a word limit that turns signal, and Markdown or HTML whose changed line flashes (pro)
- [Booking Morph](https://notchset.dev/md/booking-morph.md): An ink pill that morphs into a booking panel exactly as wide as its stage, with paged days and slots, arrows on both sides, swipe, and a scan before folding back into a pill that reads the booking (pro)
- [Wheel Picker](https://notchset.dev/md/wheel-picker.md): Day, hour and minute reels that snap behind one ink band, fading with distance, as keyboard spinbuttons that skip past times with a signal nudge, under a rolling readout (pro)

## Selection

- [Radio Group](https://notchset.dev/md/radio-group.md): shadcn's Radio Group in Notchset: a 16px node whose dot pops in, and RadioGroupRow, a 72px row with a description and a step ruler, under a 2px bar that slides to the checked row
- [Checkbox](https://notchset.dev/md/checkbox.md): shadcn's Checkbox in Notchset: a 16px square whose check draws in, a mixed dash and a press dip; and CheckboxTree, a tri-state parent with its own collapse key over child rules on a rail
- [Billing Toggle](https://notchset.dev/md/billing-toggle.md): MONTHLY · a switch whose square knob stretches across · YEARLY · a tag that swaps SAVE for SAVING; with PlanPrice, which rolls a plan's price and slides in the struck monthly price
- [Radio Cards](https://notchset.dev/md/radio-cards.md): A radio group of 140px cards: name and node, a mono meta line, a description and a price; picking one traces its border and then pops its dot, and disabled cards say why
- [Segmented Control](https://notchset.dev/md/segmented-control.md): Equal segments on a track with an ink thumb that stretches between them, its label colour flipping exactly where the thumb's edge passes; in 40px and 28px sizes

## Overlays

- [Dropdown Menu](https://notchset.dev/md/dropdown-menu.md): shadcn's Dropdown Menu in Notchset: it unfolds under a leader line, one field block glides to the highlighted row as a focus dot scales in, checks trace and radios bloom, submenus open sideways, and a hold-to-delete row fills with signal
- [Dialog](https://notchset.dev/md/dialog.md): shadcn's Dialog in Notchset: the panel unrolls from the top over a scrim and rolls back up, a 32px close key and a ruled header. Plus a kicker, a before/after comparison table, and a confirm key that runs your action, traces its check and closes the dialog
- [Alert Dialog](https://notchset.dev/md/alert-dialog.md): shadcn's Alert Dialog in Notchset: one decision about an action that can't be undone. It rises over a scrim with a signal kicker, a condensed title, what will be lost as large tabular numbers and optional type-to-confirm. The action locks the dialog while it works, closes on success and stays open with the reason on failure; the scrim only nudges it
- [Hover Card](https://notchset.dev/md/hover-card.md): shadcn's Hover Card in Notchset: inline chips with an avatar and a handle that lift as their card opens, and a 272px card hanging from a leader and node, revealed from its edge, with a person's or an agent's role, note, three stats rising in and a status row
- [Popover](https://notchset.dev/md/popover.md): shadcn's Popover in Notchset: a panel tied to a control, with a 1px ink border, an ink leader to the middle of its trigger, an unroll from the trigger's side and a trace back. It flips above when there is no room below and caps its height to the room left, so the body scrolls. Header, body and footer parts lay out filters and short forms
- [Sheet](https://notchset.dev/md/sheet.md): shadcn's Sheet in Notchset: a panel that slides in from an edge over a scrim, with a 1px ink rule on its inner side. Side sheets can be resizable; a bottom sheet has a drag handle with snap points and dismisses when dragged down; non-modal mode keeps the page usable so a list can swap what the sheet shows
- [Tooltip](https://notchset.dev/md/tooltip.md): shadcn's Tooltip in Notchset: an ink tag on a 9px leader with a round pointer, rising 4px into place, with an optional mono kicker, and a 40px info key whose i grows and dot blooms while it's open
- [Context Menu](https://notchset.dev/md/context-menu.md): shadcn's Context Menu in Notchset: a crosshair pops in where you right-click and the menu unrolls from the corner nearest it, a header names what it acts on, one highlight glides between 32px rows, and an inline branch unfolds a choice under its item

## Feedback

- [Alert](https://notchset.dev/md/alert.md): shadcn's Alert in Notchset: a 3px rail, a state node, a mono kicker over the title and a budget ruler with its threshold tick; warn is signal, resolved is ink, and changing tone crossfades while the ruler glides
- [Toast](https://notchset.dev/md/toast.md): A toast() call and a Toaster in Notchset: toasts stack without overlapping, newest at the bottom, three at a time, each with a node, a mono meta line, an Undo that sends its inverse, and a 2px countdown line that pauses while you hover
- [Skeleton](https://notchset.dev/md/skeleton.md): Loading states that never shift layout: every slot holds its content and a thinner block, one sweep line crosses while loading, then slots reveal one by one as their blocks fade; plain Skeleton blocks too
- [Progress](https://notchset.dev/md/progress.md): shadcn's Progress in Notchset: a ruler whose fill settles on each update, stage nodes that pop once passed, ticks that ink, stage labels with a scanner, a rolling percentage, and a stretching indeterminate bar
- [Empty State](https://notchset.dev/md/empty-state.md): An empty state that arrives: a crop-mark frame settles, a reticle draws itself, then a condensed title, a line of body and your actions; it fades up and away when content arrives

## Navigation

- [Pagination](https://notchset.dev/md/pagination.md): shadcn's Pagination parts in Notchset, and with a total, the instrument: a range header that flips, prev and next keys, a seven-slot window whose ink block slides under the current page, ellipses that jump three pages, and a ruler whose node glides to the position
- [Breadcrumb](https://notchset.dev/md/breadcrumb.md): shadcn's Breadcrumb in Notchset: mono 12px levels with slash separators, the current page in ink and not a link. BreadcrumbTrail takes the path and folds the middle levels into a … menu when it doesn't fit, keeping the first level and the last two; long names truncate and show in full in a tooltip
- [Accordion](https://notchset.dev/md/accordion.md): shadcn's Accordion in Notchset: an ink rule on top, indexed triggers (01, 02…) with a plus/minus node whose bar folds away, and panels where a rail traces down to a node that blooms while the answer settles in
- [Expandable Card](https://notchset.dev/md/expandable-card.md): A card whose whole header opens it: a kicker, a title, a progress track of nodes and a count that flips as steps complete, and a chevron key that sinks onto its plate. Inside, checkable steps stagger in; checking one blooms its node and extends the track
- [User Menu](https://notchset.dev/md/user-menu.md): The account key at the end of an app bar: workspace and avatar on a two-part trigger, and a panel that unrolls under a leader with who's signed in, a workspace switch, a month of token use, the CLI login line, links under one gliding highlight, a theme switch and sign out
- [Expanded Search](https://notchset.dev/md/search-expand.md): An app bar whose search key widens across the whole bar as the nav slides away, with a results sheet that unrolls below in scopes with live counts, grouped results and underlined matches
- [Navigation Menu](https://notchset.dev/md/navigation-menu.md): shadcn's Navigation Menu in Notchset: a 64px bar on an ink trace with a node and stem under every trigger, one panel hanging from the active node that morphs between panels as content slides, and a docs search with ⌘K
- [Tabs](https://notchset.dev/md/tabs.md): shadcn's Tabs in Notchset: mono labels, an ink underline that slides with the stretch rule, a bar that scrolls sideways on narrow screens and keeps the active tab in view, an error mark (signal dot and count) for a tab whose panel has invalid fields, automatic or manual activation, and panels that can stay mounted so edits survive
- [Stepper](https://notchset.dev/md/stepper.md): A stepper whose connector traces to the next node before it lights: rings, popping dots and drawn checks, horizontal or vertical, with each step's content sliding in the direction of travel
- [Tree View](https://notchset.dev/md/tree-view.md): A file tree with depth rails, status boxes (modified, added, changed counts), children that grow in staggered as folders open, an ink selection, and the full WAI-ARIA tree keyboard (pro)

## Data

- [Usage Meter](https://notchset.dev/md/usage-meter.md): Usage against a limit as a strip of dots, each a share of the plan, filled by whoever used it; changes ripple across, a projection marker turns signal past the limit, and every number rolls
- [Code Block](https://notchset.dev/md/code-block.md): A code block with monochrome syntax (weight and shade, no colours), clickable line numbers that mark a line or a shift-click range, files that switch with a lift and settle, and a copy that flashes every line
- [JSON Viewer](https://notchset.dev/md/json-viewer.md): A JSON viewer with depth rails, previews on closed branches, search across keys and values that opens every ancestor of a match and steps between them, and the selected path to copy (pro)
- [Filter Toolbar](https://notchset.dev/md/filter-toolbar.md): A controlled filter bar: search, FIELD · VALUE chips that open their values or fold away, a field-then-values menu with live counts and drawn checks, a rolling count, and clear all; it holds no data (pro)
- [Data Table](https://notchset.dev/md/data-table.md): A data table whose rows glide to their new slots when sorted and fade in place when filtered, with sortable headers, a tinted sorted column, tri-state selection and a footer that turns into your actions
- [Badge](https://notchset.dev/md/badge.md): shadcn's Badge in Notchset: square, mono caps, a node per tone (ready, review, running, attention, tag, count with rolling digits), and a live badge that measures each label and glides between states
- [Avatar](https://notchset.dev/md/avatar.md): shadcn's Avatar in Notchset: round, three sizes, mono initials in a tone kept per person, an agent reticle, photos that cross-fade in, and a presence node cut from the edge by a halo
- [Avatar Group](https://notchset.dev/md/avatar-group.md): Overlapping avatars cut from each other by background rings, a dashed +N chip whose count rolls, members that glide, pop in and shrink out, and a callout that names whoever you hover or tab to
- [Data Grid](https://notchset.dev/md/data-grid.md): A spreadsheet surface with sorting, range selection, in-place editing with undo and redo, copy as TSV, CSV export and a status bar that sums the selection (pro)
- [Target Tally](https://notchset.dev/md/target-tally.md): Daily targets as node tracks or concentric rings of dots, where only the nodes that change animate one at a time, with a week strip, per-day bars and log chips that move today only (pro)
- [World Ruler](https://notchset.dev/md/world-ruler.md): One 24-hour strip per office with working hours hatched, local times rolling, a shared-overlap band and a draggable scrubber that glides to the overlap (pro)
- [Budget Variance](https://notchset.dev/md/budget-variance.md): A budget-vs-actual table: a total, then departments with bullet bars (0–130% of budget, a hatched on-plan band, the budget as a mark, overspend in signal), actual, budget and variance; a department opens to its lines, a line more than 5% over can be flagged to its owner, MONTH / QUARTER / YEAR TO DATE rolls every number and glides the bars, and OVER BUDGET ONLY folds the rest (pro)
- [Market Terminal](https://notchset.dev/md/market-terminal.md): A trading terminal: a rolling price with the day's change and stats, 1D–1Y ranges and MA 20 / MA 50, a candlestick chart with volume, a last-price tag and a crosshair whose OHLC readout follows the pointer, a watchlist with sparklines, and a trade ticket (buy or sell, market or limit, a share stepper) that refuses orders past buying power or shares held, shows a scanner while placing and lists the newest orders (pro)
- [Cash Runway](https://notchset.dev/md/cash-runway.md): A runway planner: runway in rolling months, the cash-out date, net burn and DEFAULT ALIVE / DEAD with break-even; a 36-month cash line that glides between scenarios against the base plan with cash-out, break-even and event markers; plan presets, hires and growth levers that squash while dragged, an inference-model switch; and key events (raise, one-off cost, contract, recurring cost) that move the projection (pro)
- [Collections](https://notchset.dev/md/collections.md): An accounts-receivable worklist: rolling outstanding, overdue, days sales outstanding and collected today; an aging bar whose five buckets grow with their amounts and filter the list; invoices sorted by days overdue with REMIND (a scanner, then SENT ✓) and MARK PAID (✓ PAID, then the row folds and every total rolls); and a tri-state select-all with a bulk reminder bar (pro)
- [Load Rhythm](https://notchset.dev/md/load-rhythm.md): A week of load as a 7×24 dot grid (dot size is volume, hot hours in signal) that glides into stacked hour columns, with RUNS / DEPLOYS / ERRORS, a draggable 2H / 4H / 6H maintenance window that shades the hours it covers, its share of load, the quietest window and SCHEDULE MAINTENANCE (pro)
- [Run Globe](https://notchset.dev/md/run-globe.md): A dotted-land globe on a canvas: today's runs arc from each city to its inference region at the rate of the moment's load, drag spins it with inertia, a top city flies it there, and a 96-bar day timeline scrubs or replays the day; the aside rolls runs today and the last hour and folds region capacity and top cities (pro)
- [Account Galaxy](https://notchset.dev/md/account-galaxy.md): Thousands of accounts on a canvas, each dot sized by MRR and marked by health (expanding, healthy, watch, at risk); group by plan, region, health or industry and the dots spring into packed clusters whose labels filter; wheel zoom, drag pan, hover for the account; the aside rolls MRR, accounts, at-risk MRR and the expanding share, and folds BY HEALTH (MRR or count) to filter (pro)

## Charts

- [Bar Chart](https://notchset.dev/md/bar-chart.md): Square bars that grow from an ink baseline, outlined bars for weekends, a right-hand axis with ticks, two-row labels, a gliding dashed average, and a hover that dims the rest and lifts the value
- [Donut Chart](https://notchset.dev/md/donut-chart.md): A segmented ring on a ticked ruler in ink tones and patterns that each reach 3:1, shares that total exactly 100%, segments that sweep and morph, and a centre that reads out whatever you hover
- [Animated Counter](https://notchset.dev/md/animated-counter.md): A large total whose digits roll ones-first, the last increment rolling under it, and a strip of recent increments as lollipops with the newest hollow
- [Metric Card](https://notchset.dev/md/metric-card.md): A KPI card: a rolling value, a square delta badge (ink up, signal down), a sub-line, and a 16-point sparkline whose line and points glide to new data
- [Activity Heatmap](https://notchset.dev/md/activity-heatmap.md): A year of days where size carries the value, weeks from Monday, a signal ring for a milestone, a diagonal ripple when the data changes, and a crop-mark reticle that reads each day out (pro)
- [Brush Chart](https://notchset.dev/md/brush-chart.md): A long series with a window: a crisp ink line with labelled axes, a transparent overview you brush or click, presets that tween, and milestones you add by clicking a day and naming it (pro)
- [Gauge](https://notchset.dev/md/gauge.md): A gauge made of 49 radial ticks with no thick ring: ticks fill one after another, the needle swings around a hollow hub, zones sit on a thin outer arc, and the state reads healthy, degraded or at risk
- [Sparkline](https://notchset.dev/md/sparkline.md): A 40-point line on a scale fitted to the window, hollow MIN and MAX nodes with labels that never touch the line or leave the card, an end node with a halo, and a scrub that walks the line
- [Slope Chart](https://notchset.dev/md/slope-chart.md): Before and after for a handful of rows: the biggest gain inked, regressions in signal, labels that never collide, lines that draw in on load and morph between groups while values roll (pro)
- [Waffle Chart](https://notchset.dev/md/waffle-chart.md): One hundred squares, each a percent, filled column by column in ink tones and a hatch; new shares ripple across the grid, and hovering a legend row isolates its squares (pro)
- [Ridgeline](https://notchset.dev/md/ridgeline.md): Overlapping distributions, one per row, masked by the background so upper ridges sit in front, a median tick on each, a signal marker at a change, and ridges that rise row by row (pro)
- [Treemap](https://notchset.dev/md/treemap.md): A squarified treemap of groups and leaves, shaded in five steps from field to ink, with labels where they fit; clicking a group zooms it to the whole area while boxes glide, and Esc zooms out (pro)
- [Streamgraph](https://notchset.dev/md/streamgraph.md): Layers stacked around a centre line in ink fills and patterns, binned so ranges morph smoothly, labelled where they're thick, with hover that isolates a layer and milestones you add by clicking a day (pro)
- [Funnel Chart](https://notchset.dev/md/funnel-chart.md): Step counts over a symmetric band that tapers between steps and morphs when the data changes, with particles flowing through and falling out in signal at the step they fail (pro)
- [Sunburst](https://notchset.dev/md/sunburst.md): Two rings, groups inside and their children outside, with a ticked ruler and no ring labels; hovering widens a group and dims the rest, clicking zooms it to the whole ring (pro)
- [Radar Chart](https://notchset.dev/md/radar-chart.md): A primary shape over a comparison on a hexagonal scale, both growing from the centre, with axis chips and a dumbbell table under the chart so every value can be read (pro)
- [Sankey Chart](https://notchset.dev/md/sankey-chart.md): Columns of nodes joined by cubic bands in their source colour, bands into a signal node in signal, with particles riding each band and hover isolating a node or band (pro)
- [Live Line Chart](https://notchset.dev/md/live-line-chart.md): A rolling window of samples that scrolls one step per tick, with a dashed threshold, spike rings and chips that scroll with the line, and a head dot easing to the newest value (pro)
- [Bar Chart Race](https://notchset.dev/md/bar-chart-race.md): Bars that re-rank and grow frame by frame with a rescaling axis, values in a fixed-width rolling column, and a play button with a month scrubber (pro)

## Text & motion

- [Text Reveal](https://notchset.dev/md/text-reveal.md): A condensed headline revealed five ways: letters roll out of their cells, lines rise together, a rule traces and wipes each word open, words narrow from wide, or glyphs decode left to right
- [Text Morph](https://notchset.dev/md/text-morph.md): A word that changes letter by letter on measured positions: shared letters glide to their new places, new ones drop in, old ones fall away, and a ruler of ticks travels with them (pro)
- [Scroll Reveal Heading](https://notchset.dev/md/scroll-reveal-heading.md): A section title that plays once as it scrolls into view: each line's baseline traces, its words rise, the baseline cools to a rule, and the body fades up after (pro)
- [Text Shimmer](https://notchset.dev/md/text-shimmer.md): Working text without a gradient: one letter at a time brightens from muted to ink and back, the light travelling left to right while something runs
- [Kbd](https://notchset.dev/md/kbd.md): shadcn's Kbd and KbdGroup in Notchset: mono key caps with a 1px edge for buttons, menus and hints. Write keys once (mod+k) and they show for the platform (⌘ or Ctrl). Shortcut shows a combo and runs it, pressing its caps in as the keys go down; sequences like G then R wait 1.2s; shortcuts stay inside their scope and never fire while you type

## Media & effects

- [Audio Player](https://notchset.dev/md/audio-player.md): A compact player bar with a pulsing dot-matrix cover, sliding titles and an equaliser that unrolls into chapters, a chapter seek ruler, speed and the queue (pro)

## AI interfaces

- [Mention Composer](https://notchset.dev/md/mention-composer.md): A ledger thread with inline mentions that never shift the line, and a composer whose typed mentions wash in place, with an @ and # popover anchored at the caret (pro)
- [Voice Node](https://notchset.dev/md/voice-node.md): A 64-spoke voice ring that listens to your mic's level, sweeps while thinking and beats while speaking, with a transcript that arrives word by word, mute and a footer that says what the mic is doing (pro)
- [Voice Notes](https://notchset.dev/md/voice-notes.md): A two-sided thread of voice notes with dot waveforms you can seek, speed chips and transcripts, and a composer that records level (or audio) with a live waveform and sends with a settle (pro)
- [Agent Run](https://notchset.dev/md/agent-run.md): A coding agent at work on one task: a status bar with live time, tokens and cost, a step ruler, steps that build their output as they run, a steer box, and a review gate where nothing merges until you approve (pro)
- [Chat App](https://notchset.dev/md/chat-app.md): A team assistant workspace: a rail with a history drawer, an empty state that starts from your data, a thread that reads as a ledger with sources, tables and follow-ups, and an aside for the model, the context of the next message and today's spend (pro)
- [Assistant Panel](https://notchset.dev/md/assistant-panel.md): An assistant docked inside a product page, built for answers you can check: each answer names what it read and shows its query, every number in it shows its source on hover, and changing the scope reruns the answer in place (pro)

## Marketing

- [Site Footer](https://notchset.dev/md/site-footer.md): A marketing site's footer in three layouts: columns (brand, a release-notes signup, link columns and a status row with a 60-day uptime strip and a data-region switch), minimal (one row with a status pill), and wordmark (the columns over a giant wordmark whose letters rise in turn)
- [Newsletter](https://notchset.dev/md/newsletter.md): A newsletter signup, inline beside a deck of recent issues you can turn or as a compact card with its readers, with a frequency switch that rewrites the copy, validation in place, the scanner while sending, and a swap to CHECK YOUR INBOX with a drawn check
- [CTA Section](https://notchset.dev/md/cta.md): The call to action at the end of a page in three layouts: centered over a live Dot Field, split beside a quickstart terminal whose commands copy and reveal their output, and an announcement banner that collapses when dismissed; START FREE becomes a work-email field in place and TALK TO SALES unrolls call slots to book (pro)
- [Site Header](https://notchset.dev/md/site-header.md): A marketing site's header on the navbar's trace: each item has a target node and stem, and a pulse travels the trace to the new page's node; mega panels with products and a live preview of your own or link columns with a featured card; simple and centered layouts; the bar shrinks once the page scrolls and folds into a MENU sheet on phones (pro)
- [Plan Compare](https://notchset.dev/md/plan-compare.md): A plan comparison for deciding whether to upgrade from the plan you're on: plans as columns with rolling prices and their action (CURRENT PLAN, UPGRADE, SELECTED), a monthly or yearly switch, gain markers on every row a hovered plan changes with the count in the footer, and ONLY DIFFERENCES folding away rows that are the same everywhere
- [Seat Pricing](https://notchset.dev/md/seat-pricing.md): Pricing by team size: a seat count set with a stepper, a slider (arrows, Shift for 10, Home and End) or a clickable band ruler; plans as a ledger where the cheapest that fits is BEST FIT and selected and plans too small fade with USE n SEATS; a summary with the rolling total, the per-seat price and the yearly saving (pro)
- [Usage Estimator](https://notchset.dev/md/usage-estimator.md): A usage bill estimate that shows when the bigger plan becomes cheaper: runs on a log slider and seats on a linear one, each marking the plan's allowance; a breakdown that rolls; both plans' cost curves across the run range with a marker at your volume and the crossover; and advice to switch when the other plan costs less (pro)
- [FAQ](https://notchset.dev/md/faq.md): A help-centre FAQ: topics down the side with rolling counts, a search that opens every match and highlights the words, one answer at a time or all at once, a YES/NO check under each answer, and a Still stuck? form that validates, sends a ticket and shows its number
- [Changelog](https://notchset.dev/md/changelog.md): A product changelog grouped by month: NEW, IMPROVED and FIXED filters with rolling counts, months that fold, entries that open to their details, a screenshot and a command to copy, a copyable link to each entry, and a subscribe field in the header
- [Team](https://notchset.dev/md/team.md): A team page that shows who is awake: a 24-hour strip with everyone at their local time (the working band shaded, on-call in signal), a 4:5 greyscale portrait with the name, bio and contact under it, a numbered roster you hover to preview and click to keep, team tabs with rolling counts, and a copyable email (pro)
- [Comparison Table](https://notchset.dev/md/comparison-table.md): A competitor comparison: your product in an ink-headed column beside the tools buyers weigh it against, grouped features marked included, partly (with a note, counted as ½) or missing, a view per rival that folds the other columns away, a WHERE WE LEAD switch that hides rows a rival fully matches, and a rolling COVERS score
- [Feature Bento](https://notchset.dev/md/feature-bento.md): A features bento of four tiles, each shown working: two cursors reviewing a trace while a comment types itself, a command palette that types its own queries until you take over, a cost tile whose weekly bars roll the number on hover or focus, and an automation chain that lights step by step with REPLAY; one tick drives it and stops off screen
- [Spotlight Grid](https://notchset.dev/md/spotlight-grid.md): A 2×2 grid of live tool previews: pointing at a tile grows its column and row (560ms glide) while the others dim, OPEN pins it with the field ground and unrolls its controls so people can try it in place, and Esc or CLOSE lets it go; previews and controls are yours (pro)
- [Scroll Story](https://notchset.dev/md/scroll-story.md): A product loop told as steps you scroll through: a sticky rail whose fill follows the scroll and whose nodes jump to a step, the steps' text with inactive ones faded back, and a sticky panel whose layers cross-fade as the step changes; each panel gets whether it is active so it can play on entry (pro)
- [Status Page](https://notchset.dev/md/status-page.md): A public status page: the overall state with a pulsing signal dot while anything is down, regions, the active incident with its latest update first and earlier ones folded, each component's 90-day strip with incident days in signal and a hover note, uptime floored to two decimals, past incidents, and email subscription
- [Help Search](https://notchset.dev/md/help-search.md): A help-centre search: a big combobox (/ focuses it, Esc clears it), popular searches, a kind filter with a rolling count, a quick answer when the query matches a known intent, results grouped by kind in folds with matched words marked, and a preview with the excerpt, a code sample, open and copy-link; no results offers ask the team
- [Logo Marquee](https://notchset.dev/md/logo-marquee.md): Two rows of customer logos drifting in opposite directions with hard edges, pausing on hover, focus and a PAUSE button; hovering a logo inks it and fills a readout with the customer's industry, volume, start date and outcome with READ THE STORY; a click pins it, and SEE ALL CUSTOMERS unrolls the full grid (pro)
- [Stats Band](https://notchset.dev/md/stats-band.md): Four measured numbers that roll up from zero once the band is in view, each with a label, a sub-line and a small chart with hover captions (a monthly line, daily uptime bars with incidents in signal, a histogram with its median bin, a before → after ruler), REPLAY, DIVIDED / PLAIN, and HOW WE MEASURE THESE (pro)
- [Testimonials](https://notchset.dev/md/testimonials.md): A testimonial carousel backed by numbers: a greyscale 4:5 portrait with the company chip that wipes to the next in the direction of travel, the quote rising word by word with its key phrase underlined once it lands, the name and role, two proof rows with the struck-through before and rolling after, segmented progress bars that advance on their own and pause on hover, focus and PAUSE, and previous / next (pro)
- [Outcomes](https://notchset.dev/md/outcomes.md): Customer outcomes by tab: a quote with the person and their scale, three measures with before, a rolling after and the change (points, a multiple or a percent, computed from the numbers), each over a ruler where a hollow before dot and a filled after dot slide to new places as you switch customers, how they did it in three dated steps, and a link to the case study (pro)
- [Trust Center](https://notchset.dev/md/trust-center.md): A trust center: certification cards whose ring of dots fills when picked, each certification's scope and facts (auditor, period, renewal) beside a request-under-NDA form that refuses personal email domains with a shake and confirms what was sent, a DPA link where no report applies, a subprocessor table that unrolls, and the security contact and bug bounty (pro)

## Layout

- [Collapsible](https://notchset.dev/md/collapsible.md): shadcn's Collapsible in Notchset: a full-width trigger row with an optional status dot (ok, failed, locked) and a chevron that turns, a panel that unrolls and traces shut with its content fading in after, a locked row that stays focusable but won't open, and persistKey, which keeps the open state across reloads and remounts
- [Card](https://notchset.dev/md/card.md): shadcn's Card in Notchset: a 1px rule border, square, no shadow, with the same parts. Compact density tightens it; selected turns the border ink with a corner notch; loading keeps the content's size under skeleton bars so nothing shifts; CardLink makes the whole card one link while controls marked data-above stay clickable
- [Scroll Area](https://notchset.dev/md/scroll-area.md): shadcn's Scroll Area in Notchset: a thin edge-coloured scrollbar that turns to the primary while dragged, with keyboard scrolling. useFollow makes a log follow its end: pinned within 24px of the bottom, paused when you scroll up with a JUMP TO LATEST count, and steady when older lines load above
- [Resizable](https://notchset.dev/md/resizable.md): shadcn's Resizable panels in Notchset, with no extra dependency: panels sized in percent, split by 1px rules that turn ink on hover and fill while dragged. Each handle is a separator you can drag or work from the keyboard (← → 2%, Home collapses, End restores, double-click resets); collapsible panels snap shut below half their minimum; autoSaveId keeps the layout across reloads
- [Dot Field](https://notchset.dev/md/dot-field.md): A canvas route map for heroes: live routes walk the grid in orthogonal steps, the pointer snaps to nodes with crosshair rulers and a trace, and a click sends a diamond wave that dispatches routes (pro)

## Application UI

- [App Shell](https://notchset.dev/md/app-shell.md): A workspace shell that shows agent health without opening anything: a sidebar with a workspace switcher, environment, live agent status and a user menu, a rail at ⌘\, Jump to at ⌘K, toasts, and page parts for KPIs and ruled lists (pro)
- [Page Header](https://notchset.dev/md/page-header.md): An entity page's header: breadcrumb, follow, share, a ⋯ menu and the main action at ⌘↵, a condensed title with a status menu and meta, and tabs with counts; past 28px of scroll it folds the title away and keeps the actions (pro)
- [Command Palette](https://notchset.dev/md/command-palette.md): Jump or act from the keyboard and see what will happen before Enter: fuzzy matching that favours word starts, prefix scopes for actions, runs and people, a preview of the selected result, and nested steps such as choosing a model (pro)
- [Notifications](https://notchset.dev/md/notifications.md): A bell and a panel for what needs a decision: unread count in signal, NEEDS YOU / MENTIONS / ALL, items grouped by time with actions inline (approve, re-run, raise a cap, reply), results that fold the row away, and a pause switch (pro)
- [Empty States](https://notchset.dev/md/empty-states.md): Five empty states that say why a screen is empty and offer the one action that fixes it, each with a diagram drawn from lines and nodes: no results (remove filters one by one), offline (retry with a countdown), caught up, not found (closest matches) and first run (steps that enable in turn) (pro)
- [Sign In](https://notchset.dev/md/sign-in.md): Passwordless sign-in and sign-up that routes enterprise users to their identity provider: an SSO domain unrolls its organisation and the key becomes CONTINUE WITH the provider; otherwise a 6-digit code that pastes and submits itself, with tries left and a rolling resend; passkey and social sign-in with the last one used marked on the device; an ink brand panel beside it
- [Onboarding](https://notchset.dev/md/onboarding.md): A four-step setup for a workspace, a first agent and a team: a step rail that traces as you advance, a URL that follows the name with a live availability check and an alternative when taken, region cards, template rows, invites as tokens, a review with EDIT on every row, a draft that saves itself, and creation tasks that run in sequence only after you confirm (pro)
- [Device Login](https://notchset.dev/md/device-auth.md): OAuth device login for a CLI with the terminal and the browser side by side: the browser takes the code (formatted XXXX-XXXX, with a phishing guard), shows the device, a workspace and least-privilege scopes where a dangerous scope is off by default and warns when on, then authorizes or denies while the terminal answers in the same moment; the request expires on a rolling clock (pro)
- [Checkout](https://notchset.dev/md/checkout.md): An order summary that confirms an upgrade with every line that changes the total in view: monthly or yearly, a promo code that applies in place or shakes with the reason, lines that fold in and out (yearly discount, promo, proration credit), a tax choice, a rolling total with the renewal line, and PAY that ends in ✓ PAID with the receipt line (pro)
- [Add-on Cart](https://notchset.dev/md/addon-cart.md): Add capacity to a plan you already have, knowing what it costs today and from next month: add-on cards that become steppers up to each maximum (ones you have read ACTIVE), a cart chip with the count and monthly total, and a drawer with line items, REMOVE with a 4.5s UNDO, the next bill and the prorated amount due today, then ADD TO SUBSCRIPTION (pro)
- [Webhooks](https://notchset.dev/md/webhooks.md): A webhook console: endpoints with their events, a rolling delivery rate and a health tag; 24 hours of deliveries as 48 bars with failures in signal; recent deliveries with RETRY on failures; and an inspector with the response, the payload and the signed headers, numbered and copyable (pro)
- [API Keys](https://notchset.dev/md/api-keys.md): An API key manager: LIVE and TEST groups whose folded headers keep their counts and warnings; keys with masked secrets, scopes and last use (stale ones flagged), opening to 14 days of requests, restrictions, ROLL KEY and a confirmed REVOKE; and a create form with least-privilege scopes whose secret is shown once behind an I-saved-it check (pro)
- [Integrations](https://notchset.dev/md/integrations.md): An integrations directory: search over name, category and description, tabs whose counts follow the search, monogram tiles instead of brand logos, CONNECT that runs the scanner while your OAuth flow happens, and a configure panel with the destination, an event switch list, a live summary and a confirmed DISCONNECT (pro)
- [Credits Wallet](https://notchset.dev/md/credits-wallet.md): A prepaid credits wallet: a rolling balance you can blur for shared screens, the burn rate and its run-out date, a balance chart with a dashed projection past TODAY, add-credits, auto-recharge and spend-by-agent panels, a CSV export of the activity, and an activity list that folds and keeps its count (pro)
- [Invoice Studio](https://notchset.dev/md/invoice-studio.md): An invoice you write in place: status and dates, FROM and BILL TO, editable line items (numbers only for quantity and rate) whose amounts and totals roll as you type, metered lines imported from usage, VAT, SAVE DRAFT, then SEND, MARK AS PAID and REOPEN; sending locks the lines and an empty invoice can't be sent (pro)
- [Release Gate](https://notchset.dev/md/release-gate.md): A release checklist that gates shipping: a rolling count of checks left, checks on a rail whose ink traces to the last consecutive pass (tick manual ones, run automatic ones, pick an owner), a notify switch, and HOLD TO SHIP on an offset plate that stays disabled until every check passes; shipped checks lock (pro)
- [Sprint Board](https://notchset.dev/md/sprint-board.md): A sprint board: progress as a ruler of done tasks, four columns with rolling counts, a work-in-progress limit that refuses a card with a shake, cards that open to their description and move with arrows, entering from the side they came from, a strikethrough drawn across done titles, ALL / MY WORK and an inline add-task field (pro)
- [Find Time](https://notchset.dev/md/find-time.md): A meeting-time finder across time zones: a length, five days that each count the slots that work for everyone, lanes of working hours and busy blocks in one zone with an ALL FREE row, a selection frame that glides to its start and turns signal on a conflict while naming who and why, up to five best times, and a confirm that sends with a scanner then lists who was invited (pro)
- [Week Calendar](https://notchset.dev/md/week-calendar.md): A week calendar: TODAY, previous and next, WEEK / WEEKDAYS / DAY, a mini month that jumps to any week, calendars you can hide with counts, an all-day row, an hour grid where overlapping events cascade and text fits each event's height, a now line, click-to-draft events with a title, a calendar and SAVE, and an event panel whose delete needs a second press (pro)
- [Layout Morph](https://notchset.dev/md/layout-morph.md): A library that rearranges itself: GRID, LIST, BY TEAM and BY AGE, with every card travelling to its new slot (position and size over 640ms, staggered) and the stage height gliding with it; hover or click a card to pin its runs, quality and cost in a rolling strip below (pro)
- [Fleet Zoom](https://notchset.dev/md/fleet-zoom.md): A zoomable map of a fleet: teams hold agents, agents hold runs, on a dot grid that scales with zoom; semantic zoom shows team meta, agent names and quality, and runs only once each has room; wheel zooms at the cursor, drag pans, a click flies in, keys pan and zoom, Esc goes up a level, a guided tour flies to a failed run, and the aside names the level with its numbers (pro)
- [Inbox Triage](https://notchset.dev/md/inbox-triage.md): A keyboard-first support queue: INBOX / SNOOZED / DONE with rolling counts and a gliding underline, rows with an unread dot, a type tag, subject, preview and response deadline, a selection bar that glides to the current row, J/K to move, Enter to open inline, E done, S then 1–3 to snooze, U unread, Z undo, rows that slide out and fold, and an undo that brings them back (pro)
- [Support Console](https://notchset.dev/md/support-console.md): A ticket view: a status chip (open, waiting on customer, resolved) with resolve and reopen, a conversation log of event lines, customer messages, agent replies and internal notes that follows the newest message with a typing indicator, a composer with suggested replies and REPLY / NOTE (notes turn the composer signal), and an aside with collapsible account details, the issue with a one-click fix, and past conversations (pro)
- [Help Widget](https://notchset.dev/md/help-widget.md): An in-app help launcher: a 56px square that opens a panel from its corner, with HOME (greeting, live search, articles for this page, message support, system status), ARTICLE (lead, numbered steps, did this answer it, ask a person) and CHAT (a context chip, messages, typing), views that slide in the direction of travel, Esc and Back stepping out, an unread badge when a reply lands while closed, and a handle your app uses to open it to an article or a chat (pro)