# Obsyde UI

> Obsyde UI is a collection of React components, charts and effects: plain React, TypeScript and CSS with no runtime dependencies, installed as source with the shadcn CLI. Dark, monochrome at rest, one accent for what is live.

---

# Introduction

> What Obsyde UI is, what you get, and how a piece gets into your project.

Obsyde UI is a collection of 205 React components, charts and effects, curated from years of building interfaces and redrawn to one set of rules: one type, one light, one way of moving.

Every piece is plain React, TypeScript and CSS. There is no package to install and nothing to keep up to date: you add the source to your project and it is yours to change.

## What you get

- **121 components**: actions, forms, data, navigation, overlays, feedback, effects and page sections.
- **84 charts**: lines, bars, distributions, flows, networks and maps, with tooltips, legends and loading states.
- **23 free pieces**, and every other piece with [Pro](https://obsydeui.com/pricing), paid once.

Dark, monochrome at rest, and warm only where something moves. Each piece takes an `accent` (`ember`, `volt` or `arc`), works from the keyboard, and honours reduced motion.

## Three ways in

1. **The shadcn CLI.** One command copies a piece and the shared files it needs into your project. See [Installation](https://obsydeui.com/docs/installation).
2. **Download.** Every item page has a zip with the same files and paths.
3. **Copy prompt.** Every item page can brief your AI coding agent: what the piece is, how to install it, its props and the house rules. See [AI agents](https://obsydeui.com/docs/ai).

## Where things are

- [Components](https://obsydeui.com/components) and [Charts](https://obsydeui.com/charts): every piece, live, with its code, props and examples.
- [Changelog](https://obsydeui.com/changelog): what shipped and when.
- [Licence](https://obsydeui.com/license): one licence for every piece, free or Pro.
- [llms.txt](https://obsydeui.com/llms.txt): the whole site as Markdown, for agents.

---

# Installation

> Add a piece with the shadcn CLI, or by hand. Requirements, where files land, and what comes with them.

## Requirements

- React 19 and TypeScript.
- A bundler that imports CSS from components: Next.js, Vite, React Router and most others do.
- Nothing else. No Tailwind, no runtime packages: the pieces ship their own CSS, fonts and motion.

Every piece is a client component. The CLI and the download add `'use client'` to the files that need it, so in the Next.js App Router you can render a piece from a server component as is.

## With the shadcn CLI

Free pieces install straight from their URL:

```bash
npx shadcn@latest add https://obsydeui.com/r/button.json
```

The same command is on every item page, with pnpm and bun versions. If your project has no `components.json` yet, the CLI offers to create one first. Pro pieces install by name, `@obsyde/<name>`, once your licence key is set up: see [Pro and the CLI](https://obsydeui.com/docs/pro).

## Where files land

A piece installs under your components directory, in its own folder:

```text
components/obsyde/
  LICENSE.txt
  ember/
    shared/        tokens, fonts, springs and the accent ramp
    button/        the piece itself
```

Shared folders (`ember/shared`, and `ember/viz-kit` for charts) install once and every piece after that reuses them. Keep the layout: the files import each other by relative path. Then import the piece from its folder:

```tsx
import { Button } from '@/components/obsyde/ember/button/Button';

export function Save() {
  return <Button label="Save changes" />;
}
```

## By hand

Each item page has **Download**, a zip of the piece and its shared files:

```text
LICENSE.txt
items/
  ember/
    shared/
    button/
```

Create `components/obsyde/` in your project, move everything inside `items/` into it, and put `LICENSE.txt` beside them. The result is the same layout the CLI writes, so the import above works as is. Pro pieces download once you have [Pro](https://obsydeui.com/pricing).

You can also copy each file from the code view. Copied files don't get the directive: if your app uses React Server Components, add `'use client';` at the top of each `.tsx` file that uses hooks or event handlers.

## Fonts

The pieces use Geist and Geist Mono. The styles bring both fonts with them, with their licence, so there is nothing to set up.

---

# Pro and the CLI

> Install Pro pieces with your licence key, in your project, in CI and with your team.

Pro unlocks every piece: the source on the site, the downloads and the CLI. It is paid once ($149), with updates included. Team covers up to 10 developers in one company ($399).

## 1. Your licence key

Use the licence key from your receipt email, or the CLI key on your [account page](https://obsydeui.com/account). Either works. Keep it out of your repository.

## 2. Add the registry, once

Add the `@obsyde` registry to your `components.json`:

```json
{
  "registries": {
    "@obsyde": {
      "url": "https://obsydeui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${OBSYDE_LICENSE_KEY}"
      }
    }
  }
}
```

## 3. Set the key

Put the key in `.env.local` (the CLI reads `.env` and `.env.local`):

```bash
OBSYDE_LICENSE_KEY=your-licence-key
```

## 4. Install

```bash
npx shadcn@latest add @obsyde/fuse-button
```

Free pieces install by name the same way. Search the whole collection from the terminal:

```bash
npx shadcn@latest search @obsyde -q chart
```

## In CI and with a team

Set `OBSYDE_LICENSE_KEY` as a secret in your CI or hosting provider; the same commands work there. With Team, every developer on the licence uses the team key.

## No key yet

Searching and installing free pieces through `@obsyde` work without Pro, but the CLI wants the variable to exist. Set it to anything, such as `OBSYDE_LICENSE_KEY=free`, or install free pieces by URL instead.

## If the CLI answers 401

The piece is Pro and the request had no valid key. Check that `OBSYDE_LICENSE_KEY` is set in the shell or `.env.local` you run the CLI from, that the key is the one from your receipt, and that the `@obsyde` entry is in the `components.json` of the project you are in. Questions: support@obsydeui.com.

---

# Theming

> Accents, the design tokens behind every piece, and how to change them.

Every piece is dark and monochrome at rest. Colour is one accent, used only for live, hot, focused or selected moments.

## Accents

Each piece takes an `accent` prop: `ember` (orange, the default), `volt` (yellow-green) or `arc` (blue).

```tsx
<Button label="Deploy" accent="arc" />
```

The accent is a temperature ramp, not one colour: char, deep, the accent itself, hot and a near-white core. Glows, sparks and heat use the whole ramp, so one prop changes all of it, including effects drawn on a canvas.

To use one accent everywhere, pass it from one place, such as a small wrapper or a constant.

## Tokens

The styles are CSS custom properties on the `.ember` root of each piece. The ones you are most likely to change:

| Token | Default | What it is |
| --- | --- | --- |
| `--em-bg` | `#000000` | The page under a piece |
| `--em-surface`, `--em-raised` | `#0a0a0a`, `#111111` | Surfaces, each step barely lighter |
| `--em-text` | `#ededed` | Text; `-muted`, `-faint` and `-ghost` step down from it |
| `--em-fill` | white at 6% | A field or cell at rest; `-hover`, `-focus` and `-active` step up |
| `--em-accent` | `#ff6a1a` | The accent; `-hot`, `-white`, `-deep` and `-char` are its ramp |
| `--em-radius-sm`, `--em-radius`, `--em-radius-lg` | `6px`, `10px`, `14px` | Corners |
| `--em-sans`, `--em-mono` | Geist, Geist Mono | Type |
| `--em-fast`, `--em-base` | `120ms`, `220ms` | CSS transitions; springs drive the rest |

## Changing them

Override the tokens in your own CSS. `:root .ember` outranks the defaults wherever your stylesheet loads:

```css
:root .ember {
  --em-radius: 8px;
  --em-surface: #0c0c0e;
}
```

To change an accent's colours, override it the same way, with all five steps of its ramp so it still reads like heat:

```css
:root .ember[data-accent='ember'] {
  --em-accent: #ff5a36;
  --em-accent-hot: #ff9f6e;
}
```

Effects drawn on a canvas or with WebGL read the ramp from `shared/accent.ts`, so change the values there too if you change an accent. To scope a change, put it under your own class instead of `:root`.

## Motion and focus

Motion runs on springs and stops for people who ask for reduced motion: the pieces honour `prefers-reduced-motion` and follow it live. Focus rings are a thin 1px line that shows for keyboard navigation only, never after a click.

---

# AI agents

> Everything an AI coding agent needs to find, install and use Obsyde UI pieces.

Every page on this site has a Markdown twin, the whole collection is indexed for language models, and the shadcn MCP server can search and install pieces from your editor.

## llms.txt

- [https://obsydeui.com/llms.txt](https://obsydeui.com/llms.txt): an index of the docs and every piece, one line each, with links to their Markdown.
- [https://obsydeui.com/llms-full.txt](https://obsydeui.com/llms-full.txt): the docs and every piece in one file: install command, usage, props and examples.

## Markdown pages

Add `.md` to any docs or item page for its Markdown, for example [https://obsydeui.com/components/button.md](https://obsydeui.com/components/button.md). Requests that ask for `text/markdown` in their `Accept` header get it at the normal URL.

Each page also has **Copy page** and **Open in ChatGPT** or **Claude**, which hand the page to a chat with its Markdown link.

## Copy prompt

Every item page has **Copy prompt**: a brief for your agent with what the piece is, the install command, where the files land, its props and examples, and the house rules for changing it. Paste it into Claude Code, Cursor, Codex or any other agent.

## The shadcn MCP server

With the [`@obsyde` registry](https://obsydeui.com/docs/pro) in your `components.json`, the shadcn MCP server lets your agent search, read and install pieces. Set it up for your client:

```bash
npx shadcn@latest mcp init --client claude
```

Other clients: `cursor`, `vscode`, `codex` and `opencode`. Then ask in plain words, such as "add the Obsyde UI line chart to the dashboard". Without Pro, set `OBSYDE_LICENSE_KEY=free` so the registry loads; free pieces install and Pro pieces answer 401.

## AGENTS.md

To make your agent reach for Obsyde UI on its own, add this to your `AGENTS.md` or `CLAUDE.md`:

```markdown
## UI components
Use Obsyde UI for UI components, charts and effects (https://obsydeui.com/llms.txt).
Install with `npx shadcn@latest add @obsyde/<name>`. Files land in
components/obsyde/; keep that layout and change pieces through their
props and their own CSS. Read https://obsydeui.com/components/<name>.md (or
/charts/<name>.md) for a piece's props and usage.
```

---

# Fuse Button

> Hold to confirm. Two sparks burn round the border from where you pressed and meet on the far side exactly when the hold completes; let go early and the burn recedes.

Components · Actions · Pro · https://obsydeui.com/components/fuse-button

Space or Enter hold it from the keyboard, Escape cancels.

## Install

```bash
npx shadcn@latest add @obsyde/fuse-button
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/fuse-button/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { FuseButton } from '@/components/obsyde/ember/fuse-button/FuseButton';

export function Example() {
  return (
    <FuseButton label="Hold to delete" confirmedLabel="Deleted" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Hold to delete' | Label |
| `confirmedLabel` | string | 'Deleted' | Confirmed label |
| `holdMs` | number (300–5000) | 1200 | Hold (ms) |
| `size` | 'sm' \| 'md' \| 'lg' | 'md' | Size |
| `resetMs` | number (400–6000) | 1800 | Reset after (ms) |
| `disabled` | boolean | false | Disabled |

## Examples

- **Slow fuse**: A 2.4 second hold. `holdMs={2400}`
- **Small**. `size="sm"`
- **Disabled**. `disabled={true}`

---

# Trace Input

> A text field whose border is traced round it from the point you clicked (left-centre from the keyboard), joining on the far side.

Components · Forms · Pro · https://obsydeui.com/components/trace-input

On error the line breaks above the hint. The demo validates an email address on blur.

## Install

```bash
npx shadcn@latest add @obsyde/trace-input
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/trace-input/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { TraceInput } from '@/components/obsyde/ember/trace-input/TraceInput';

export function Example() {
  return (
    <TraceInput label="Email" placeholder="you@example.com" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Email' | Label |
| `placeholder` | string | 'you@example.com' | Placeholder |
| `defaultValue` | string | — | Prefilled value |
| `prefix` | string | — | Prefix |
| `disabled` | boolean | false | Disabled |

## Examples

- **Valid**. `defaultValue="ada@example.com"`
- **Error**. `defaultValue="ada@"`
- **With prefix**. `label="Website" prefix="https://" placeholder="example.com"`
- **Disabled**. `disabled={true}`

---

# Inplace Select

> A dropdown that opens over itself: the selected option stays under the cursor and the list unfolds around it, then collapses into the trigger with the chosen row travelling into place.

Components · Forms · Pro · https://obsydeui.com/components/inplace-select

Press, drag and release selects in one gesture.

## Install

```bash
npx shadcn@latest add @obsyde/inplace-select
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/inplace-select/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { InplaceSelect } from '@/components/obsyde/ember/inplace-select/InplaceSelect';

export function Example() {
  return (
    <InplaceSelect
      label="Weight"
      options="Thin, Light, Regular, Medium, Semibold, Bold, Black"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Weight' | Label |
| `options` | string | 'Thin, Light, Regular, Medium, Semibold, Bold, Black' | Options (comma-separated) |
| `value` | string | 'Regular' | Selected |
| `disabled` | boolean | false | Disabled |

## Examples

- **Last selected**: The list opens upward. `value="Black"`
- **Long list**: Twelve rows: the list scrolls, with fades at the scrolling edges. `options="100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200" value="600"`
- **Disabled**. `disabled={true}`

---

# Detent Slider

> A slider on a ruler. Ticks swell under the needle, the value rolls like an odometer, and the thumb clicks into detents.

Components · Forms · Pro · https://obsydeui.com/components/detent-slider

Arrows step, Shift+arrow jumps detent to detent.

## Install

```bash
npx shadcn@latest add @obsyde/detent-slider
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/detent-slider/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DetentSlider } from '@/components/obsyde/ember/detent-slider/DetentSlider';

export function Example() {
  return (
    <DetentSlider defaultValue={40} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number | 40 | Value |
| `min` | number | 0 | Min |
| `max` | number | 100 | Max |
| `step` | number | 1 | Step |
| `detentEvery` | number | 25 | Detent every |
| `unit` | string | '%' | Unit |
| `disabled` | boolean | false | Disabled |

## Examples

- **Percent**. `value={40}`
- **Fine**. `min={0} max={10} step={0.1} detentEvery={1} unit="s" value={2.5}`
- **Coarse**. `min={0} max={12} step={1} detentEvery={3} unit="" value={6}`
- **Disabled**. `value={40} disabled={true}`

---

# Heat Haze

> Wraps any element and heats the air above it.

Components · Effects · Pro · https://obsydeui.com/components/heat-haze

The content is never touched: it stays crisp, selectable and clickable. While active a soft light rises off the top edge and breaks into thin wavering columns, like a road shimmering in summer; the top hairline glows hottest under the warmest point, which drifts on its own and leans toward the pointer. A few embers lift off the edge and cool as they rise. The air is drawn in an overhang (`rise`) that never shifts layout, and at rest the loop stops and nothing is drawn.

## Install

```bash
npx shadcn@latest add @obsyde/heat-haze
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/heat-haze/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { HeatHaze } from '@/components/obsyde/ember/heat-haze/HeatHaze';

export function Example() {
  return (
    <HeatHaze trigger="hover" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `trigger` | 'hover' \| 'always' \| 'manual' | 'hover' | Trigger |
| `active` | boolean | false | Active |
| `intensity` | number (0–1) | 0.6 | Intensity |
| `sparks` | boolean | true | Sparks |
| `rise` | number (32–120) | 72 | Rise |

## Examples

- **Hover**. `trigger="hover"`
- **Always on**. `trigger="always"`
- **Low intensity without sparks**. `trigger="hover" intensity={0.25} sparks={false}`
- **Volt**. `accent="volt" trigger="always"`

---

# Molten Edge

> A border that behaves like a metal wire.

Components · Effects · Pro · https://obsydeui.com/components/molten-edge

It heats where the pointer comes near, cools slowly behind it, and the heat smears along the wire. A press sends a hot wave both ways round the perimeter. Keyboard focus warms the whole edge. Works for any radius, from a card to a pill.

## Install

```bash
npx shadcn@latest add @obsyde/molten-edge
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/molten-edge/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { MoltenEdge } from '@/components/obsyde/ember/molten-edge/MoltenEdge';

export function Example() {
  return (
    <MoltenEdge />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `reach` | number (40–400) | 120 | Reach |
| `cooling` | number (0.2–5) | 0.9 | Cooling half-life (s) |
| `radius` | number (0–40) | 14 | Card radius |

## Examples

- **Wide reach**. `reach={220}`
- **Slow cooling**. `cooling={2.5}`

---

# Dither Reveal

> Content appears and disappears through an ordered-dither threshold: hard square cells, one bit, no opacity fade.

Components · Effects · Pro · https://obsydeui.com/components/dither-reveal

A dithered front travels out from the origin in 24 stepped frames, glittering ember just ahead of itself. Fully shown means no mask at all. Toggling mid-transition runs it backward from the current frame.

## Install

```bash
npx shadcn@latest add @obsyde/dither-reveal
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dither-reveal/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DitherReveal } from '@/components/obsyde/ember/dither-reveal/DitherReveal';

export function Example() {
  return (
    <DitherReveal pattern="bayer" origin="left" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `pattern` | 'bayer' \| 'noise' \| 'scan' | 'bayer' | Pattern |
| `origin` | 'left' \| 'center' \| 'pointer' | 'left' | Origin |
| `cell` | number (2–12) | 3 | Cell (px) |
| `duration` | number (200–2000) | 640 | Duration (ms) |

## Examples

- **Bayer from left**. `pattern="bayer" origin="left"`
- **Noise from centre**. `pattern="noise" origin="center"`
- **Scanlines**. `pattern="scan" origin="left"`
- **Large cells (6px)**. `pattern="bayer" origin="left" cell={6}`

---

# Filings

> A background field of short strokes that behave like iron filings.

Components · Effects · Pro · https://obsydeui.com/components/filings

At rest they are still brushed grain. The pointer is a magnet whose axis follows its direction of travel: filings swing into its field on individual springs, overshoot and settle. A click flips polarity and sends a ring of turning filings outward.

## Install

```bash
npx shadcn@latest add @obsyde/filings
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/filings/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Filings } from '@/components/obsyde/ember/filings/Filings';

export function Example() {
  return (
    <Filings />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `spacing` | number (6–30) | 14 | Spacing |
| `length` | number (3–16) | 7 | Length |
| `reach` | number (80–480) | 220 | Reach |

## Examples

- **Dense**. `spacing={10} length={5}`
- **Long reach**. `reach={360}`

---

# Button

> The base button, pressed like a key into a warm surface.

Components · Actions · Free · https://obsydeui.com/components/button

The default secondary is glass: at rest a faint diagonal sheen warming toward bone, a fine generated grain and a barely-there glass edge; on hover, or keyboard focus, it floods to bone with a soft halo while the label and icon invert to near-black in step with the fill. Primary is solid bone, ghost is bare text. On press it sinks on a spring, its top light gives way to a faint inner shadow, and a soft bloom of heat gathers inside it under the finger (on flooded glass the bone also darkens a touch and the halo pulls in); on release it springs back with a hair of overshoot while the bloom spreads and cools. Keyboard presses land in the centre. Takes an optional leading icon in currentColor and can stretch full width. Loading crossfades the label to a small comet spinner in the same box, so the width never moves, and announces itself. The demo shows primary, secondary and ghost, and a pair of social sign-in buttons; Loading on click simulates work.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/button.json
```

Files land in `components/obsyde/ember/button/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Button } from '@/components/obsyde/ember/button/Button';

export function Example() {
  return (
    <Button label="Continue" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'variants' \| 'sizes' \| 'single' \| 'social' | 'variants' | Layout |
| `label` | string | 'Continue' | Label |
| `variant` | 'secondary' \| 'primary' \| 'ghost' \| 'danger' | 'secondary' | Variant |
| `size` | 'sm' \| 'md' \| 'lg' | 'md' | Size |
| `shortcut` | string | — | Shortcut |
| `loading` | boolean | false | Loading |
| `work` | boolean | false | Loading on click |
| `disabled` | boolean | false | Disabled |

## Examples

- **Default**. `layout="variants"`
- **Social sign-in**: Two glass buttons with icons: hover or Tab to them to see the bone flood. `layout="social"`
- **Sizes**. `layout="sizes" variant="primary"`
- **Loading on click**: Each click simulates 1.4 seconds of work. `layout="variants" work={true}`
- **Danger**. `layout="single" variant="danger" label="Delete"`
- **Volt**. `layout="variants" accent="volt"`

---

# Icon Button

> A square button for one icon, ghost at rest.

Components · Actions · Free · https://obsydeui.com/components/icon-button

As a toggle, turning on lifts the icon to full brightness and springs a 3px accent dot up beneath it; the pin also stands upright. Turning off drops the dot away.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/icon-button.json
```

Files land in `components/obsyde/ember/icon-button/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { IconButton } from '@/components/obsyde/ember/icon-button/IconButton';

export function Example() {
  return (
    <IconButton />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `size` | 'sm' \| 'md' \| 'lg' | 'md' | Size |
| `pressed` | boolean | false | Pinned |
| `disabled` | boolean | false | Disabled |

## Examples

- **Toggle on**. `pressed={true}`
- **Large**. `size="lg"`
- **Disabled**. `disabled={true}`

---

# Copy Button

> Copies a value and proves it: the copy icon gives way to a check that draws itself in the accent, and a soft light passes once over the value.

Components · Actions · Free · https://obsydeui.com/components/copy-button

Icon only by default, with the label as its accessible name and tooltip; turn the label on and it rolls to Copied without the button changing width. The result is announced politely.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/copy-button.json
```

Files land in `components/obsyde/ember/copy-button/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { CopyButton } from '@/components/obsyde/ember/copy-button/CopyButton';

export function Example() {
  return (
    <CopyButton value="npm install ember" label="Copy" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | string | 'npm install ember' | Value |
| `label` | string | 'Copy' | Label |
| `copiedLabel` | string | 'Copied' | Copied label |
| `showValue` | boolean | true | Show value |
| `showLabel` | boolean | false | Show label |
| `resetMs` | number (400–6000) | 1600 | Reset after (ms) |

## Examples

- **Button only**. `showValue={false}`
- **Long value**: A 90-character hex string, cut off with a fade. `value="ca978112ca1bbdcafac231b39a23dc4da786eff8147c4e72b9807785afee48bb3e23e8160039594a33894f6564"`

---

# Switch

> A switch that feels like a small physical toggle.

Components · Forms · Free · https://obsydeui.com/components/switch

The thumb is a raised bead in a filled well: it widens when pressed, stretches toward where it is going and settles round with a slight squash. Turning on, the accent floods the track from behind the thumb and drains back when turned off. It can be dragged or clicked, and Space toggles it. Three sizes and an optional description line.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/switch.json
```

Files land in `components/obsyde/ember/switch/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Switch } from '@/components/obsyde/ember/switch/Switch';

export function Example() {
  return (
    <Switch label="Heat" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `checked` | boolean | false | On |
| `label` | string | 'Heat' | Label |
| `description` | string | — | Description |
| `size` | 'sm' \| 'md' \| 'lg' | 'md' | Size |
| `disabled` | boolean | false | Disabled |

## Examples

- **Checked**. `checked={true}`
- **Sizes**. `layout="sizes" checked={true}`
- **With description**. `label="Show grid" description="Snaps layers to an 8px grid"`
- **Disabled**. `checked={true} disabled={true}`
- **Volt**. `accent="volt" checked={true}`

---

# Checkbox

> An 18px filled box that turns bone and draws its check; unchecking stays quiet.

Components · Forms · Free · https://obsydeui.com/components/checkbox

A parent box shows a dash when its children are mixed and toggles them all.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/checkbox.json
```

Files land in `components/obsyde/ember/checkbox/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Checkbox } from '@/components/obsyde/ember/checkbox/Checkbox';

export function Example() {
  return (
    <Checkbox defaultChecked="Second" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `checked` | string | 'Second' | Checked |
| `disabled` | boolean | false | Disabled |

## Examples

- **Group**: Second checked, so All is mixed. `checked="Second"`
- **All checked**. `checked="First, Second, Third"`
- **Disabled**. `checked="Second" disabled={true}`

---

# Radio Group

> One dot for the whole group. On a change it leaves the old well and travels to the new one, stretching along its path, then settles.

Components · Forms · Pro · https://obsydeui.com/components/radio-group

Arrow keys move and select.

## Install

```bash
npx shadcn@latest add @obsyde/radio-group
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/radio-group/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RadioGroup } from '@/components/obsyde/ember/radio-group/RadioGroup';

export function Example() {
  return (
    <RadioGroup options="North, East, South, West" value="East" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `options` | string | 'North, East, South, West' | Options |
| `value` | string | 'East' | Value |
| `orientation` | 'vertical' \| 'horizontal' | 'vertical' | Orientation |
| `disabled` | boolean | false | Disabled |

## Examples

- **Horizontal**. `orientation="horizontal"`
- **Disabled**. `disabled={true}`

---

# Segmented Control

> A recessed, borderless well with one raised thumb that glides between segments on a softly settling spring; labels brighten as the thumb passes under them.

Components · Forms · Pro · https://obsydeui.com/components/segmented

Equal or content widths, icons, disabled segments, arrow-key and drag selection, and a fading scroll when there are too many options to fit.

## Install

```bash
npx shadcn@latest add @obsyde/segmented
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/segmented/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Segmented } from '@/components/obsyde/ember/segmented/Segmented';

export function Example() {
  return (
    <Segmented options="Day, Week, Month, Year" value="Week" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `options` | string | 'Day, Week, Month, Year' | Options |
| `value` | string | 'Week' | Value |
| `size` | 'sm' \| 'md' | 'md' | Size |
| `widths` | 'equal' \| 'content' | 'equal' | Widths |
| `fullWidth` | boolean | false | Full width |
| `icons` | boolean | false | Icons |

## Examples

- **Icons**. `options="List, Board, Timeline" value="Board" icons={true} widths="content"`
- **Small**. `size="sm"`
- **Many options**. `options="1H, 1D, 1W, 1M, 3M, 6M, YTD, 1Y, 5Y, All" value="1M" widths="content" disabledOptions="5Y"`
- **Volt**. `accent="volt"`

---

# Kbd

> Key caps that go down when you press the real keys: the cap drops a pixel, its bottom edge collapses and the legend takes the accent, then it springs back and cools on release.

Components · Data · Free · https://obsydeui.com/components/kbd

Hold a whole combination and every cap in it stays down.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/kbd.json
```

Files land in `components/obsyde/ember/kbd/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Kbd } from '@/components/obsyde/ember/kbd/Kbd';

export function Example() {
  return (
    <Kbd keys="⌘ K, Shift Enter, Esc" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `keys` | string | '⌘ K, Shift Enter, Esc' | Keys |
| `listen` | boolean | true | Listen |
| `size` | 'sm' \| 'md' | 'md' | Size |

## Examples

- **Single key**. `keys="A"`
- **Small**. `size="sm"`
- **Not listening**. `listen={false}`

---

# Textarea

> A textarea that grows with its content on a spring and shows its budget as a short meter beside a rolling counter in the help row: bone while there is room, accent in the last tenth, error past the limit; going over is marked invalid but never blocked.

Components · Forms · Free · https://obsydeui.com/components/textarea

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/textarea.json
```

Files land in `components/obsyde/ember/textarea/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/forms-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Textarea } from '@/components/obsyde/ember/textarea/Textarea';

export function Example() {
  return (
    <Textarea label="Message" placeholder="Write something" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Message' | Label |
| `placeholder` | string | 'Write something' | Placeholder |
| `maxLength` | number (0–1000) | 0 | Budget (0 = none) |
| `minRows` | number (1–8) | 3 | Min rows |
| `maxRows` | number (1–16) | 8 | Max rows |
| `disabled` | boolean | false | Disabled |

## Examples

- **With budget**. `maxLength={140} value="The quick brown fox jumps over the lazy dog, then does it again to make sure the line wraps."`
- **Over budget**. `maxLength={40} value="The quick brown fox jumps over the lazy dog, then does it again to make sure the line wraps."`
- **Disabled**. `disabled={true}`

---

# Number Input

> A number you can type, step or drag. Drag the label to scrub (Shift for ten steps, Alt for a tenth); hold a stepper to repeat, faster the longer you hold.

Components · Forms · Pro · https://obsydeui.com/components/number-input

At a limit the value nudges toward the edge and springs back. Digits roll when the value changes and the field is not being edited.

## Install

```bash
npx shadcn@latest add @obsyde/number-input
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/number-input/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/forms-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { NumberInput } from '@/components/obsyde/ember/number-input/NumberInput';

export function Example() {
  return (
    <NumberInput defaultValue={12} min={0} max={99} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Amount' | Label |
| `value` | number | 12 | Value |
| `min` | number | 0 | Min |
| `max` | number | 99 | Max |
| `step` | number | 1 | Step |
| `unit` | string | — | Unit |
| `disabled` | boolean | false | Disabled |

## Examples

- **Default**. `value={12} min={0} max={99}`
- **With unit**. `value={1.5} step={0.1} unit="rem" label="Size"`
- **Large step**. `value={400} step={50} min={0} max={1000} unit="ms" label="Duration"`
- **Disabled**. `disabled={true}`

---

# Pin Input

> A one-time code field: one real input drives every cell, so paste, autofill and mobile keyboards just work.

Components · Forms · Pro · https://obsydeui.com/components/pin-input

The cells are filled wells with a blinking caret in the active one; digits drop into place, a warm pulse runs across the cells on completion, then the code is checked: a check draws when it is right, the row shakes and clears when it is wrong.

## Install

```bash
npx shadcn@latest add @obsyde/pin-input
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/pin-input/`, with shared files in `components/obsyde/ember/forms-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { PinInput } from '@/components/obsyde/ember/pin-input/PinInput';

export function Example() {
  return (
    <PinInput label="Verification code" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Verification code' | Label |
| `length` | number (3–8) | 6 | Length |
| `mask` | boolean | false | Mask |
| `disabled` | boolean | false | Disabled |

## Examples

- **Masked**. `mask={true}`
- **Four digits**: The code is 2468. `length={4}`
- **Disabled**. `disabled={true}`

---

# Search Input

> A search field with a keyboard shortcut cap that becomes a clear button once there is text.

Components · Forms · Free · https://obsydeui.com/components/search-input

Escape clears, a second Escape leaves. While loading, the icon turns into a ring with one accent arc. The demo filters the months with a short simulated delay; rows that leave collapse.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/search-input.json
```

Files land in `components/obsyde/ember/search-input/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/forms-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SearchInput } from '@/components/obsyde/ember/search-input/SearchInput';

export function Example() {
  return (
    <SearchInput placeholder="Search" shortcut="/" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | string | — | Query |
| `placeholder` | string | 'Search' | Placeholder |
| `shortcut` | string | '/' | Shortcut |
| `loading` | boolean | false | Loading |

## Examples

- **Prefilled**. `value="ju"`
- **Loading**. `value="ju" loading={true}`
- **No results**. `value="xyz"`

---

# Password Input

> A password field whose strength reads as temperature: four segments light left to right from deep to accent to hot to white.

Components · Forms · Pro · https://obsydeui.com/components/password-input

The reveal toggle keeps focus and caret, Caps Lock is called out while typing, and strength changes are announced politely.

## Install

```bash
npx shadcn@latest add @obsyde/password-input
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/password-input/`, with shared files in `components/obsyde/ember/forms-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { PasswordInput } from '@/components/obsyde/ember/password-input/PasswordInput';

export function Example() {
  return (
    <PasswordInput label="Password" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Password' | Label |
| `value` | string | — | Value |
| `showStrength` | boolean | true | Strength meter |
| `disabled` | boolean | false | Disabled |

## Examples

- **Weak**. `value="hello"`
- **Good**. `value="Hello-world7"`
- **Strong**. `value="Hello-world7-and-more!"`
- **Without meter**. `showStrength={false} value="Hello-world7"`

---

# Tag Input

> A field that turns text into tags. Enter or a comma adds one, pasting a list adds several; new tags spring in from the caret and removed ones collapse while the rest close up.

Components · Forms · Pro · https://obsydeui.com/components/tag-input

Backspace and the arrow keys walk through the tags; a duplicate warms the existing tag instead.

## Install

```bash
npx shadcn@latest add @obsyde/tag-input
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/tag-input/`, with shared files in `components/obsyde/ember/forms-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { TagInput } from '@/components/obsyde/ember/tag-input/TagInput';

export function Example() {
  return (
    <TagInput label="Tags" placeholder="Add a tag" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Tags' | Label |
| `value` | string | — | Tags (comma-separated) |
| `placeholder` | string | 'Add a tag' | Placeholder |
| `max` | number (0–20) | 0 | Max (0 = none) |
| `disabled` | boolean | false | Disabled |

## Examples

- **With tags**. `value="north, east, south"`
- **At limit**. `value="north, east, south" max={3}`
- **Disabled**. `value="north, east, south" disabled={true}`

---

# Combobox

> A select you can type into. The list opens below (or above when there is no room); typing filters it, matched text brightens, filtered rows collapse and the rest glide into place.

Components · Forms · Pro · https://obsydeui.com/components/combobox

One highlight slides between rows; the chosen option carries an accent dot. Full ARIA combobox pattern.

## Install

```bash
npx shadcn@latest add @obsyde/combobox
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/combobox/`, with shared files in `components/obsyde/ember/forms-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Combobox } from '@/components/obsyde/ember/combobox/Combobox';

export function Example() {
  return (
    <Combobox
      label="Month"
      options="January, February, March, April, May, June, July, August, September, October, November, December"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Month' | Label |
| `options` | string | 'January, February, March, April, May, June, July, August, September, October, November, December' | Options (comma-separated) |
| `value` | string | — | Value |
| `placeholder` | string | 'Choose or type' | Placeholder |
| `disabled` | boolean | false | Disabled |

## Examples

- **Selected**. `value="March"`
- **Typed**: The field holds “ju” with the list open. `typed="ju"`
- **Disabled**. `disabled={true}`

---

# File Drop

> A recessed drop zone with no outline at rest; while files hover it lifts, warms and shows a dashed outline that flows inward.

Components · Forms · Pro · https://obsydeui.com/components/file-drop

Files land as rows that expand into place, with middle-truncated names; rejected files say why. The demo simulates uploads: a 1px line with a hot head runs along each row, then a check draws.

## Install

```bash
npx shadcn@latest add @obsyde/file-drop
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/file-drop/`, with shared files in `components/obsyde/ember/forms-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { FileDrop } from '@/components/obsyde/ember/file-drop/FileDrop';

export function Example() {
  return (
    <FileDrop label="Files" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Files' | Label |
| `accept` | string | — | Accept |
| `multiple` | boolean | true | Multiple |
| `maxSizeMb` | number (0–100) | 0 | Max size MB (0 = none) |
| `simulateUpload` | boolean | true | Simulate upload |

## Examples

- **Images only**. `accept=".png,.jpg,.webp"`
- **Size limit**. `maxSizeMb={2}`
- **Single file**. `multiple={false}`

---

# Range Slider

> Two thumbs on a rail that behave like physical objects: they push each other along instead of crossing, the span between them drags both, and they settle onto the step when released.

Components · Forms · Pro · https://obsydeui.com/components/range-slider

The readout rolls its digits.

## Install

```bash
npx shadcn@latest add @obsyde/range-slider
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/range-slider/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/nav-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RangeSlider } from '@/components/obsyde/ember/range-slider/RangeSlider';

export function Example() {
  return (
    <RangeSlider />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `min` | number | 0 | Min |
| `max` | number | 100 | Max |
| `step` | number (0.1–50) | 1 | Step |
| `low` | number | 20 | Low |
| `high` | number | 80 | High |
| `minGap` | number (0–100) | 0 | Minimum gap |
| `unit` | string | — | Unit |
| `disabled` | boolean | false | Disabled |

## Examples

- **With gap**. `minGap={10} low={40} high={50}`
- **Stepped**. `step={5} unit="%"`
- **Disabled**. `disabled={true}`

---

# Date Picker

> A date field with a calendar popup. One highlight slides between days, months slide sideways with both grids in view, and in range mode a continuous band grows to follow the pointer.

Components · Forms · Pro · https://obsydeui.com/components/date-picker

## Install

```bash
npx shadcn@latest add @obsyde/date-picker
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/date-picker/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DatePicker } from '@/components/obsyde/ember/date-picker/DatePicker';

export function Example() {
  return (
    <DatePicker label="Date" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Date' | Label |
| `mode` | 'single' \| 'range' | 'single' | Mode |
| `value` | string | — | Value (yyyy-mm-dd) |
| `valueEnd` | string | — | Range end (yyyy-mm-dd) |
| `weekStart` | 'monday' \| 'sunday' | 'monday' | Week starts |
| `min` | string | — | Earliest (yyyy-mm-dd) |
| `max` | string | — | Latest (yyyy-mm-dd) |
| `disabled` | boolean | false | Disabled |

## Examples

- **Selected**. `value="2026-11-11"`
- **Range**. `mode="range" value="2026-11-09" valueEnd="2026-11-18"`
- **Sunday start**. `weekStart="sunday"`

---

# Tabs

> Text tabs with one raised, borderless fill that slides to the active tab on springs, stretching a little in flight; panels cross over and the height follows.

Components · Navigation · Free · https://obsydeui.com/components/tabs

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/tabs.json
```

Files land in `components/obsyde/ember/tabs/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Tabs } from '@/components/obsyde/ember/tabs/Tabs';

export function Example() {
  return (
    <Tabs tabs="First, Second, Third, Fourth" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `tabs` | string | 'First, Second, Third, Fourth' | Tabs |
| `value` | string | — | Active tab |

## Examples

- **Many tabs**. `tabs="One, Two, Three, Four, Five, Six, Seven, Eight"`
- **Second active**. `value="Second"`

---

# Accordion

> Rows whose panels spring open to their measured height.

Components · Navigation · Free · https://obsydeui.com/components/accordion

The plus turns into a minus, and the open item sits on a soft fill that grows with its panel.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/accordion.json
```

Files land in `components/obsyde/ember/accordion/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Accordion } from '@/components/obsyde/ember/accordion/Accordion';

export function Example() {
  return (
    <Accordion type="single" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `count` | number (1–6) | 3 | Items |
| `type` | 'single' \| 'multiple' | 'single' | Type |
| `open` | string | 'First' | Open at first |

## Examples

- **Single**. `type="single" open="First"`
- **Multiple**. `type="multiple" open="First, Third"`
- **All closed**. `open=""`

---

# Pagination

> Page numbers in fixed slots, so the control never changes width.

Components · Navigation · Pro · https://obsydeui.com/components/pagination

One raised square slides to the current page, and when the window shifts the numerals roll to their new values.

## Install

```bash
npx shadcn@latest add @obsyde/pagination
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/pagination/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Pagination } from '@/components/obsyde/ember/pagination/Pagination';

export function Example() {
  return (
    <Pagination page={5} total={20} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `page` | number | 5 | Page |
| `total` | number (1–999) | 20 | Pages |
| `siblings` | number (0–3) | 1 | Siblings |

## Examples

- **Default**. `page={5} total={20}`
- **Few**. `page={2} total={4}`
- **At the end**. `page={20} total={20}`
- **Wide**. `page={10} total={50} siblings={2}`

---

# Stepper

> Progress through steps. Each completed connection burns across like a fuse, leaving a bone line; the step behind fills and draws a check.

Components · Navigation · Pro · https://obsydeui.com/components/stepper

Going back retracts the line.

## Install

```bash
npx shadcn@latest add @obsyde/stepper
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/stepper/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Stepper } from '@/components/obsyde/ember/stepper/Stepper';

export function Example() {
  return (
    <Stepper step={0} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `steps` | string | 'First, Second, Third, Fourth' | Steps |
| `step` | number (0–10) | 0 | Step |
| `orientation` | 'auto' \| 'horizontal' \| 'vertical' | 'auto' | Orientation |

## Examples

- **Start**. `step={0}`
- **Midway**. `step={2}`
- **Complete**. `step={4}`
- **Vertical**. `step={1} orientation="vertical"`

---

# Side Nav

> An app sidebar: a workspace switcher, search, labelled and collapsible sections, nested rows, badges and dots.

Components · Navigation · Pro · https://obsydeui.com/components/side-nav

One active fill travels between rows and one hover light follows the pointer. It collapses to an icon rail without moving an icon (labels become tooltips, nested rows fly out to the side), resizes from its edge, toggles on ⌘\, and turns into a drawer on small screens. Takes your router's link component.

## Install

```bash
npx shadcn@latest add @obsyde/side-nav
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/side-nav/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SideNav } from '@/components/obsyde/ember/side-nav/SideNav';

export function Example() {
  return (
    <SideNav />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `collapsed` | boolean | false | Collapsed |
| `variant` | 'surface' \| 'floating' | 'surface' | Variant |
| `density` | 'comfortable' \| 'compact' | 'comfortable' | Density |
| `resizable` | boolean | true | Resizable |

## Examples

- **Icon rail**. `collapsed={true}`
- **Floating**. `variant="floating"`
- **Compact**. `density="compact" value="inbox"`

---

# Tree

> A nested tree with indent guides. Branches spring open, one highlight slides to the selection, and the guides on the path down to it turn to the accent.

Components · Navigation · Pro · https://obsydeui.com/components/tree

## Install

```bash
npx shadcn@latest add @obsyde/tree
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/tree/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Tree } from '@/components/obsyde/ember/tree/Tree';

export function Example() {
  return (
    <Tree />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `expanded` | string | — | Open branches |
| `selected` | string | — | Selected |

## Examples

- **Expanded**. `expanded="Section 1, 1.2" selected="1.2.2"`
- **Section 2 open**. `expanded="Section 2"`

---

# Scroll Area

> A native scroller with its own scrollbar out of the way: a 2px line that shows while scrolling, widens when the pointer reaches for it and fades once you stop.

Components · Navigation · Pro · https://obsydeui.com/components/scroll-area

Edge masks fade with the distance left to scroll.

## Install

```bash
npx shadcn@latest add @obsyde/scroll-area
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/scroll-area/`, with shared files in `components/obsyde/ember/nav-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ScrollArea } from '@/components/obsyde/ember/scroll-area/ScrollArea';

export function Example() {
  return (
    <ScrollArea />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `height` | number (80–600) | 240 | Height |
| `lines` | number (1–200) | 60 | Lines |

## Examples

- **Short**. `height={160}`
- **Fits**. `lines={8}`

---

# Tooltip

> Tooltips that warm up. The first waits for its delay; after that the row is warm, and one tip slides from trigger to trigger, its width springing to the new text while the words cross-fade.

Components · Overlays · Free · https://obsydeui.com/components/tooltip

Shows on keyboard focus, never on a touch tap.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/tooltip.json
```

Files land in `components/obsyde/ember/tooltip/`, with shared files in `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Tooltip } from '@/components/obsyde/ember/tooltip/Tooltip';

export function Example() {
  return (
    <Tooltip side="top" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `side` | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | Side |
| `shortcuts` | boolean | true | Shortcuts |
| `delay` | number (0–2000) | 400 | Delay (ms) |

## Examples

- **Top**. `side="top"`
- **Bottom**. `side="bottom"`
- **No shortcut**. `shortcuts={false}`

---

# Popover

> A click-opened surface with no arrow: it grows out of the trigger's centre and stays on screen as it shifts.

Components · Overlays · Pro · https://obsydeui.com/components/popover

Focus moves in and stays in until Escape, an outside click or a button closes it.

## Install

```bash
npx shadcn@latest add @obsyde/popover
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/popover/`, with shared files in `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Popover } from '@/components/obsyde/ember/popover/Popover';

export function Example() {
  return (
    <Popover side="bottom" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `side` | 'bottom' \| 'top' \| 'left' \| 'right' | 'bottom' | Side |
| `align` | 'start' \| 'center' \| 'end' | 'center' | Align |

## Examples

- **Below**. `side="bottom"`
- **Above**. `side="top"`
- **End-aligned**. `side="bottom" align="end"`

---

# Dialog

> A confirm dialog that rises 8px into place.

Components · Overlays · Pro · https://obsydeui.com/components/dialog

When it must be answered, Escape and a scrim click are refused: the panel bumps and its fill lifts once. Under 480px it becomes a bottom sheet with stacked buttons.

## Install

```bash
npx shadcn@latest add @obsyde/dialog
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dialog/`, with shared files in `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Dialog } from '@/components/obsyde/ember/dialog/Dialog';

export function Example() {
  return (
    <Dialog
      title="Discard changes?"
      description="Anything you have not saved will be lost."
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `title` | string | 'Discard changes?' | Title |
| `description` | string | 'Anything you have not saved will be lost.' | Description |
| `confirmLabel` | string | 'Discard' | Confirm label |
| `cancelLabel` | string | 'Cancel' | Cancel label |
| `tone` | 'default' \| 'danger' | 'default' | Tone |
| `dismissible` | boolean | true | Dismissible |

## Examples

- **Danger**. `tone="danger"`
- **Must choose**: Escape and the scrim are refused. `dismissible={false}`

---

# Drawer

> A side sheet you can throw. Its position is one spring and the scrim follows it.

Components · Overlays · Pro · https://obsydeui.com/components/drawer

Drag the inner edge (or the handle of the bottom sheet) and it follows 1:1, rubber-bands past open, and carries your release speed into the spring.

## Install

```bash
npx shadcn@latest add @obsyde/drawer
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/drawer/`, with shared files in `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Drawer } from '@/components/obsyde/ember/drawer/Drawer';

export function Example() {
  return (
    <Drawer side="right" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `side` | 'right' \| 'left' \| 'bottom' | 'right' | Side |
| `title` | string | 'Details' | Title |

## Examples

- **Right**. `side="right"`
- **Left**. `side="left"`
- **Bottom**. `side="bottom"`

---

# Callout

> A quiet inline note on a tinted fill: neutral, a warm accent wash, or the error tint, with an optional small action button.

Components · Feedback · Pro · https://obsydeui.com/components/callout

Dismissing lifts the card away first, then its space closes on a spring so whatever follows glides up.

## Install

```bash
npx shadcn@latest add @obsyde/callout
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/callout/`, with shared files in `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Callout } from '@/components/obsyde/ember/callout/Callout';

export function Example() {
  return (
    <Callout tone="neutral" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `tone` | 'neutral' \| 'accent' \| 'error' | 'neutral' | Tone |
| `dismissible` | boolean | false | Dismissible |
| `actionLabel` | string | — | Action label |

## Examples

- **Neutral**. `tone="neutral"`
- **Accent**. `tone="accent"`
- **Error**. `tone="error"`
- **Dismissible with action**: Dismiss it, then Undo brings it back. `tone="neutral" dismissible={true} actionLabel="Undo"`

---

# Toast

> Toasts whose remaining life is a faint lift of the card's own surface, receding as the time runs down; an action is a small filled button.

Components · Feedback · Pro · https://obsydeui.com/components/toast

Newest in front, up to three layered behind; hover or focus the stack to fan it out and freeze every timer. Swipe one away, or reach it with F6 and dismiss it with Escape.

## Install

```bash
npx shadcn@latest add @obsyde/toast
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/toast/`, with shared files in `components/obsyde/ember/display-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Toaster } from '@/components/obsyde/ember/toast/Toaster';

export function Example() {
  return (
    <Toaster />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `position` | 'bottom-right' \| 'bottom-center' \| 'top-right' | 'bottom-right' | Position |
| `duration` | number (1000–20000) | 4000 | Duration (ms) |
| `initial` | 'none' \| 'toast' \| 'error' | 'none' | Showing on open |

## Examples

- **With action**: Opens with an error toast and its Retry action. `initial="error"`
- **Top right**. `position="top-right"`
- **Long duration (10s)**. `duration={10000}`

---

# Menu

> A dropdown or context menu with one highlight that slides between rows, submenus that open on hover intent (a diagonal toward them does not close them), checkbox items, and a brief lift of the chosen row.

Components · Overlays · Pro · https://obsydeui.com/components/menu

Full menu keyboard pattern; right-click, long-press or Shift+F10 in context mode.

## Install

```bash
npx shadcn@latest add @obsyde/menu
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/menu/`, with shared files in `components/obsyde/ember/display-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Menu } from '@/components/obsyde/ember/menu/Menu';

export function Example() {
  return (
    <Menu label="Options" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `trigger` | 'button' \| 'context' | 'button' | Trigger |
| `label` | string | 'Options' | Button label |
| `showHidden` | boolean | false | Show hidden checked |

## Examples

- **Context**: Right-click, long-press or Shift+F10 inside the area. `trigger="context"`
- **With checked item**. `showHidden={true}`

---

# Command Palette

> A command palette where nothing jumps: as you type, rows that stay glide to their new rank, rows that leave fade and collapse, rows that arrive fade in.

Components · Overlays · Pro · https://obsydeui.com/components/command-palette

Fuzzy matching by subsequence, one sliding highlight, and a brief lift of the command you run. Opens with ⌘K or Ctrl K.

## Install

```bash
npx shadcn@latest add @obsyde/command-palette
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/command-palette/`, with shared files in `components/obsyde/ember/display-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { CommandPalette } from '@/components/obsyde/ember/command-palette/CommandPalette';

export function Example() {
  return (
    <CommandPalette placeholder="Type a command" hotkey="k" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `open` | boolean | false | Open |
| `query` | string | — | Initial query |
| `placeholder` | string | 'Type a command' | Placeholder |
| `hotkey` | string | 'k' | Hotkey (with ⌘ or Ctrl) |

## Examples

- **Open**. `open={true}`
- **Open with query**. `open={true} query="t"`

---

# Table

> A data table whose rows glide to their new places when you sort.

Components · Data · Pro · https://obsydeui.com/components/table

Sticky mono header, one sliding hover highlight, checkbox selection with Shift-click ranges and a rolling count. Under 560px it becomes stacked label-and-value blocks with a single sort button.

## Install

```bash
npx shadcn@latest add @obsyde/table
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/table/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/display-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Table } from '@/components/obsyde/ember/table/Table';

export function Example() {
  return (
    <Table />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rows` | number (0–40) | 8 | Rows |
| `seed` | number (1–999) | 7 | Seed |
| `selectable` | boolean | true | Selectable |
| `state` | 'ready' \| 'empty' | 'ready' | State |
| `sortKey` | 'none' \| 'name' \| 'alpha' \| 'beta' \| 'gamma' | 'none' | Sort by |
| `sortDir` | 'asc' \| 'desc' | 'asc' | Sort direction |

## Examples

- **Sorted by Beta descending**. `sortKey="beta" sortDir="desc"`
- **Not selectable**. `selectable={false}`
- **Empty**. `state="empty"`

---

# Progress

> A bone fill on a faint track. The head runs hot only while the value moves and cools 600ms after the last change; the fill glides on a spring.

Components · Feedback · Free · https://obsydeui.com/components/progress

Indeterminate is one accent segment travelling the track. Reaching 100 flashes the fill once and draws a check in place of the number.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/progress.json
```

Files land in `components/obsyde/ember/progress/`, with shared files in `components/obsyde/ember/status-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Progress } from '@/components/obsyde/ember/progress/Progress';

export function Example() {
  return (
    <Progress size="line" value={40} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number (0–100) | 40 | Value |
| `indeterminate` | boolean | false | Indeterminate |
| `size` | 'line' \| 'bar' | 'line' | Size |
| `showValue` | boolean | true | Show value |
| `label` | string | 'Progress' | Accessible label |

## Examples

- **Line at 40**. `size="line" value={40}`
- **Bar at 72**. `size="bar" value={72}`
- **Indeterminate**. `size="bar" indeterminate={true}`
- **Complete**. `size="bar" value={100}`

---

# Spinner

> A faint ring with a comet running round it, its tail a true fade from deep to hot.

Components · Feedback · Free · https://obsydeui.com/components/spinner

Done closes the arc into a bone ring and draws a check inside; at 16px the ring gives way to the check.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/spinner.json
```

Files land in `components/obsyde/ember/spinner/`, with shared files in `components/obsyde/ember/status-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Spinner } from '@/components/obsyde/ember/spinner/Spinner';

export function Example() {
  return (
    <Spinner label="Loading" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'sizes' \| 'inline' | 'sizes' | Layout |
| `done` | boolean | false | Done |
| `label` | string | 'Loading' | Label |

## Examples

- **Sizes**. `layout="sizes"`
- **Done**. `layout="sizes" done={true}`
- **Inline**: Size 16 beside its label on one line. `layout="inline"`

---

# Skeleton

> 6s on one page-wide clock. When loaded, the same threshold sweeps once and swaps placeholder for content cell by cell, the front cells in the accent.

Components · Feedback · Free · https://obsydeui.com/components/skeleton

Content shares the placeholder's box, so nothing shifts.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/skeleton.json
```

Files land in `components/obsyde/ember/skeleton/`, with shared files in `components/obsyde/ember/status-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Skeleton } from '@/components/obsyde/ember/skeleton/Skeleton';

export function Example() {
  return (
    <Skeleton />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'circle-text' \| 'text' \| 'block' | 'circle-text' | Layout |
| `lines` | number (1–8) | 3 | Lines |
| `height` | number (40–240) | 120 | Block height |
| `loaded` | boolean | false | Loaded |

## Examples

- **Text**. `layout="text"`
- **Block**. `layout="block" height={120}`
- **Circle with text**. `layout="circle-text"`
- **Loaded**. `layout="circle-text" loaded={true}`

---

# Status

> A dot and a word, no pill. Changing state kicks the dot through a springy dip while its fill cross-fades, rolls the word vertically and springs the width to fit.

Components · Feedback · Free · https://obsydeui.com/components/status

4s.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/status.json
```

Files land in `components/obsyde/ember/status/`, with shared files in `components/obsyde/ember/status-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Status } from '@/components/obsyde/ember/status/Status';

export function Example() {
  return (
    <Status state="live" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `state` | 'idle' \| 'live' \| 'ok' \| 'warn' \| 'error' | 'live' | State |
| `size` | 'sm' \| 'md' | 'md' | Size |
| `label` | string | — | Label |

## Examples

- **Live**. `state="live"`
- **Idle**. `state="idle"`
- **OK**. `state="ok"`
- **Warning**. `state="warn"`
- **Error**. `state="error"`

---

# Smoulder Text

> Text that catches where the pointer passes and cools behind it.

Components · Effects · Pro · https://obsydeui.com/components/smoulder-text

Every glyph carries its own temperature: within 90px of the pointer it heats quickly along the accent ramp, then cools on an exponential half-life, with a little diffusion so the heat smears along each word. The hottest glyphs take a small accent shadow and shed the odd 1–2px spark. The text stays real, selectable and wraps by word; it takes several lines and can be centred as a headline.

## Install

```bash
npx shadcn@latest add @obsyde/smoulder-text
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/smoulder-text/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SmoulderText } from '@/components/obsyde/ember/smoulder-text/SmoulderText';

export function Example() {
  return (
    <SmoulderText trigger="pointer" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `text` | string | 'Handle with care.' | Text |
| `trigger` | 'pointer' \| 'mount' | 'pointer' | Trigger |
| `align` | 'start' \| 'center' | 'start' | Align |
| `size` | number (20–160) | 56 | Size (px) |
| `weight` | number (300–800) | 600 | Weight |
| `cooling` | number (0.3–5) | 1.2 | Cooling half-life (s) |

## Examples

- **Pointer**. `trigger="pointer"`
- **Sweep on mount**. `trigger="mount"`
- **Slow cooling (3s)**. `cooling={3}`
- **Small**. `size={28} text="Still warm to the touch."`
- **Headline**. `text="Handle\nwith care." size={112} align="center" trigger="mount"`

---

# Filament Text

> Type that switches on like a filament. Each glyph goes white-hot in a quick left-to-right stagger, then cools through the accent ramp to the text colour, its temperature on a critically damped spring.

Components · Effects · Pro · https://obsydeui.com/components/filament-text

Afterwards only one glyph stays alight, the final full stop by default, breathing slowly; hovering a word switches it on again. Plays on mount, the first time it is in view, or on demand, and takes several lines. The text is read once by screen readers.

## Install

```bash
npx shadcn@latest add @obsyde/filament-text
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/filament-text/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { FilamentText } from '@/components/obsyde/ember/filament-text/FilamentText';

export function Example() {
  return (
    <FilamentText text="Switched on once." />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `text` | string | 'Switched on once.' | Text |
| `trigger` | 'visible' \| 'mount' \| 'manual' | 'visible' | Trigger |
| `size` | number (24–160) | 72 | Size (px) |
| `weight` | number (300–800) | 600 | Weight |
| `stagger` | number (0–120) | 25 | Stagger (ms) |
| `cooling` | number (300–5000) | 1200 | Cooling (ms) |
| `ember` | 'last' \| 'none' | 'last' | Ember glyph |
| `hoverRelight` | boolean | true | Relight on hover |

## Examples

- **Headline**. `text="Switched on once.\nStill alight." size={112}`
- **Slow cool**. `cooling={3200} stagger={60}`
- **No ember**. `ember="none" text="Cools all the way down"`
- **Volt**. `accent="volt"`
- **Manual (press Replay)**. `trigger="manual"`

---

# Decode Text

> Text that resolves out of noise, left to right, at a stepped 30 frames per second.

Components · Effects · Free · https://obsydeui.com/components/decode-text

Unlocked cells are faint noise, the cell locking this frame is accent, locked cells are bone. When the text changes only the characters that differ scramble again; extra positions decode in or scramble out and collapse while the width springs. Cells are fixed-width, so the line never jitters.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/decode-text.json
```

Files land in `components/obsyde/ember/decode-text/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DecodeText } from '@/components/obsyde/ember/decode-text/DecodeText';

export function Example() {
  return (
    <DecodeText trigger="mount" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `trigger` | 'mount' \| 'hover' \| 'change' | 'mount' | Trigger |
| `speed` | number (4–80) | 28 | Speed (chars/s) |
| `size` | number (14–64) | 28 | Size (px) |
| `mono` | boolean | true | Mono |
| `glyphs` | string | '01<>/\[]{}=+*^?#' | Noise glyphs |

## Examples

- **On mount**. `trigger="mount"`
- **On hover**. `trigger="hover"`
- **Slow**. `speed={10}`
- **Proportional**. `mono={false} size={40}`

---

# Ticker

> A large counter with the feel of a mechanical odometer at speed.

Components · Effects · Pro · https://obsydeui.com/components/ticker

Every digit is a reel on its own spring; higher places start 15ms later, so a big change ripples from right to left. While a reel spins fast its digits stretch, fade and run accent, then sharpen and cool to bone as it settles. Digits that appear slide in from the left and the width springs, never snaps.

## Install

```bash
npx shadcn@latest add @obsyde/ticker
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/ticker/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Ticker } from '@/components/obsyde/ember/ticker/Ticker';

export function Example() {
  return (
    <Ticker value={12480} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number (0–999999) | 12480 | Value |
| `decimals` | number (0–4) | 0 | Decimals |
| `separator` | boolean | true | Thousands separator |
| `size` | number (24–120) | 72 | Size (px) |
| `prefix` | string | — | Prefix |
| `suffix` | string | — | Suffix |

## Examples

- **Default**. `value={12480}`
- **Decimals**. `value={3.14} decimals={2}`
- **With suffix**. `value={87} suffix="%"`
- **Small**. `size={32}`

---

# Thermal

> A surface that remembers where the pointer has been, seen through a 1-bit thermal camera.

Components · Effects · Pro · https://obsydeui.com/components/thermal

The pointer lays heat into a low-resolution field (more when it moves slowly), which diffuses a little and cools on a half-life. Every cell is either off or on by an 8×8 ordered dither, coloured deep at the fringe, accent in the body and white at the core. A click sends a ring of heat outward. At rest nothing is drawn and the loop is stopped.

## Install

```bash
npx shadcn@latest add @obsyde/thermal
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/thermal/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Thermal } from '@/components/obsyde/ember/thermal/Thermal';

export function Example() {
  return (
    <Thermal />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `cell` | number (2–12) | 5 | Cell (px) |
| `cooling` | number (0.3–6) | 1.6 | Cooling half-life (s) |
| `radius` | number (16–120) | 44 | Radius (px) |

## Examples

- **Coarse**. `cell={8}`
- **Slow cooling**. `cooling={4}`
- **Fine**. `cell={3} radius={30}`

---

# Hotplate

> A perfectly regular dot grid that swells and heats under the pointer and rings when struck.

Components · Effects · Pro · https://obsydeui.com/components/hotplate

Near the pointer each dot grows to 3px, warms from white toward the accent and is pushed outward like a lens, on its own loose spring, so the bulge wobbles as it follows. A click sends a ring outward that kicks the dots and flashes them accent on its crest. Still at rest.

## Install

```bash
npx shadcn@latest add @obsyde/hotplate
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/hotplate/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Hotplate } from '@/components/obsyde/ember/hotplate/Hotplate';

export function Example() {
  return (
    <Hotplate />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `spacing` | number (8–40) | 18 | Spacing (px) |
| `reach` | number (60–320) | 140 | Reach (px) |

## Examples

- **Dense**. `spacing={12}`
- **Wide reach**. `reach={240}`

---

# Cinder

> A transition where content burns away along an organic edge.

Components · Effects · Pro · https://obsydeui.com/components/cinder

Distance from the origin, roughened by smooth fractal noise, is thresholded into a hard, irregular front that clips the real content. On the content side of the front runs a 6px char band and a 3px rim from accent through hot to white, with a soft bloom, and a few sparks rise from it. Fully shown means no clip at all; reversing mid-burn runs back from the current front.

## Install

```bash
npx shadcn@latest add @obsyde/cinder
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/cinder/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Cinder } from '@/components/obsyde/ember/cinder/Cinder';

export function Example() {
  return (
    <Cinder origin="pointer" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `origin` | 'pointer' \| 'center' \| 'edge' | 'pointer' | Origin |
| `duration` | number (300–3000) | 900 | Duration (ms) |
| `scale` | number (20–200) | 60 | Noise scale (px) |

## Examples

- **From pointer**. `origin="pointer"`
- **From centre**. `origin="center"`
- **From edge**. `origin="edge"`
- **Slow and coarse**. `duration={1800} scale={120}`

---

# Convection

> A background of rising heat drawn only as contour lines.

Components · Effects · Pro · https://obsydeui.com/components/convection

A single-pass WebGL shader evaluates a domain-warped noise field that drifts slowly upward and draws each level as a 1px line, white at 9%, black between. The field runs warm toward the bottom edge, where the top band of lines takes the accent ramp; the pointer adds a local heat source that bends the contours around it. Falls back to a few static hairlines without WebGL.

## Install

```bash
npx shadcn@latest add @obsyde/convection
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/convection/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Convection } from '@/components/obsyde/ember/convection/Convection';

export function Example() {
  return (
    <Convection />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `speed` | number (0–3) | 1 | Speed |
| `density` | number (4–40) | 14 | Contour levels |
| `interactive` | boolean | true | Interactive |

## Examples

- **Dense**. `density={28}`
- **Slow**. `speed={0.3}`
- **Not interactive**. `interactive={false}`

---

# Tilt

> A card that leans toward the pointer on a loose spring, overshooting slightly and settling, with a highlight that travels round its 1px edge like light on a bevel.

Components · Effects · Pro · https://obsydeui.com/components/tilt

The bright segment sits on the edge facing a light above-left and slides round the perimeter as the card tilts; pressed, the card sinks and its core runs accent. Children marked with a depth shift with the tilt for parallax.

## Install

```bash
npx shadcn@latest add @obsyde/tilt
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/tilt/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Tilt } from '@/components/obsyde/ember/tilt/Tilt';

export function Example() {
  return (
    <Tilt />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `max` | number (1–20) | 8 | Max lean (deg) |
| `radius` | number (0–28) | 14 | Radius (px) |

## Examples

- **Strong**. `max={16}`
- **Subtle**. `max={3}`

---

# Footer

> A closing section for the foot of a page.

Components · Sections · Pro · https://obsydeui.com/components/footer

A last statement with its actions, a hairline, the site map in columns, a bottom row, and the name set enormous and cropped across the foot. The giant word is barely there at rest; under the pointer a soft spot of heat, clipped to the letters, follows on a spring and cools when it leaves. On touch it sweeps once when it comes into view; with reduced motion it keeps a still, warm corner. Takes your router's link component. The heated word is also exported alone as FooterSignature.

## Install

```bash
npx shadcn@latest add @obsyde/footer
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/footer/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Footer } from '@/components/obsyde/ember/footer/Footer';

export function Example() {
  return (
    <Footer wordmark="Ember" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'full' \| 'signature' | 'full' | Layout |
| `wordmark` | string | 'Ember' | Wordmark |
| `statement` | boolean | true | Closing statement |

## Examples

- **Signature only**. `layout="signature"`
- **Without statement**. `statement={false}`
- **Volt**. `accent="volt"`

---

# Avatar

> Initials on a filled graphite surface with a soft top light and fine grain, or one of three seeded monochrome faces: glow (soft pools of light in smoke), contour (fine topographic lines) and eclipse (a crescent of rim light).

Components · Data · Free · https://obsydeui.com/components/avatar

Status is a small dot cut out of the rim: live is the accent with a slow pulse, idle is a still grey. Stacks overlap with a cut-out and fan apart on hover or focus as a ripple, with the rest counted in a mono +n.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/avatar.json
```

Files land in `components/obsyde/ember/avatar/`, with shared files in `components/obsyde/ember/basics-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Avatar } from '@/components/obsyde/ember/avatar/Avatar';

export function Example() {
  return (
    <Avatar />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `face` | 'mixed' \| 'initials' \| 'glow' \| 'contour' \| 'eclipse' | 'mixed' | Face |
| `size` | number (24–64) | 48 | Size |
| `status` | 'live' \| 'idle' \| 'none' | 'live' | Status |
| `count` | number (1–12) | 7 | People |
| `max` | number (2–8) | 5 | Max shown |
| `fanned` | boolean | false | Held open |

## Examples

- **Fan**. `fanned={true} face="glow" count={6}`
- **Contour**. `fanned={true} face="contour" size={56} count={4} status="none"`
- **Eclipse**. `face="eclipse" size={48} count={9} max={6} status="idle"`
- **Single**. `count={1} size={64} face="initials"`

---

# Breadcrumbs

> A path of crumbs split by thin slashes, the current page in full text colour and not a link.

Components · Navigation · Free · https://obsydeui.com/components/breadcrumbs

A pointed-at crumb brightens to full text colour; a path too long for its width folds its middle into a quiet … that opens a menu of the hidden levels.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/breadcrumbs.json
```

Files land in `components/obsyde/ember/breadcrumbs/`, with shared files in `components/obsyde/ember/display-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/basics-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Breadcrumbs } from '@/components/obsyde/ember/breadcrumbs/Breadcrumbs';

export function Example() {
  return (
    <Breadcrumbs />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `path` | string | 'Ember / Navigation / Breadcrumbs' | Path |
| `maxVisible` | number (2–10) | 4 | Max visible |

## Examples

- **Long collapsed**. `path="Collection / Ember / Components / Navigation / Basics / Breadcrumbs / Examples / Long path"`
- **Volt**. `path="Ember / Components / Navigation / Breadcrumbs" accent="volt"`

---

# Carousel

> A track of slides you throw with a finger, a mouse or a trackpad: the release velocity picks the slide and the snap carries it on a spring, and past either end the track stretches like rubber.

Components · Navigation · Pro · https://obsydeui.com/components/carousel

Under it a hairline fills as you go, its head hot while the track moves.

## Install

```bash
npx shadcn@latest add @obsyde/carousel
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/carousel/`, with shared files in `components/obsyde/ember/basics-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Carousel } from '@/components/obsyde/ember/carousel/Carousel';

export function Example() {
  return (
    <Carousel />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `count` | number (1–12) | 6 | Slides |
| `slideWidth` | number (0.5–1) | 1 | Slide width |
| `gap` | number (0–32) | 12 | Gap |
| `defaultIndex` | number (0–11) | 0 | Start at |

## Examples

- **Peek**. `slideWidth={0.82}`
- **Volt**. `slideWidth={0.82} accent="volt" defaultIndex={2}`

---

# Resizable

> Two panes split by a 1px hairline with a small grip.

Components · Navigation · Pro · https://obsydeui.com/components/resizable

Dragging heats the line around the grip and shows the size in mono; near a snap point the handle slows into a detent and settles there on release. Arrow keys step 5%, Home and End go to the limits, double-click resets, and splits nest.

## Install

```bash
npx shadcn@latest add @obsyde/resizable
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/resizable/`, with shared files in `components/obsyde/ember/basics-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Resizable } from '@/components/obsyde/ember/resizable/Resizable';

export function Example() {
  return (
    <Resizable />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'horizontal' \| 'vertical' \| 'nested' | 'horizontal' | Layout |
| `defaultSize` | number (0–100) | 50 | Default size |
| `min` | number (0–100) | 15 | Min |
| `max` | number (0–100) | 85 | Max |
| `snap` | boolean | true | Snap points |
| `step` | number (1–25) | 5 | Key step |

## Examples

- **Vertical**. `layout="vertical"`
- **Nested**. `layout="nested" defaultSize={40}`
- **Volt**. `accent="volt" defaultSize={35}`

---

# Color Picker

> A saturation and brightness square, a hue strip and a mono hex field, controlled by one hex value.

Components · Forms · Pro · https://obsydeui.com/components/color-picker

The thumbs are rings with a light and a dark edge, so they read on white and on black; they follow the pointer on a short spring and grow while held. Both sliders take arrow keys, Shift for bigger steps.

## Install

```bash
npx shadcn@latest add @obsyde/color-picker
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/color-picker/`, with shared files in `components/obsyde/ember/basics-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ColorPicker } from '@/components/obsyde/ember/color-picker/ColorPicker';

export function Example() {
  return (
    <ColorPicker />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | string | '#ff6a1a' | Value |
| `swatches` | boolean | false | Swatches |
| `compact` | boolean | false | Compact |

## Examples

- **With swatches**. `swatches={true}`
- **Compact**. `compact={true} value="#3db8ff"`
- **Volt**. `accent="volt" value="#c6ff3d" swatches={true}`

---

# Spotlight Grid

> A grid of dark tiles that share one light.

Components · Effects · Pro · https://obsydeui.com/components/spotlight-grid

The 1px gaps between tiles are the grid's own background, which carries a single radial light at the pointer, so neighbouring edges catch it together and warm toward the accent within about 160px while the faces pass a trace of it. The pointer moves two CSS variables on the root and nothing else; focusing a tile glides the light onto it.

## Install

```bash
npx shadcn@latest add @obsyde/spotlight-grid
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/spotlight-grid/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SpotlightGrid } from '@/components/obsyde/ember/spotlight-grid/SpotlightGrid';

export function Example() {
  return (
    <SpotlightGrid />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `radius` | number (60–360) | 160 | Light radius (px) |
| `columns` | number (1–8) | 3 | Columns |
| `minTile` | number (60–320) | 160 | Min tile width (px) |
| `tileHeight` | number (60–240) | 148 | Tile height (px) |
| `layout` | 'notes' \| 'dense' | 'notes' | Layout |

## Examples

- **Dense**. `layout="dense" count={24} columns={8} minTile={80} tileHeight={80}`
- **Wide light**. `radius={280}`
- **Volt**. `accent="volt"`

---

# Sparks

> A background of 1–2px sparks that rise from the bottom edge, cooling from hot to deep as they climb and dying out partway up.

Components · Effects · Pro · https://obsydeui.com/components/sparks

The pointer is wind: sparks bend away from it and are carried along when it moves, and a click throws a small fan of hotter ones. Sparse and calm; particles come from a fixed pool and the loop stops off screen.

## Install

```bash
npx shadcn@latest add @obsyde/sparks
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/sparks/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Sparks } from '@/components/obsyde/ember/sparks/Sparks';

export function Example() {
  return (
    <Sparks />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `density` | number (0.2–5) | 1.6 | Density (per 100px/s) |
| `gusts` | number (0–1) | 0.15 | Gusts |
| `wind` | number (0–2) | 1 | Pointer wind |
| `burst` | number (0–30) | 12 | Burst size |

## Examples

- **Sparse**. `density={0.6}`
- **Gusty**. `gusts={1} density={2.2}`
- **Volt**. `accent="volt"`

---

# Magnet

> A wrapper that pulls its child toward the pointer once it comes within a radius of the child's edge, on a loose spring, growing slightly as it is drawn in.

Components · Effects · Pro · https://obsydeui.com/components/magnet

The inner content trails the frame on a softer spring and sits a little further toward the pointer, so the label lags and catches up. When the pointer leaves, the child snaps back with one overshoot.

## Install

```bash
npx shadcn@latest add @obsyde/magnet
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/magnet/`, with shared files in `components/obsyde/ember/icon-button/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/button/`, `components/obsyde/ember/effects-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Magnet } from '@/components/obsyde/ember/magnet/Magnet';

export function Example() {
  return (
    <Magnet />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `strength` | number (0.05–0.8) | 0.3 | Strength |
| `radius` | number (20–200) | 72 | Radius (px) |
| `parallax` | number (0–1) | 0.3 | Inner lag |
| `scale` | number (1–1.12) | 1.04 | Scale |

## Examples

- **Strong**. `strength={0.55} radius={120}`
- **Volt**. `accent="volt"`

---

# Beam

> Hairline curves drawn between nodes, measured from the elements themselves and re-measured when anything resizes.

Components · Effects · Pro · https://obsydeui.com/components/beam

A pulse runs along a curve with a white head and a tail that fades back through the accent to nothing, on an interval or when fired, and the node it lands on warms for a moment. In a chain an arriving pulse carries on to the next node.

## Install

```bash
npx shadcn@latest add @obsyde/beam
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/beam/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BeamNode } from '@/components/obsyde/ember/beam/Beam';

export function Example() {
  return (
    <BeamNode />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'fan-in' \| 'chain' | 'fan-in' | Layout |
| `trigger` | 'interval' \| 'manual' | 'interval' | Trigger |
| `interval` | number (400–4000) | 1400 | Interval (ms) |
| `duration` | number (300–3000) | 1100 | Travel (ms) |
| `tail` | number (20–200) | 90 | Tail (px) |
| `curvature` | number (-80–80) | 0 | Bow (px) |

## Examples

- **Fan-in**. `layout="fan-in"`
- **Chain**. `layout="chain" interval={2200}`
- **Triggered**: Press a node to send a pulse. `trigger="manual"`
- **Volt**. `accent="volt"`

---

# Dot Matrix

> Text on an LED panel: a 5×7 bitmap font drawn on a canvas of faint unlit dots, with lit dots in bone.

Components · Effects · Pro · https://obsydeui.com/components/dot-matrix

When the text changes, only the dots that differ switch, column by column, each with a short hot flash; scroll mode marquees long text one whole column at a time. Lit dots near the pointer warm toward the accent and cool behind it.

## Install

```bash
npx shadcn@latest add @obsyde/dot-matrix
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dot-matrix/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DotMatrix } from '@/components/obsyde/ember/dot-matrix/DotMatrix';

export function Example() {
  return (
    <DotMatrix text="DOT MATRIX" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `text` | string | 'DOT MATRIX' | Text |
| `dot` | number (2–10) | 4 | Dot (px) |
| `gap` | number (1–6) | 2 | Gap (px) |
| `scroll` | boolean | false | Scroll |
| `speed` | number (4–40) | 14 | Speed (columns/s) |
| `cycle` | boolean | false | Cycle words |

## Examples

- **Changing**: Cycles four words every 1.8s. `cycle={true}`
- **Scroll**. `scroll={true} text="FIVE BY SEVEN, ONE COLUMN AT A TIME."`
- **Volt**. `accent="volt" text="VOLT"`

---

# Flame Wrap

> Wraps any element in a border of fire. The outline burns molten, flames lick off the top edge and run short down the sides, and sparks drift away.

Components · Effects · Pro · https://obsydeui.com/components/flame-wrap

One WebGL canvas behind the element draws domain-warped noise masked by a rounded-rect distance field; the element stays real DOM with a faint heat shimmer at its edges. Lit, it catches at the bottom edge and climbs; put out, it dies back down on a spring.

## Install

```bash
npx shadcn@latest add @obsyde/flame-wrap
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/flame-wrap/`, with shared files in `components/obsyde/ember/fire-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { FlameWrap } from '@/components/obsyde/ember/flame-wrap/FlameWrap';

export function Example() {
  return (
    <FlameWrap />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `content` | 'card' \| 'button' | 'card' | Wrapped element |
| `intensity` | number (0–1) | 0.8 | Intensity |
| `height` | number (12–120) | 56 | Flame height |
| `sparks` | boolean | true | Sparks |
| `active` | boolean | true | Lit |
| `trigger` | 'always' \| 'hover' | 'always' | Trigger |
| `radius` | number (0–32) | 14 | Card radius |

## Examples

- **Button**. `content="button"`
- **Low**. `intensity={0.3} height={30} sparks={false}`
- **Lit on hover**: Point at the card, or tab into it. `trigger="hover"`

---

# Blaze

> Fire along the bottom edge of a container.

Components · Effects · Pro · https://obsydeui.com/components/blaze

Flames, a glowing ember bed and slow dark smoke come from one WebGL shader; heat distortion rises into the content above through an SVG displacement filter that fades out on its way up. It burns on its own and never reacts to the pointer.

## Install

```bash
npx shadcn@latest add @obsyde/blaze
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/blaze/`, with shared files in `components/obsyde/ember/fire-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Blaze } from '@/components/obsyde/ember/blaze/Blaze';

export function Example() {
  return (
    <Blaze />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `height` | number (24–280) | 110 | Flame height |
| `intensity` | number (0–1) | 0.8 | Intensity |
| `smoke` | number (0–1) | 0.6 | Smoke |
| `distortion` | number (0–1) | 0.6 | Distortion |

## Examples

- **Low embers**. `intensity={0.15} height={48} smoke={0.35} distortion={0.3}`
- **Tall**. `height={220} intensity={1}`
- **Volt**. `accent="volt"`

---

# Frost

> A pane of hoarfrost over live content. The ice is one marbled texture of milky swirls, clear pockets and fine grain, and the content under it is refracted along those swirls, so text shows through doubled and smeared.

Components · Effects · Pro · https://obsydeui.com/components/frost

The pointer is heat: it melts a clear hole with a wet, irregular edge that follows the ice, a thin warm rim and a slight lens just inside it, and leaves a melted path behind. The frost creeps back in along its own veins, crystals first and fog after. The content stays clickable, and keyboard focus melts a clearing around the focused control.

## Install

```bash
npx shadcn@latest add @obsyde/frost
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/frost/`, with shared files in `components/obsyde/ember/fire-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Frost } from '@/components/obsyde/ember/frost/Frost';

export function Example() {
  return (
    <Frost />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `regrow` | number (0.5–8) | 2.8 | Regrow (s) |
| `brush` | number (24–240) | 150 | Brush (px) |
| `opacity` | number (0.3–1) | 1 | Opacity |

## Examples

- **Slow regrow**. `regrow={6}`
- **Thin ice**. `opacity={0.55}`
- **Volt**. `accent="volt"`

---

# Metal

> Liquid dark chrome for small controls. A WebGL tube lies along the element's rounded edge and reflects a procedural studio of near-black and bone bands with one thin accent line, while a highlight slowly orbits it.

Components · Effects · Pro · https://obsydeui.com/components/metal

The pointer bends the ring toward itself and pulls the highlight round; a press dents the metal and it springs back with a wobble. A fill variant turns a round icon button into a chrome bead.

## Install

```bash
npx shadcn@latest add @obsyde/metal
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/metal/`, with shared files in `components/obsyde/ember/fire-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Metal } from '@/components/obsyde/ember/metal/Metal';

export function Example() {
  return (
    <Metal />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `example` | 'send' \| 'input' \| 'fill' | 'send' | Element |
| `thickness` | number (1.5–6) | 4 | Ring thickness |
| `reach` | number (20–200) | 90 | Reach |

## Examples

- **Send**. `example="send"`
- **Input**. `example="input"`
- **Icon fill**. `example="fill"`
- **Volt**. `example="send" accent="volt"`

---

# Border Beam

> A soft light that travels the rim of a card, button or field and spills onto its surface, as if the edge were glass catching a passing light.

Components · Effects · Pro · https://obsydeui.com/components/border-beam

It reads the wrapped element's own size, border and corner radii, lights exactly its 1px border with a near-white core cooling to the accent, and keeps one calm speed round every corner. A second light can run half a lap behind; it eases to a stop on hover and fades out when inactive. Pure CSS motion on the compositor.

## Install

```bash
npx shadcn@latest add @obsyde/border-beam
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/border-beam/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BorderBeam } from '@/components/obsyde/ember/border-beam/BorderBeam';

export function Example() {
  return (
    <BorderBeam />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `example` | 'card' \| 'input' | 'card' | Element |
| `speed` | number (30–600) | 110 | Speed (px/s) |
| `length` | number (30–400) | 170 | Length (px) |
| `duo` | boolean | false | Two beams |
| `pauseOnHover` | boolean | false | Pause on hover |
| `active` | boolean | true | Active |

## Examples

- **Input (focus to run)**. `example="input" length={120}`
- **Two beams**. `duo={true}`
- **Volt**. `accent="volt"`

---

# Smoke

> Soft smoke on a 2D canvas: pooled sprites drifting on curl noise, laminar at the source and curling as they rise.

Components · Effects · Pro · https://obsydeui.com/components/smoke

It climbs from the top of any element in a thin plume, or trails the pointer like breath on cold air. Dark grey on black, with the faintest warm tint where it starts; a passing pointer stirs it.

## Install

```bash
npx shadcn@latest add @obsyde/smoke
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/smoke/`, with shared files in `components/obsyde/ember/fire-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Smoke } from '@/components/obsyde/ember/smoke/Smoke';

export function Example() {
  return (
    <Smoke source="element" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `source` | 'element' \| 'pointer' | 'element' | Source |
| `density` | number (0–1) | 0.5 | Density |

## Examples

- **Rising**. `source="element"`
- **Pointer trail**: Move the pointer. `source="pointer"`
- **Dense**. `density={1}`
- **Volt**. `accent="volt"`

---

# Wake Slider

> A range drawn as a row of thin bars, with no thumb: bone to the left of the value, faint to the right.

Components · Forms · Pro · https://obsydeui.com/components/wake-slider

Sweep across it fast and the bars you pass spring up in a wake behind your hand, each on its own spring, taller the faster you go, while the bar at the value runs hot. Arrow keys kick a small wake of their own.

## Install

```bash
npx shadcn@latest add @obsyde/wake-slider
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/wake-slider/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { WakeSlider } from '@/components/obsyde/ember/wake-slider/WakeSlider';

export function Example() {
  return (
    <WakeSlider defaultValue={40} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number | 40 | Value |
| `min` | number | 0 | Min |
| `max` | number | 100 | Max |
| `step` | number | 1 | Step |
| `bars` | number (8–160) | 40 | Bars |
| `wake` | number (0–3) | 1 | Wake |
| `unit` | string | — | Unit |
| `label` | string | — | Label |
| `disabled` | boolean | false | Disabled |

## Examples

- **Default**. `value={40}`
- **Dense bars**: 96 bars. `bars={96} value={62}`
- **Strong wake**: Wake strength 2.2. `wake={2.2} value={30}`
- **Volt**. `accent="volt" value={55}`

---

# Signature Pad

> A pad you sign with a mouse, pen or finger.

Components · Forms · Pro · https://obsydeui.com/components/signature-pad

Lines thin out when you move fast and swell under pen pressure, smoothed through quadratic midpoints, and the ink leaves the tip hot and cools to bone over about 600ms. Undo removes the last stroke, Clear fades the ink away, and Export hands an SVG string to onChange.

## Install

```bash
npx shadcn@latest add @obsyde/signature-pad
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/signature-pad/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SignaturePad } from '@/components/obsyde/ember/signature-pad/SignaturePad';

export function Example() {
  return (
    <SignaturePad placeholder="Sign here" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `height` | number (120–400) | 200 | Height |
| `penWidth` | number (0.6–8) | 2.6 | Pen width |
| `placeholder` | string | 'Sign here' | Prompt |
| `disabled` | boolean | false | Disabled |

## Examples

- **Thin pen**: A 1.3px base width. `penWidth={1.3}`
- **Volt**. `accent="volt"`

---

# Slosh Slider

> A slider whose fill is a liquid. Its front is a short chain of masses on springs: move the value fast and the surface leans back against the motion, then surges forward, overshoots and settles as a damped wave.

Components · Forms · Pro · https://obsydeui.com/components/slosh-slider

The liquid is bone, with a hot meniscus line only while it moves.

## Install

```bash
npx shadcn@latest add @obsyde/slosh-slider
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/slosh-slider/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SloshSlider } from '@/components/obsyde/ember/slosh-slider/SloshSlider';

export function Example() {
  return (
    <SloshSlider defaultValue={40} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number | 40 | Value |
| `min` | number | 0 | Min |
| `max` | number | 100 | Max |
| `step` | number | 1 | Step |
| `thickness` | number (12–72) | 28 | Thickness |
| `label` | string | 'Fill' | Label |
| `unit` | string | '%' | Unit |
| `disabled` | boolean | false | Disabled |

## Examples

- **Default**. `value={40}`
- **Thick**: A 52px tube. `thickness={52} value={60}`
- **Volt**. `accent="volt" value={40}`

---

# Goo Toggle

> A switch whose knob travels like viscous molten metal.

Components · Forms · Pro · https://obsydeui.com/components/goo-toggle

The front of the knob springs across while the back holds on, a neck stretches between them and snaps, and the rest catches up and merges with a wobble. Off is a grey bead; on is a hot core cooling to the accent.

## Install

```bash
npx shadcn@latest add @obsyde/goo-toggle
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/goo-toggle/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { GooToggle } from '@/components/obsyde/ember/goo-toggle/GooToggle';

export function Example() {
  return (
    <GooToggle defaultChecked={false} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `checked` | boolean | false | On |
| `label` | string | 'Molten' | Label |
| `size` | 'md' \| 'lg' | 'md' | Size |
| `disabled` | boolean | false | Disabled |

## Examples

- **Default**. `checked={false}`
- **Large**. `size="lg" checked={true}`
- **Volt**. `accent="volt" checked={true}`

---

# Rotary Knob

> A knob you turn by dragging up and down on the cap or round the ring.

Components · Forms · Pro · https://obsydeui.com/components/rotary-knob

The value arc is a hairline with a bone fill whose head runs hot while it turns; with detents it clicks between positions with a small overshoot and a haptic tap. Wheel, arrows, PgUp/PgDn, Home/End and double-click to reset all work.

## Install

```bash
npx shadcn@latest add @obsyde/rotary-knob
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/rotary-knob/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RotaryKnob } from '@/components/obsyde/ember/rotary-knob/RotaryKnob';

export function Example() {
  return (
    <RotaryKnob defaultValue={40} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number | 40 | Value |
| `min` | number | 0 | Min |
| `max` | number | 100 | Max |
| `step` | number | 1 | Step |
| `detents` | number (0–41) | 0 | Detents |
| `size` | number (72–200) | 120 | Size |
| `label` | string | — | Label |
| `unit` | string | — | Unit |
| `disabled` | boolean | false | Disabled |

## Examples

- **Default**. `value={40}`
- **Detents**: Eleven positions. `detents={11} value={50}`
- **Bipolar**: −50 to +50, filled from the centre. `min={-50} max={50} value={0}`
- **Volt**. `accent="volt" value={65}`

---

# Slide to Confirm

> Drag a hot slug along a recessed channel and the channel heats behind it: a soft accent bloom trails the knob and fades to nothing, and the knob warms as it nears the end.

Components · Actions · Pro · https://obsydeui.com/components/slide-confirm

Let go early and it springs home with the wake receding; reach the end and it snaps into place, a heat pulse runs through the channel, and it settles into a calm accent fill with a solid accent knob and a drawn check. No borders, no gaps. Hold Right Arrow, or press Enter twice, from the keyboard.

## Install

```bash
npx shadcn@latest add @obsyde/slide-confirm
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/slide-confirm/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SlideConfirm } from '@/components/obsyde/ember/slide-confirm/SlideConfirm';

export function Example() {
  return (
    <SlideConfirm label="Slide to confirm" doneLabel="Confirmed" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Slide to confirm' | Label |
| `doneLabel` | string | 'Confirmed' | Done label |
| `width` | number (200–600) | 320 | Width |
| `resetMs` | number (0–8000) | 2400 | Reset after (ms) |
| `disabled` | boolean | false | Disabled |

## Examples

- **Danger**: Destructive wording; the heat and the confirmed state stay on the accent. `label="Slide to delete" doneLabel="Deleted"`
- **Compact**: A 240px track. `width={240} label="Slide to send" doneLabel="Sent"`
- **Volt**. `accent="volt"`

---

# Navbar

> A floating pill header: wordmark, links, one action.

Components · Sections · Pro · https://obsydeui.com/components/navbar

A soft light glides between the links on a spring as the pointer moves across them, and fades when it leaves. Once the page scrolls, the bar draws in a little and takes a raised dark face; under 640px of width the links fold into a menu button whose borderless sheet grows out of it, its items arriving one after another. Takes your router's link component.

## Install

```bash
npx shadcn@latest add @obsyde/navbar
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/navbar/`, with shared files in `components/obsyde/ember/blocks-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Navbar } from '@/components/obsyde/ember/navbar/Navbar';

export function Example() {
  return (
    <Navbar />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `frame` | 'page' \| 'mobile' | 'page' | Frame |
| `scrolled` | boolean | false | Open scrolled |
| `menuOpen` | boolean | false | Menu open (mobile) |
| `collapseAt` | number (320–1200) | 640 | Collapse below (px) |

## Examples

- **Scrolled**. `scrolled={true}`
- **Mobile**. `frame="mobile" menuOpen={true}`

---

# Hero

> An opening section: a meta line, a big headline, a subline and two actions, centred or set left over a live background slot.

Components · Sections · Pro · https://obsydeui.com/components/hero

On mount the words rise out of a soft blur one after another, and the actions follow. The copy lets the pointer through to the background, so Convection or Hotplate behind it still answers to the hand.

## Install

```bash
npx shadcn@latest add @obsyde/hero
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/hero/`, with shared files in `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/hotplate/`, `components/obsyde/ember/convection/`, `components/obsyde/ember/filament-text/`, `components/obsyde/ember/blocks-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Hero } from '@/components/obsyde/ember/hero/Hero';

export function Example() {
  return (
    <Hero />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `background` | 'convection' \| 'hotplate' \| 'none' | 'convection' | Background |
| `headline` | 'filament' \| 'plain' | 'filament' | Headline |
| `align` | 'center' \| 'start' | 'center' | Align |
| `meta` | boolean | true | Meta line |

## Examples

- **Plain**. `background="none" headline="plain"`
- **Left aligned**. `align="start" background="hotplate" headline="plain"`

---

# Pricing

> Two or three plans side by side, stacked when narrow.

Components · Sections · Pro · https://obsydeui.com/components/pricing

Borderless filled cards share one row grid, so prices, buttons and features line up across them. An optional monthly/yearly switch, shown only when a plan is billed per month, slides a raised thumb on a spring and rolls every price to its new figure digit by digit while the billing line cross-fades; feature lists tick themselves off with drawn checks when the section comes into view. The recommended plan sits on a slightly lifted card with a faint warm light under its top.

## Install

```bash
npx shadcn@latest add @obsyde/pricing
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/pricing/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/segmented/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/effects-kit/`, `components/obsyde/ember/ticker/`, `components/obsyde/ember/blocks-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Pricing } from '@/components/obsyde/ember/pricing/Pricing';

export function Example() {
  return (
    <Pricing />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `plans` | 'ember' \| 'placeholder' | 'ember' | Plans |
| `billing` | 'monthly' \| 'yearly' | 'monthly' | Billing (placeholder plans) |

## Examples

- **Billing switch**: Placeholder plans and round placeholder prices, only to show the monthly and yearly switch. `plans="placeholder"`
- **Yearly**: The same placeholder plans and prices, starting on yearly billing. `plans="placeholder" billing="yearly"`

---

# Feature Grid

> A bento of feature tiles under one light.

Components · Sections · Pro · https://obsydeui.com/components/feature-grid

The pointer carries a single radial light across the whole grid; tiles have no resting edge, but every tile's rim within its reach catches the light at once, so neighbouring rims warm together, and the faces pass a trace of it. Tiles span columns and rows and hold a live piece each: here a gauge, a sparkline and a switch you can use.

## Install

```bash
npx shadcn@latest add @obsyde/feature-grid
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/feature-grid/`, with shared files in `components/obsyde/ember/charts-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/status-kit/`, `components/obsyde/ember/gauge/`, `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/sparkline/`, `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/switch/`, `components/obsyde/ember/blocks-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { FeatureGrid } from '@/components/obsyde/ember/feature-grid/FeatureGrid';

export function Example() {
  return (
    <FeatureGrid />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'bento' \| 'even' | 'bento' | Layout |
| `columns` | number (1–4) | 3 | Columns |
| `radius` | number (80–400) | 240 | Light radius (px) |

## Examples

- **Three columns**. `layout="even"`
- **Volt**. `accent="volt"`

---

# FAQ

> Questions and answers in two columns: the heading on the left, held in place while the list scrolls; the questions on the right.

Components · Sections · Free · https://obsydeui.com/components/faq

A question opens on a spring with its answer rising in as the panel grows. Opening one can close the others; arrow keys move between questions.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/faq.json
```

Files land in `components/obsyde/ember/faq/`, with shared files in `components/obsyde/ember/blocks-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Faq } from '@/components/obsyde/ember/faq/Faq';

export function Example() {
  return (
    <Faq />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `type` | 'multiple' \| 'single' | 'multiple' | Open |
| `firstOpen` | boolean | true | First question open |

## Examples

- **Single open**. `type="single"`

---

# Signup

> A closing section: a headline, a line, and one email pill with its button inside.

Components · Sections · Pro · https://obsydeui.com/components/signup

Errors show inline and clear the moment the address is fixed. On submit the button's bone face closes into a spinner, then draws a check; a warm pulse crosses the field and a few sparks come off it and fall away.

## Install

```bash
npx shadcn@latest add @obsyde/signup
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/signup/`, with shared files in `components/obsyde/ember/blocks-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Signup } from '@/components/obsyde/ember/signup/Signup';

export function Example() {
  return (
    <Signup buttonLabel="Subscribe" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `state` | 'idle' \| 'error' \| 'done' | 'idle' | Start as |
| `buttonLabel` | string | 'Subscribe' | Button label |
| `delay` | number (0–4000) | 1200 | Pretend request (ms) |

## Examples

- **Error**. `state="error"`
- **Done**. `state="done"`

---

# Dock

> A row of drawn icon tiles that swell toward the pointer: each tile rides its own spring toward a cosine falloff of its distance from the hand, so the row grows around it and settles back when it leaves.

Components · Navigation · Pro · https://obsydeui.com/components/dock

The label rises above the largest tile, open items carry a small accent point, and a click hops the tile under a little gravity. Arrow keys walk the row and keyboard focus swells it the same way.

## Install

```bash
npx shadcn@latest add @obsyde/dock
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dock/`, with shared files in `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Dock } from '@/components/obsyde/ember/dock/Dock';

export function Example() {
  return (
    <Dock />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `count` | number (3–8) | 7 | Tiles |
| `size` | number (32–64) | 48 | Tile size |
| `magnify` | number (1–2.6) | 1.75 | Magnify |
| `range` | number (60–240) | 140 | Range |
| `labels` | boolean | true | Labels |

## Examples

- **Large swell**. `magnify={2.2} range={180}`
- **No labels**. `labels={false} count={5}`
- **Volt**. `accent="volt"`

---

# Card Stack

> A deck you throw from the top. The top card follows the finger and leans the way it is pulled, a hairline of heat warming its leading edge; past the line or with enough speed it flies off and the cards behind rise one place, otherwise it springs home.

Components · Navigation · Pro · https://obsydeui.com/components/card-stack

Undo brings the last card back in from the side it left.

## Install

```bash
npx shadcn@latest add @obsyde/card-stack
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/card-stack/`, with shared files in `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { CardStack } from '@/components/obsyde/ember/card-stack/CardStack';

export function Example() {
  return (
    <CardStack />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `count` | number (2–8) | 6 | Cards |
| `threshold` | number (0.15–0.9) | 0.4 | Throw distance |
| `depth` | number (1–5) | 3 | Visible behind |
| `tilt` | number (0–30) | 14 | Lean |

## Examples

- **Eight deep**. `count={8} depth={5}`
- **Light throw**. `threshold={0.22} tilt={20}`
- **Volt**. `accent="volt"`

---

# Context Meter

> One thin bar for how much of a capacity is used, split into segments in grey steps with the remainder faint.

Components · Feedback · Pro · https://obsydeui.com/components/context-meter

Past the warning line the last stretch heats progressively, deep at the line and hot at the end, and the percentage rolls. Segments ride springs when values change; hover or focus opens a breakdown with exact numbers.

## Install

```bash
npx shadcn@latest add @obsyde/context-meter
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/context-meter/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/kit2-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ContextMeter } from '@/components/obsyde/ember/context-meter/ContextMeter';

export function Example() {
  return (
    <ContextMeter />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `capacity` | number (10000–1000000) | 200000 | Capacity |
| `system` | number (0–200000) | 9400 | System |
| `files` | number (0–400000) | 61200 | Files |
| `history` | number (0–400000) | 72800 | History |
| `warnAt` | number (0.5–0.99) | 0.85 | Warn at |

## Examples

- **Near limit**. `files={84000} history={82000}`
- **Full**. `files={98000} history={104000}`
- **Volt**. `accent="volt" files={90000} history={78000}`

---

# Dynamic Island

> A black pill that changes shape with what it is showing: compact, expanded with content, or split into two bubbles.

Components · Feedback · Pro · https://obsydeui.com/components/dynamic-island

Width, height and corner radius ride springs; the second bubble buds off the right end through a gooey filter, so the neck stretches and snaps. Content cross-fades through a blur, clipped to the pill as it moves.

## Install

```bash
npx shadcn@latest add @obsyde/dynamic-island
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dynamic-island/`, with shared files in `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DynamicIsland } from '@/components/obsyde/ember/dynamic-island/DynamicIsland';

export function Example() {
  return (
    <DynamicIsland view="timer" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'idle' \| 'timer' \| 'recording' \| 'done' | 'timer' | View |
| `autoplay` | boolean | false | Cycle views |

## Examples

- **Cycle**: Opens on the timer, then steps through the views on its own until a button is pressed. `autoplay={true} view="timer"`
- **Timer**. `view="timer"`
- **Recording**. `view="recording"`
- **Done**. `view="done"`
- **Volt**. `view="recording" accent="volt"`

---

# Morph Card

> Small cards that open in place into a large panel.

Components · Overlays · Pro · https://obsydeui.com/components/morph-card

The panel is revealed through a clip that springs from the card's own rectangle to the frame, corners and all, with a hairline that runs hot only while it moves; the title travels from the card into the panel and the rest staggers in behind it. Escape or Close folds it back into the exact spot and returns focus to the card.

## Install

```bash
npx shadcn@latest add @obsyde/morph-card
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/morph-card/`, with shared files in `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { MorphCard } from '@/components/obsyde/ember/morph-card/MorphCard';

export function Example() {
  return (
    <MorphCard />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `minCard` | number (120–320) | 180 | Card min width |
| `minHeight` | number (320–640) | 420 | Frame height |

## Examples

- **Wide cards**. `minCard={260}`
- **Tall frame**. `minHeight={520}`
- **Volt**. `accent="volt"`

---

# Sortable List

> Rows you drag into a new order. The lifted row grows by 2% and casts a hairline shadow while its grip runs hot; the others part on springs as it passes their middles, and the drop settles into the gap with a tiny overshoot.

Components · Forms · Free · https://obsydeui.com/components/sortable-list

Space lifts, the arrows move and Space drops, with every step announced; on touch a long press lifts so the page still scrolls.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/sortable-list.json
```

Files land in `components/obsyde/ember/sortable-list/`, with shared files in `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SortableList } from '@/components/obsyde/ember/sortable-list/SortableList';

export function Example() {
  return (
    <SortableList />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `count` | number (3–10) | 6 | Rows |
| `numbered` | boolean | true | Numbered |
| `size` | 'md' \| 'sm' | 'md' | Size |

## Examples

- **Ten rows**. `count={10} size="sm"`
- **Unnumbered**. `numbered={false}`
- **Volt**. `accent="volt"`

---

# ASCII Wake

> A field of Geist Mono characters that sits at rest as faint centred periods.

Components · Effects · Pro · https://obsydeui.com/components/ascii-wake

The pointer leaves a wake: cells behind it run up the ramp . : - = + * # % and heat into the accent, while a damped wave carries a ripple outward through the grid before everything settles back to dots. Glyphs are pre-rendered into one atlas, so a frame is only a handful of image copies.

## Install

```bash
npx shadcn@latest add @obsyde/ascii-wake
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/ascii-wake/`, with shared files in `components/obsyde/ember/type-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { AsciiWake } from '@/components/obsyde/ember/ascii-wake/AsciiWake';

export function Example() {
  return (
    <AsciiWake />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `cell` | number (8–28) | 14 | Cell (px) |
| `linger` | number (0.15–2) | 0.45 | Linger (s) |
| `intro` | boolean | true | Intro sweep |

## Examples

- **Dense**. `cell={10} linger={0.7}`
- **Volt**. `accent="volt"`

---

# Shockwave

> A taut surface you can hit. Each click is an impact: a pressure front leaves the point, fast at first and slowing as it spreads, pushing a faint lattice of points outward so they bunch into a bright compression ring followed by a softer trough and one or two fading ripples.

Components · Effects · Pro · https://obsydeui.com/components/shockwave

Points light only where they are squeezed hardest, a thin band of light rides that ring from white-hot to the accent to deep, and the energy falls off with distance and time. Up to four waves superpose, so two clicks visibly interfere. The surface gives a sub-pixel thump and the content, which stays real interactive DOM, is nudged a pixel or two as the front passes. At rest the field is still and nothing runs. Enter or Space on a control inside sends a wave from that control.

## Install

```bash
npx shadcn@latest add @obsyde/shockwave
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/shockwave/`, with shared files in `components/obsyde/ember/type-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Shockwave } from '@/components/obsyde/ember/shockwave/Shockwave';

export function Example() {
  return (
    <Shockwave />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `field` | 'dots' \| 'grid' \| 'none' | 'dots' | Field |
| `strength` | number (0–24) | 10 | Strength (px) |
| `duration` | number (600–3000) | 1600 | Duration (ms) |
| `density` | number (0.5–2) | 1 | Density |
| `ring` | boolean | true | Light band |

## Examples

- **Strong**. `strength={16} duration={2000}`
- **Many ripples**. `auto={true}`
- **Volt**. `accent="volt"`

---

# Particle Text

> Type sampled into a couple of thousand square particles of bone ash.

Components · Effects · Pro · https://obsydeui.com/components/particle-text

The pointer pushes them aside like a draught of heat, and each one springs back home with a little overshoot; anything in flight glows along the accent ramp and cools as it lands. Give it several strings and the particles fly to their new homes in reading order, the letters re-forming left to right.

## Install

```bash
npx shadcn@latest add @obsyde/particle-text
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/particle-text/`, with shared files in `components/obsyde/ember/type-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ParticleText } from '@/components/obsyde/ember/particle-text/ParticleText';

export function Example() {
  return (
    <ParticleText text="Ember" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `text` | string | 'Ember' | Text (| separates strings) |
| `interval` | number (1200–8000) | 3200 | Hold (ms) |
| `size` | number (48–240) | 150 | Max size (px) |
| `count` | number (1000–3000) | 2200 | Particles |
| `reach` | number (30–160) | 80 | Reach (px) |
| `intro` | boolean | true | Assemble on mount |

## Examples

- **Morphing**. `text="Ember|Ash|Spark" interval={2800}`
- **Volt**. `accent="volt"`

---

# Molten Text

> Display type filled with slowly flowing metal.

Components · Effects · Pro · https://obsydeui.com/components/molten-text

A WebGL shader reads the glyphs from a texture with two blurred copies for a rounded bevel, reflects a striped environment through it as dark chrome, and runs a narrow hot core band through the letters from a drifting noise field. Moving the pointer stirs a swirl into the flow; without WebGL the text keeps a static metal gradient with one thin hot line.

## Install

```bash
npx shadcn@latest add @obsyde/molten-text
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/molten-text/`, with shared files in `components/obsyde/ember/type-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { MoltenText } from '@/components/obsyde/ember/molten-text/MoltenText';

export function Example() {
  return (
    <MoltenText text="Molten" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `text` | string | 'Molten' | Text |
| `heat` | number (0–1) | 0.45 | Heat |
| `speed` | number (0–3) | 1 | Flow speed |
| `size` | number (48–220) | 148 | Size (px) |
| `weight` | number (500–900) | 800 | Weight |
| `interactive` | boolean | true | Stir with pointer |

## Examples

- **Hot**. `heat={1} text="Pour"`
- **Volt**. `accent="volt"`

---

# Marquee

> An endless horizontal loop of any content, repeated as many times as the width needs so the seam never shows, with both edges faded by a mask.

Components · Effects · Free · https://obsydeui.com/components/marquee

Page scroll velocity pushes it faster or back against itself and leans it by up to 6° on a spring, and the separators warm with the push. Hovering, or focus inside, slows it to a stop on a soft spring rather than freezing it.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/marquee.json
```

Files land in `components/obsyde/ember/marquee/`, with shared files in `components/obsyde/ember/type-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Marquee } from '@/components/obsyde/ember/marquee/Marquee';

export function Example() {
  return (
    <Marquee />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `words` | string | 'Actions\|Forms\|Data\|Navigation\|Overlays\|Feedback\|Effects\|Sections' | Words (| separates) |
| `speed` | number (0–300) | 60 | Speed (px/s) |
| `direction` | 'left' \| 'right' | 'left' | Direction |
| `scrollFactor` | number (0–3) | 1 | Scroll push |
| `pauseOnHover` | boolean | true | Slow on hover |
| `size` | number (20–120) | 64 | Size (px) |
| `fade` | number (0–200) | 72 | Edge fade (px) |

## Examples

- **Reverse**. `direction="right"`
- **Volt**. `accent="volt"`

---

# Scroll Reveal Text

> A paragraph that lights word by word as it scrolls through the viewport, from a faint grey to bone.

Components · Effects · Pro · https://obsydeui.com/components/scroll-reveal-text

Progress is tied to the scroll position and eased on a spring, so a wheel notch becomes a short sweep; the word at the leading edge runs hot, and scrolling back up un-lights the words in reverse. The text stays one real paragraph; only colours change.

## Install

```bash
npx shadcn@latest add @obsyde/scroll-reveal-text
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/scroll-reveal-text/`, with shared files in `components/obsyde/ember/type-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ScrollRevealText } from '@/components/obsyde/ember/scroll-reveal-text/ScrollRevealText';

export function Example() {
  return (
    <ScrollRevealText
      text="Words light from faint grey to bone as this paragraph rises through the viewport. The word at the leading edge runs hot, so you can see exactly how far the reading has got; scroll back up and they cool again. Progress follows the scroll position on a spring, so a flick of the wheel still reads as one continuous sweep."
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `text` | string | 'Words light from faint grey to bone as this paragraph rises through the viewport. The word at the leading edge runs hot, so you can see exactly how far the reading has got; scroll back up and they cool again. Progress follows the scroll position on a spring, so a flick of the wheel still reads as one continuous sweep.' | Text |
| `size` | number (18–96) | 40 | Size (px) |
| `weight` | number (300–700) | 500 | Weight |
| `start` | number (0.5–1) | 0.85 | Start line (viewport) |
| `end` | number (0.1–0.6) | 0.4 | End line (viewport) |

## Examples

- **Large**. `size={64} text="Read it as it rises. The edge runs hot; everything behind it settles to bone."`
- **Volt**. `accent="volt"`

---

# Split Flap

> A Solari board. Every cell is a real two-half flap: the top leaf falls about the hinge with rotateX while the next character lands on the bottom leaf, shading as it turns away from the light, and each cell runs through the last few characters of the drum in order until it reaches its target, so a board settles in about a second.

Components · Effects · Pro · https://obsydeui.com/components/split-flap

Columns start in a stagger with a little randomness per flap, the last flap slaps down with a few degrees of overshoot, and the free edge of a falling leaf catches a glint of light.

## Install

```bash
npx shadcn@latest add @obsyde/split-flap
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/split-flap/`, with shared files in `components/obsyde/ember/type-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SplitFlap } from '@/components/obsyde/ember/split-flap/SplitFlap';

export function Example() {
  return (
    <SplitFlap />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `texts` | string | 'SPLIT FLAP' | Text (| cycles) |
| `hold` | number (1500–10000) | 3600 | Hold (ms) |
| `size` | number (20–120) | 56 | Size (px) |
| `flip` | number (30–200) | 74 | Flap time (ms) |
| `stagger` | number (0–150) | 38 | Stagger (ms) |
| `intro` | boolean | true | Flip in on mount |

## Examples

- **Changing**. `texts="ALPHA 01|BETA 02|GAMMA 03|DELTA 04"`
- **Volt**. `accent="volt" texts="VOLT 220|ARC 110|EMBER 380"`

---

# Roadmap Timeline

> An editable project roadmap: a collapsible list of phases, tasks and milestones beside a time canvas that pans and zooms smoothly around the pointer from days to quarters.

Components · Data · Pro · https://obsydeui.com/components/roadmap

Drag bars to move them, their edges to resize, the knob to set progress, and from a bar's end to another bar to link them; with auto-schedule on, dependents spring along when you push their predecessor. Rounded finish-to-start connectors, group summary bars, an accent today line and an optional critical path. Full keyboard path: arrows walk the rows, Shift moves and Alt resizes by a unit, Enter renames, and every change is announced. Under 640px the list becomes a drawer.

## Install

```bash
npx shadcn@latest add @obsyde/roadmap
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/roadmap/`, with shared files in `components/obsyde/ember/segmented/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/actions-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Roadmap } from '@/components/obsyde/ember/roadmap/Roadmap';

export function Example() {
  return (
    <Roadmap />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `zoom` | 'day' \| 'week' \| 'month' \| 'quarter' | 'month' | Zoom |
| `dependencies` | boolean | true | Dependencies |
| `autoSchedule` | boolean | true | Auto-schedule |
| `criticalPath` | boolean | false | Critical path |
| `progress` | boolean | true | Progress |
| `density` | 'compact' \| 'comfortable' | 'compact' | Row density |
| `readOnly` | boolean | false | Read-only |

## Examples

- **Week zoom**: Closer in, with week numbers under the months. `zoom="week"`
- **Quarter overview**: The plan against the year. `zoom="quarter"`
- **Critical path**: The chain with no slack, in the accent. `criticalPath={true}`
- **Read-only**: Comfortable rows; select and pan only. `readOnly={true} density="comfortable"`

---

# Flow Canvas

> A node-based workflow editor on an infinite dot grid.

Components · Data · Pro · https://obsydeui.com/components/flow-canvas

Pan by dragging empty space or holding Space, and zoom smoothly around the pointer. Typed nodes (Trigger, Action, Condition, Delay, Output) are filled cards that lift when selected. Drag from an output to pull out a wire that sags on a spring: inputs glow as it nears, it snaps into the closest one, and ports that can't take it shake. Press Run and a pulse travels from the trigger along the branch the Condition picks. Each node spins, then checks off with its time in mono, and the path it took stays lit. Includes marquee and Shift-click selection, snap to grid, an animated Tidy layout, undo, duplicate, a draggable minimap and a full keyboard path with announcements.

## Install

```bash
npx shadcn@latest add @obsyde/flow-canvas
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/flow-canvas/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { FlowCanvas } from '@/components/obsyde/ember/flow-canvas/FlowCanvas';

export function Example() {
  return (
    <FlowCanvas />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `minimap` | boolean | true | Minimap |
| `snap` | boolean | false | Snap to grid |
| `wireStyle` | 'bezier' \| 'step' | 'bezier' | Wires |
| `grid` | boolean | true | Grid |
| `runSpeed` | '0.5' \| '1' \| '2' | '1' | Run speed |

## Examples

- **Running**: Part-way through a run: the path so far lit, the Delay spinning. `pose="mid"`
- **Branching**: Two conditions; the run takes a different branch at each. `graph="branching" wireStyle="step"`
- **Read-only**: View and run only, after a finished run. `readOnly={true} pose="done" minimap={false}`

---

# Kanban Board

> A task board you can pick cards up from.

Components · Data · Pro · https://obsydeui.com/components/kanban

The held card lifts, casts a deep shadow and tilts with the pointer's speed, pivoting where you hold it; neighbours part on springs, a soft slot opens where it will land and the drop settles with a small overshoot. Shift or Cmd-click several and they travel as a stack. Headers drag to reorder columns, columns collapse to strips, rows split into swimlanes by assignee or priority, and WIP limits run hot when exceeded. Space lifts, the arrows carry a card within and across columns, Space drops, with every move announced. The filter dims cards instead of removing them.

## Install

```bash
npx shadcn@latest add @obsyde/kanban
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/kanban/`, with shared files in `components/obsyde/ember/display-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/kit2-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { KanbanBoard } from '@/components/obsyde/ember/kanban/KanbanBoard';

export function Example() {
  return (
    <KanbanBoard />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `density` | 'comfortable' \| 'compact' | 'comfortable' | Density |
| `swimlanes` | 'none' \| 'assignee' \| 'priority' | 'none' | Swimlanes |
| `wip` | boolean | false | WIP limits |
| `collapsed` | 'none' \| 'backlog' \| 'backlog-done' | 'none' | Collapsed |
| `tilt` | boolean | true | Tilt on drag |
| `readOnly` | boolean | false | Read-only |

## Examples

- **Swimlanes**. `swimlanes="assignee"`
- **Compact**. `density="compact"`
- **WIP limits**. `wip={true} collapsed="backlog"`
- **Read-only**. `readOnly={true} collapsed="backlog-done"`

---

# Calendar

> A full scheduling calendar with Day, Week, Month and Agenda views.

Components · Data · Pro · https://obsydeui.com/components/calendar

Overlapping events share the day side by side, a live now-line runs across the hour grid, and periods slide in the direction of travel. Drag to move with a 15-minute snap, pull the bottom edge to resize, draw on empty time to create, and drag between days in Month; every move springs into place and is announced. Arrow keys walk slots and days, Enter opens or creates, T jumps to today and 1–4 switch views. The mini-month sidebar tucks behind a header toggle when the week needs the room, and below 640px it settles into Day and Agenda.

## Install

```bash
npx shadcn@latest add @obsyde/calendar
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/calendar/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Calendar } from '@/components/obsyde/ember/calendar/Calendar';

export function Example() {
  return (
    <Calendar />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'day' \| 'week' \| 'month' \| 'agenda' | 'week' | View |
| `weekStart` | 'monday' \| 'sunday' | 'monday' | Week starts |
| `timeFormat` | '24' \| '12' | '24' | Clock |
| `miniMonth` | 'auto' \| 'on' \| 'off' | 'auto' | Mini-month |
| `density` | 'comfortable' \| 'compact' | 'comfortable' | Density |
| `schedule` | 'calm' \| 'busy' | 'calm' | Schedule |
| `readOnly` | boolean | false | Read only |

## Examples

- **Month**. `view="month"`
- **Day**. `view="day"`
- **Agenda**. `view="agenda"`
- **Dense week**. `density="compact" schedule="busy"`
- **12-hour**. `timeFormat="12" weekStart="sunday"`

---

# Data Grid

> A spreadsheet-grade grid that stays smooth at 100,000 rows: virtualised body under a sticky header and a frozen first column.

Components · Data · Pro · https://obsydeui.com/components/data-grid

Drag or Shift+arrow a range and it fills with a soft accent wash while the active cell's inset ring glides between cells; the status bar sums what you select. Drag column edges to resize (double-click to fit), click headers to sort, type, Enter or F2 to edit in place with validation, Esc to cancel, Cmd+C copies the range as TSV, paste fills it, Cmd+Z undoes. Loading skeleton rows, empty and recoverable error states.

## Install

```bash
npx shadcn@latest add @obsyde/data-grid
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/data-grid/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/display-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DataGrid } from '@/components/obsyde/ember/data-grid/DataGrid';

export function Example() {
  return (
    <DataGrid />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rows` | number (0–100000) | 10000 | Rows |
| `state` | 'ready' \| 'loading' \| 'empty' \| 'error' | 'ready' | State |
| `density` | 'compact' \| 'comfortable' | 'compact' | Density |
| `frozen` | boolean | true | Freeze first column |
| `editable` | boolean | true | Editable |
| `seed` | number (1–999) | 11 | Seed |

## Examples

- **Comfortable**. `density="comfortable"`
- **100,000 rows**. `rows={100000}`
- **Read-only**. `editable={false}`
- **Loading**. `state="loading"`
- **Empty**. `state="empty"`
- **Error**: Retry loads, then shows the ledger. `state="error"`

---

# Bento Showcase

> An asymmetric bento whose cells run small live pieces: a chart that takes a point each second, a switch you can flip, a counter that rolls, a code snippet a passing pointer sweeps light across, and a build status that moves on.

Components · Sections · Pro · https://obsydeui.com/components/bento

Click a cell and it morphs into an expanded view inside the section: the surface grows out of the cell on a spring, the title travels to the heading and the rest rises in. Escape, the close button or a click outside folds it back. Arrow keys move between cells. The grid is laid out by container queries, so it reads complete before scripts run, and without them each cell shows its whole copy.

## Install

```bash
npx shadcn@latest add @obsyde/bento
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/bento/`, with shared files in `components/obsyde/ember/blocks-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/copy-button/`, `components/obsyde/ember/status/`, `components/obsyde/ember/status-kit/`, `components/obsyde/ember/switch/`, `components/obsyde/ember/actions-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Bento } from '@/components/obsyde/ember/bento/Bento';

export function Example() {
  return (
    <Bento />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `open` | 'none' \| 'chart' \| 'switch' \| 'status' \| 'code' \| 'counter' | 'none' | Open cell |
| `rowHeight` | number (180–280) | 220 | Row height |

## Examples

- **Open cell**: The chart cell expanded. `open="chart"`
- **Open code**. `open="code" accent="volt"`
- **Arc**. `accent="arc"`

---

# Testimonial Wall

> A masonry wall of quotes in three or four columns, each a seamless loop drifting slowly, alternate columns in opposite directions.

Components · Sections · Pro · https://obsydeui.com/components/testimonials

A column under the pointer slows to a stop, and the quote under it warms: its text turns to bone over a faint accent glow. A filter row re-flows the wall: quotes that leave fade, the rest glide to their new places. A pause control stops the drift, and with reduced motion the wall is a still masonry showing every quote. Names and companies in the demo are fictional.

## Install

```bash
npx shadcn@latest add @obsyde/testimonials
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/testimonials/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/segmented/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/fire-kit/`, `components/obsyde/ember/blocks-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { TestimonialWall } from '@/components/obsyde/ember/testimonials/TestimonialWall';

export function Example() {
  return (
    <TestimonialWall />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `filter` | 'all' \| 'engineers' \| 'designers' \| 'founders' | 'all' | Filter |
| `columns` | number (2–4) | 4 | Columns |
| `speed` | number (6–48) | 18 | Speed (px/s) |
| `playing` | boolean | true | Playing |

## Examples

- **Designers**: Filtered to designers. `filter="designers"`
- **Three columns**. `columns={3} speed={12}`
- **Paused**. `playing={false} accent="arc"`

---

# Diff Viewer

> A code review diff that morphs between split and unified on one spring: every line glides to its new place and width, numbers fold into a single gutter, padding fills fade.

Components · Data · Pro · https://obsydeui.com/components/diff-viewer

Word-level marks inside changed lines, monochrome syntax (weight and grey, no hues), long unchanged runs folded behind “Show 24 lines”. Click or drag the gutter to select a range, Shift to extend; hovering a line shows a small comment button that opens an inline composer, and threads and replies open in place while the lines below glide down. Arrow keys walk the gutter, C comments.

## Install

```bash
npx shadcn@latest add @obsyde/diff-viewer
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/diff-viewer/`, with shared files in `components/obsyde/ember/segmented/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/display-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DiffViewer } from '@/components/obsyde/ember/diff-viewer/DiffViewer';

export function Example() {
  return (
    <DiffViewer />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `mode` | 'split' \| 'unified' | 'split' | Layout |
| `context` | number (0–12) | 3 | Context lines |
| `wordDiff` | boolean | true | Word highlights |
| `comments` | boolean | true | Review thread |
| `state` | 'ready' \| 'loading' \| 'empty' \| 'error' | 'ready' | State |

## Examples

- **Unified**. `mode="unified"`
- **More context**. `context={8}`
- **Line changes only**. `wordDiff={false} comments={false}`
- **Loading**. `state="loading"`
- **No changes**. `state="empty"`
- **Error**: Retry loads, then shows the diff. `state="error"`

---

# Gantt

> A project timeline you work by hand. Drag a bar to move it and its edges to resize; dependency arrows reroute live as you drag, turning dashed red the moment a successor starts before its predecessor ends.

Components · Data · Pro · https://obsydeui.com/components/gantt

Milestones are diamonds, groups carry summary bars, and today is a single accent line. Day, week and month zoom on a spring, anchored on the middle of the view, with the header labels cross-fading as the scale passes them. Collapse a phase and its rows glide up into it. Keyboard: arrows walk the tree, Shift moves and Alt resizes by a unit, Enter folds, + and − zoom, T jumps to today.

## Install

```bash
npx shadcn@latest add @obsyde/gantt
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/gantt/`, with shared files in `components/obsyde/ember/segmented/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/display-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Gantt } from '@/components/obsyde/ember/gantt/Gantt';

export function Example() {
  return (
    <Gantt />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `zoom` | 'day' \| 'week' \| 'month' | 'week' | Zoom |
| `dependencies` | boolean | true | Dependencies |
| `collapsed` | 'none' \| 'discovery' \| 'all' | 'none' | Folded |
| `readOnly` | boolean | false | Read-only |
| `state` | 'ready' \| 'loading' \| 'empty' \| 'error' | 'ready' | State |

## Examples

- **Day zoom**. `zoom="day"`
- **Month zoom**. `zoom="month"`
- **Earlier phases folded**. `collapsed="discovery"`
- **Read-only**. `readOnly={true}`
- **Loading**. `state="loading"`
- **Empty**. `state="empty"`

---

# Changelog

> Release notes with a version rail held beside them.

Components · Sections · Pro · https://obsydeui.com/components/changelog

The rail's marker slides with the reading position, continuously between versions, and the rail is a scrubber: drag along it to run through releases, or pick a version to jump to it. Entries carry quiet New, Improved and Fixed chips, details behind a disclosure that opens on a spring, and a button that copies a link to the entry. The list can scroll inside the section or with the page; loading, empty and error states are built in.

## Install

```bash
npx shadcn@latest add @obsyde/changelog
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/changelog/`, with shared files in `components/obsyde/ember/blocks-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Changelog } from '@/components/obsyde/ember/changelog/Changelog';

export function Example() {
  return (
    <Changelog />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `state` | 'ready' \| 'loading' \| 'empty' \| 'error' | 'ready' | State |
| `details` | boolean | false | Newest details open |
| `height` | number (420–720) | 600 | List height |

## Examples

- **Details open**. `details={true}`
- **Loading**. `state="loading"`
- **Error**: Try again loads the releases. `state="error" accent="arc"`

---

# Comparison Table

> Plans side by side, feature by feature, on filled rows in alternate bands with no borders.

Components · Sections · Pro · https://obsydeui.com/components/comparison

The plan header condenses into a bar that holds at the top while the table scrolls; the pointer draws a crosshair of row and column washes that glide between cells; a click on a plan focuses its column and dims the others. Categories fold away on a spring, feature names carry tooltips, and values read as a check, a dash or text. On narrow screens the table becomes one swipeable card per plan, kept in step with a segmented plan picker.

## Install

```bash
npx shadcn@latest add @obsyde/comparison
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/comparison/`, with shared files in `components/obsyde/ember/actions-kit/`, `components/obsyde/ember/segmented/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/tooltip/`, `components/obsyde/ember/blocks-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Comparison } from '@/components/obsyde/ember/comparison/Comparison';

export function Example() {
  return (
    <Comparison />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `focus` | 'none' \| 'free' \| 'pro' \| 'team' | 'none' | Focused plan |
| `collapsed` | boolean | false | Fold support |
| `height` | number (420–760) | 600 | Table height |

## Examples

- **Pro in focus**. `focus="pro"`
- **Support folded**. `collapsed={true} accent="volt"`

---

# Terminal

> A scripted terminal session with a real hand on the keys: commands type at a human cadence (quick runs, a beat between words, the odd typo backspaced), then output streams in, a progress bar redrawn in place, braille spinners, a build table, test passes in the accent and failures in red.

Components · Feedback · Pro · https://obsydeui.com/components/terminal

The block cursor blinks when idle, holds solid while keys arrive, goes hollow when unfocused and waits unlit while a command runs. Pause, replay, 1×/2×/4× speed and copy-command; the log sticks to the bottom until you scroll up, then offers a jump back. When the script ends the prompt is yours: help, ls, clear, history, Tab completion, ↑ for history, Ctrl+C and Ctrl+L.

## Install

```bash
npx shadcn@latest add @obsyde/terminal
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/terminal/`, with shared files in `components/obsyde/ember/display-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Terminal } from '@/components/obsyde/ember/terminal/Terminal';

export function Example() {
  return (
    <Terminal />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `start` | 'play' \| 'transcript' \| 'prompt' | 'play' | Start |
| `speed` | '1' \| '2' \| '4' | '1' | Speed |
| `state` | 'live' \| 'connecting' \| 'disconnected' | 'live' | State |

## Examples

- **4× speed**. `speed="4"`
- **Finished session**: The whole run, then a live prompt. `start="transcript"`
- **Live prompt**. `start="prompt"`
- **Connecting**. `state="connecting"`
- **Disconnected**: Reconnect connects, then the session plays. `state="disconnected"`

---

# Glass Lens

> A pane of glass you can pick up, drawn in WebGL.

Components · Effects · Pro · https://obsydeui.com/components/glass-lens

It magnifies what is under it, folds the scene in from beyond its rim and splits colour at the edge, with a lit edge toward the light, a Fresnel sheen, a soft contact shadow and a faint accent caustic that shifts as the glass moves. Drag it, throw it, or tap where it should go: it squashes with speed and springs as it lands. It can also follow the pointer, and arrow keys move it. Disc, pill or rounded square, with props for size, refraction, dispersion and magnification. The lens refracts a canvas you paint (or an image), not live DOM; without WebGL it falls back to a CSS backdrop-filter lens over the same scene.

## Install

```bash
npx shadcn@latest add @obsyde/glass-lens
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/glass-lens/`, with shared files in `components/obsyde/ember/fire-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { GlassLens } from '@/components/obsyde/ember/glass-lens/GlassLens';

export function Example() {
  return (
    <GlassLens />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `shape` | 'disc' \| 'pill' \| 'square' | 'disc' | Shape |
| `size` | number (120–340) | 220 | Size (px) |
| `refraction` | number (0–1) | 0.6 | Refraction |
| `dispersion` | number (0–1) | 0.5 | Dispersion |
| `magnify` | number (1–2.5) | 1.5 | Magnify |
| `follow` | boolean | false | Follow pointer |
| `scene` | 'specimen' \| 'data' | 'specimen' | Scene |
| `webgl` | boolean | true | WebGL |

## Examples

- **Pill**. `shape="pill" size={300} magnify={1.3}`
- **Figures, strong rim**. `scene="data" refraction={0.9} dispersion={0.9} accent="arc"`
- **Follows the pointer**. `follow={true} size={180} accent="volt"`
- **CSS fallback**: The backdrop-filter lens used without WebGL. `webgl={false}`

---

# Rich Text Editor

> A writing surface on plain contenteditable, no editor library.

Components · Forms · Pro · https://obsydeui.com/components/rich-text

Markdown as you type: #, ##, ### for headings, - and 1. for lists, > for a quote, ``` for code, --- for a divider, and **bold**, *italic*, `code`, ~~strike~~ inline. Select text and a small bubble springs to it, gliding as the selection grows: bold, italic, link (with an inline address field) and code. Type / for a block menu that filters as you type and runs on the arrows. Undo and redo cover every change, paste is cleaned down to structure and emphasis (Google Docs’ fake bold included), and a mono footer counts words, characters and reading time.

## Install

```bash
npx shadcn@latest add @obsyde/rich-text
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/rich-text/`, with shared files in `components/obsyde/ember/display-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RichTextEditor } from '@/components/obsyde/ember/rich-text/RichTextEditor';

export function Example() {
  return (
    <RichTextEditor />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `document` | 'notes' \| 'blank' | 'notes' | Document |
| `readOnly` | boolean | false | Read-only |
| `showCount` | boolean | true | Word count |
| `state` | 'ready' \| 'loading' \| 'error' | 'ready' | State |

## Examples

- **Blank page**. `document="blank"`
- **Read-only**. `readOnly={true}`
- **Loading**. `state="loading"`
- **Error**: Retry loads, then opens the notes. `state="error"`

---

# Shard Rating

> A rating input whose glyphs are cut glass.

Components · Forms · Pro · https://obsydeui.com/components/shard-rating

Each lights from inside up to the value, halves included; hover previews with a short stagger and a press sends a light catch across the glass. Shard, star, heart and dot presets, any SVG shape, or your own renderer through the glyph prop.

## Install

```bash
npx shadcn@latest add @obsyde/shard-rating
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/shard-rating/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ShardRating } from '@/components/obsyde/ember/shard-rating/ShardRating';

export function Example() {
  return (
    <ShardRating />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `glyph` | 'shard' \| 'star' \| 'heart' \| 'dot' | 'shard' | Glyph |
| `half` | boolean | true | Half steps |
| `size` | 'sm' \| 'md' \| 'lg' | 'lg' | Size |
| `readOnly` | boolean | false | Read only |

## Examples

- **Stars**. `glyph="star" value={4}`
- **Hearts**. `glyph="heart" half={false} value={3}`
- **Read only**. `readOnly={true}`

---

# Reaction Bar

> Chat reactions with rolling counts, a searchable picker and super reactions: a warm chip of their own, sent from the picker's Super toggle or by pressing and holding a chip, with a short burst of floating copies.

Components · Actions · Pro · https://obsydeui.com/components/reaction-bar

## Install

```bash
npx shadcn@latest add @obsyde/reaction-bar
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/reaction-bar/`, with shared files in `components/obsyde/ember/tooltip/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/display-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ReactionBar } from '@/components/obsyde/ember/reaction-bar/ReactionBar';

export function Example() {
  return (
    <ReactionBar />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `multiple` | boolean | true | Multiple reactions |
| `remote` | boolean | true | Remote activity |

## Examples

- **One reaction**. `multiple={false}`
- **First reaction**. `empty={true} remote={false}`

---

# Hotkey Recorder

> A field that records a keyboard shortcut.

Components · Forms · Pro · https://obsydeui.com/components/hotkey-recorder

Hold any keys together, modifiers, letters and numbers, and the chord is set when you let go; conflicts and system-reserved shortcuts are refused with a shake.

## Install

```bash
npx shadcn@latest add @obsyde/hotkey-recorder
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/hotkey-recorder/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/kbd/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { HotkeyRecorder } from '@/components/obsyde/ember/hotkey-recorder/HotkeyRecorder';

export function Example() {
  return (
    <HotkeyRecorder />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `allowSingle` | boolean | false | Allow single keys |
| `showReset` | boolean | true | Reset defaults |

## Examples

- **Single keys**. `allowSingle={true}`
- **Unassigned**. `empty={true}`

---

# Notification Inbox

> A bell with an inbox behind it. The panel unfolds out of the bell and folds back into it; tabs slide without moving the panel; new arrivals swing the bell and roll the count; rows archive with a swipe or E.

Components · Overlays · Pro · https://obsydeui.com/components/inbox

## Install

```bash
npx shadcn@latest add @obsyde/inbox
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/inbox/`, with shared files in `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Inbox } from '@/components/obsyde/ember/inbox/Inbox';

export function Example() {
  return (
    <Inbox />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `arrival` | boolean | true | New arrivals |
| `grouping` | boolean | true | Group by day |
| `density` | 'comfortable' \| 'compact' | 'comfortable' | Density |

## Examples

- **Caught up**. `state="empty" arrival={false}`
- **Loading**. `state="loading"`
- **Connection error**. `state="error"`

---

# Profile Peek

> A profile card that grows from its mention, carrying the avatar and name into place, then glides between people without closing.

Components · Overlays · Pro · https://obsydeui.com/components/profile-peek

## Install

```bash
npx shadcn@latest add @obsyde/profile-peek
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/profile-peek/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/blocks-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ProfilePeek } from '@/components/obsyde/ember/profile-peek/ProfilePeek';

export function Example() {
  return (
    <ProfilePeek />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `placement` | 'auto' \| 'top' \| 'bottom' | 'auto' | Placement |
| `delay` | number (0–1000) | 350 | Hover delay |
| `showStats` | boolean | true | Show stats |

## Examples

- **Thread only**. `initial=""`
- **Without stats**. `showStats={false}`

---

# Onboarding Checklist

> A workspace checklist with drawing checks, a spring progress ring, asynchronous actions and a shared-surface collapse into a completion pill.

Components · Feedback · Pro · https://obsydeui.com/components/onboarding-checklist

## Install

```bash
npx shadcn@latest add @obsyde/onboarding-checklist
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/onboarding-checklist/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/blocks-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { OnboardingChecklist } from '@/components/obsyde/ember/onboarding-checklist/OnboardingChecklist';

export function Example() {
  return (
    <OnboardingChecklist />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `stepCount` | number (3–6) | 5 | Step count |
| `startAt` | number (1–6) | 1 | Start at step |

## Examples

- **Halfway there**. `startAt={3}`
- **Quick setup**. `stepCount={3}`

---

# Before / After

> Two crisp DOM layers divided by a spring-driven heat seam, with pointer momentum, round falling sparks and keyboard control.

Components · Effects · Pro · https://obsydeui.com/components/before-after

## Install

```bash
npx shadcn@latest add @obsyde/before-after
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/before-after/`, with shared files in `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/reaction-bar/`, `components/obsyde/ember/kit2-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BeforeAfter } from '@/components/obsyde/ember/before-after/BeforeAfter';

export function Example() {
  return (
    <BeforeAfter />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `orientation` | 'horizontal' \| 'vertical' | 'horizontal' | Orientation |
| `initialPosition` | number (0–100) | 50 | Initial position |
| `glow` | boolean | true | Seam glow |

## Examples

- **Typography**. `example="type"`
- **Top and bottom**. `orientation="vertical"`

---

# Presence

> A live avatar stack that fans on a spring, a people popover, and data-driven remote cursors with click ripples and idle fading.

Components · Feedback · Pro · https://obsydeui.com/components/presence

## Install

```bash
npx shadcn@latest add @obsyde/presence
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/presence/`, with shared files in `components/obsyde/ember/tooltip/`, `components/obsyde/ember/shared/`, `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/tactile-kit/`, `components/obsyde/ember/reaction-bar/`, `components/obsyde/ember/kit2-kit/`, `components/obsyde/ember/display-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Presence } from '@/components/obsyde/ember/presence/Presence';

export function Example() {
  return (
    <Presence />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `userCount` | number (0–8) | 7 | People |
| `cursors` | boolean | true | Live cursors |
| `fan` | boolean | true | Fan on hover |

## Examples

- **Small team**. `userCount={3}`
- **Just you**. `userCount={0} cursors={false}`

---

# Waveform Player

> A real WebAudio player for a deterministic forty-second synthesized clip, with a DPR waveform, heat-following playhead, chapters, scrubbing, speed and volume.

Components · Data · Pro · https://obsydeui.com/components/waveform-player

## Install

```bash
npx shadcn@latest add @obsyde/waveform-player
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/waveform-player/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/kit2-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { WaveformPlayer } from '@/components/obsyde/ember/waveform-player/WaveformPlayer';

export function Example() {
  return (
    <WaveformPlayer />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `barWidth` | number (2–6) | 2 | Bar width |
| `showChapters` | boolean | true | Chapters |
| `glow` | boolean | true | Accent glow |

## Examples

- **Wide bars**. `barWidth={4}`
- **Quiet waveform**. `glow={false} showChapters={false}`

---

# Guided Tour

> A product tour with a spring-morphing SVG spotlight, a following coach mark, interactive targets, keyboard navigation and focus restoration.

Components · Overlays · Pro · https://obsydeui.com/components/guided-tour

## Install

```bash
npx shadcn@latest add @obsyde/guided-tour
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/guided-tour/`, with shared files in `components/obsyde/ember/shared/`, `components/obsyde/ember/overlays-kit/`, `components/obsyde/ember/kit2-kit/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { GuidedTour } from '@/components/obsyde/ember/guided-tour/GuidedTour';

export function Example() {
  return (
    <GuidedTour />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `dim` | number (0.3–0.95) | 0.68 | Dim strength |
| `padding` | number (0–24) | 9 | Target padding |
| `interactive` | boolean | true | Interactive targets |

## Examples

- **Workspace only**. `initial={false}`
- **Quiet spotlight**. `dim={0.5} padding={14}`

---

# Pulse Line

> A live line whose newest point is the only hot thing on screen.

Charts · Trends · Pro · https://obsydeui.com/charts/pulse-line

Points arrive on an interval and the line scrolls left under a head that never leaves the plot: in glide it runs at the stream’s own pace about one point behind the newest, like a seismograph; in step it eases one point left as each lands. The y scale eases and axis ticks fade rather than jump, and the head breathes like a pilot light while points keep coming and goes ash and still when they stop. The newest stretch carries a heat trail that cools with age. A crosshair glides between points under the pointer, a finger or the arrow keys, reaching every point from the first to the newest; while you read, the picture holds on a real point and catches up in one swell when you let go, and the header rolls to the value and how long ago it was. Optional extras: dashed min, max, average and median lines that either glide with the visible window or ease once per point, with pills that never overlap; a threshold past which the line runs hot over a hatched zone, draggable along the axis or with the arrow keys; a stream that holds while you read it; a floating tooltip; dotted or hatched backgrounds; and loading and empty states. It pauses off screen and in hidden tabs and steps without motion under reduced motion.

## Install

```bash
npx shadcn@latest add @obsyde/pulse-line
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/pulse-line/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { PulseLine } from '@/components/obsyde/ember/pulse-line/PulseLine';

export function Example() {
  return (
    <PulseLine live />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Signal' | Label |
| `unit` | string | — | Unit |
| `live` | boolean | true | Live |
| `intervalMs` | number (100–5000) | 1000 | Interval (ms) |
| `motion` | 'glide' \| 'step' | 'glide' | Motion |
| `heat` | boolean | true | Heat trail |
| `fill` | 'gradient' \| 'none' | 'gradient' | Fill |
| `refLines` | 'none' \| 'min-max' \| 'avg' \| 'median' \| 'all' | 'none' | Reference lines |
| `refMotion` | 'fixed' \| 'live' | 'fixed' | Reference motion |
| `threshold` | 'none' \| 'above' \| 'below' | 'none' | Threshold |
| `thresholdValue` | number (0–300) | 45 | Threshold value |
| `pauseOnScrub` | boolean | false | Pause on scrub |
| `showAxis` | boolean | true | Axis |
| `tooltip` | 'none' \| 'panel' | 'none' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (120–480) | 240 | Height |
| `points` | number (8–240) | 60 | Points |
| `seed` | number (1–999) | 7 | Seed |

## Examples

- **Live**: A new point every second. `live={true}`
- **Static**: The same series, standing still: the head goes ash. `live={false}`
- **Fast**: A point every 300ms across 120 points. `live={true} intervalMs={300} points={120}`
- **Step motion**: The window eases one point left as each point lands. `live={true} motion="step"`
- **Empty**. `state="empty"`
- **Live min / max lines**: Min, max and average glide with the visible window. `live={true} refLines="all" refMotion="live"`
- **Threshold**: Above 45 the line runs in the accent. Drag the value on the axis. `live={true} threshold="above" thresholdValue={45}`
- **Pause on scrub**: The stream holds while the crosshair is out. `live={true} pauseOnScrub={true} curve="linear"`
- **Quiet line**: No fill, no heat trail, dots background, a dashed crosshair and a floating panel. `live={true} heat={false} fill="none" background="dots" crosshair="dashed" dots="ring" tooltip="panel"`
- **Step**: A stepped signal over hatching, a gradient crosshair. `live={true} curve="step" background="hatch" crosshair="gradient" intervalMs={700}`
- **Loading**. `status="loading"`

---

# Scrub Bars

> A bar chart you read by dragging across it.

Charts · Comparison · Pro · https://obsydeui.com/charts/scrub-bars

One bar is lit in the accent, one big number follows it with heavier digits in the higher places, and a dashed line at its height brightens every bar that rises above it while the rest step back. Press and drag to sum a span: the column stays lit and the header reads the range, its sum and the change. Shift with the arrows jumps between the high, the low and crossings. Bars land on springs that get heavier with their value. Optional extras: dashed min, max and average lines with pills, a threshold past which bars run hot, event badges, the previous period as dashed outlines or side-by-side hatched bars with the change beside the number, a profit-and-loss run around zero, textured bars, value labels, a floating tooltip, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/scrub-bars
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/scrub-bars/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ScrubBars } from '@/components/obsyde/ember/scrub-bars/ScrubBars';

export function Example() {
  return (
    <ScrubBars bars={24} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `label` | string | 'Total' | Label |
| `unit` | string | — | Unit |
| `bars` | number (3–96) | 24 | Bars |
| `labels` | string | — | Bar labels |
| `scrubLine` | boolean | true | Scrub line |
| `refLines` | 'none' \| 'min-max' \| 'avg' \| 'median' \| 'all' | 'none' | Reference lines |
| `threshold` | 'none' \| 'above' \| 'below' | 'none' | Threshold |
| `thresholdValue` | number (0–300) | 180 | Threshold value |
| `annotations` | boolean | false | Annotations |
| `compare` | boolean | false | Compare |
| `compareStyle` | 'outline' \| 'bars' | 'outline' | Compare style |
| `negative` | boolean | false | Profit / loss |
| `readout` | 'corner' \| 'tooltip' | 'corner' | Readout |
| `radius` | number (0–8) | 3 | Corner radius |
| `showAxis` | boolean | true | Axes |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `height` | number (120–480) | 220 | Height |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Default**: 24 bars. `bars={24}`
- **Few**: Seven bars, one per weekday. `bars={7} labels="Mon,Tue,Wed,Thu,Fri,Sat,Sun"`
- **Many**: 48 bars. `bars={48}`
- **Empty**. `state="empty"`
- **Min / max lines**: Dashed min, max and average with value pills. `refLines="all"`
- **Threshold**: Above 180 every bar runs in the accent. `threshold="above" thresholdValue={180}`
- **Compare**: Dashed outlines of the previous period; the number shows the change. `compare={true}`
- **Tooltip**: A floating readout over the lit bar, with two event badges. `readout="tooltip" annotations={true}`
- **Side by side**: The previous period as hatched bars beside this one. `bars={12} compare={true} compareStyle="bars" valueLabels={true}`
- **Profit and loss**: A run around zero: losses grow down from a brighter zero line. `bars={30} negative={true} unit=""`
- **Textured**: Hatched resting bars on dots; the lit bar stays solid. `bars={20} pattern="diagonal-up" background="dots" radius={5}`

---

# Sparkline

> A word-sized line, area or bar run that sits on the text baseline with its latest value beside it, the newest point a hot dot and the low and high marked by 3px ticks.

Charts · Trends · Pro · https://obsydeui.com/charts/sparkline

Point, drag a finger or use the arrow keys: a marker springs to the nearest point and the value rolls to it. Two hover treatments: everything after the marker steps back, or the local segment (the whole line drops to half and only the stretch round the cursor stays bright). Types: line, area with a gradient or a solid fill, step, bars and negative bars. Crosshair styles, three hover feels (spring, snappy, none), dashed average or median hairlines, a threshold past which it runs hot, a dashed ghost of the previous period with the change beside the value, and rows or KPI cards that scrub together through one shared store. Built for tables and dense grids: one page-wide observer, one path per series, no loops at rest.

## Install

```bash
npx shadcn@latest add @obsyde/sparkline
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/sparkline/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Sparkline } from '@/components/obsyde/ember/sparkline/Sparkline';

export function Example() {
  return (
    <Sparkline type="line" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'rows' \| 'kpi' \| 'variants' \| 'crosshairs' \| 'feel' \| 'table' \| 'grid' | 'rows' | View |
| `type` | 'line' \| 'area' \| 'area-solid' \| 'step' \| 'bars' | 'line' | Type |
| `highlight` | 'after' \| 'segment' \| 'none' | 'after' | Hover |
| `feel` | 'spring' \| 'snappy' \| 'none' | 'spring' | Feel |
| `endDot` | boolean | true | End dot |
| `sync` | boolean | false | Sync rows |
| `width` | number (48–240) | 96 | Width |
| `height` | number (16–48) | 24 | Height |
| `showValue` | boolean | true | Show value |
| `unit` | string | — | Unit |
| `refLines` | 'none' \| 'avg' \| 'median' \| 'min-max' \| 'all' | 'none' | Reference lines |
| `threshold` | 'none' \| 'above' \| 'below' | 'none' | Threshold |
| `thresholdValue` | number (0–300) | 60 | Threshold value |
| `compare` | boolean | false | Compare |
| `crosshair` | 'none' \| 'solid' \| 'dashed' \| 'gradient' | 'none' | Crosshair |
| `curve` | 'monotone' \| 'linear' \| 'catmull' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `live` | boolean | false | Live |
| `points` | number (4–128) | 32 | Points |
| `seed` | number (1–999) | 1 | Seed |

## Examples

- **Line**. `view="rows" type="line"`
- **Bars**. `view="rows" type="bars"`
- **Wide**. `view="rows" type="line" width={200} points={64}`
- **Without value**. `view="rows" type="line" showValue={false}`
- **Average line**: A dashed hairline at each row’s average. `view="rows" refLines="avg"`
- **Threshold**: Bars above 70 run in the accent. `view="rows" type="bars" threshold="above" thresholdValue={70}`
- **Compare**: The previous period as a dashed ghost, and the change beside the value. `view="rows" compare={true} width={120}`
- **KPI cards**: The number, the day and the change follow the marker; the cards scrub together. `view="kpi" sync={true} highlight="segment" crosshair="dashed" points={24}`
- **Variants**: Line, area gradient, area solid, step, bars and negative bars, local-segment hover. `view="variants" highlight="segment" crosshair="dashed" points={32}`
- **Crosshair styles**: Dashed, solid and gradient. `view="crosshairs" highlight="segment" type="line"`
- **Hover feel**: Spring, snappy and no spring, synced so you feel the difference side by side. `view="feel" highlight="segment" type="area"`
- **Synced rows**: Three rows on one store: scrub any row and all three markers and values move. `view="rows" sync={true} type="area" width={160} highlight="segment" crosshair="dashed"`
- **In a table**: Fixed-width sparklines inline in table rows. `view="table" type="line" points={30} highlight="after"`
- **Dense grid**: 64 sparklines on one page-wide observer. `view="grid" type="line" points={32} highlight="segment"`

---

# Gauge

> A dial of 61 notches with a needle that has mass: it sweeps up from the minimum on a loose spring, overshoots and settles, lighting notches as it passes and flashing the one it just crossed.

Charts · Metrics · Pro · https://obsydeui.com/charts/gauge

New values continue from wherever the needle is, and the readout rolls on per-digit mass. Options: needle styles (a stub at the rim, a line floating clear of the readout, a tapered blade, a triangle outside the rim, or none); an inner ruler whose ticks and labels brighten as the needle passes; a limit past which the notches burn in the accent over a hatched zone and the number heats; a conic wedge that brightens toward the value; loading and empty states. Interactive gauges are sliders you drag by angle or step with the keys.

## Install

```bash
npx shadcn@latest add @obsyde/gauge
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/gauge/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Gauge } from '@/components/obsyde/ember/gauge/Gauge';

export function Example() {
  return (
    <Gauge value={62} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number (0–240) | 62 | Value |
| `min` | number (0–100) | 0 | Min |
| `max` | number (10–1000) | 100 | Max |
| `needle` | 'stub' \| 'line' \| 'tapered' \| 'triangle' \| 'none' | 'stub' | Needle |
| `ruler` | boolean | false | Ruler |
| `limit` | number (-1–1000) | -1 | Limit (−1 off) |
| `fill` | 'none' \| 'conic' | 'none' | Fill |
| `unit` | string | '%' | Unit |
| `label` | string | — | Label |
| `interactive` | boolean | false | Interactive |
| `size` | number (160–320) | 220 | Size |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |

## Examples

- **Default**. `value={62}`
- **Interactive**. `value={62} interactive={true}`
- **Low**. `value={8}`
- **Custom range**. `min={0} max={240} value={180} unit="km/h"`
- **Ruler**: A floating line needle over an inner ruler that brightens as it passes. `value={58} needle="line" ruler={true}`
- **Over the limit**: Past 80 the notches burn over a hatched zone. `value={88} limit={80} needle="triangle" label="Load"`
- **Conic**: A wedge that brightens toward a tapered needle. `value={71} fill="conic" needle="tapered"`
- **Loading**. `value={62} status="loading"`

---

# Heat Grid

> Seven days by N weeks of cells in five quiet bone levels.

Charts · Calendars · Pro · https://obsydeui.com/charts/heat-grid

Point, drag a finger or use the arrow keys to light one cell: it grows a little while the panel reads its day and value; press and drag, or Shift with the arrows, to select a rectangle whose sum the readout rolls to. Hover a level in the legend and only its cells stay. Cells enter as a column wave on the shared reveal curve. Options: a dot calendar or squircle cells, the blackbody heat ramp instead of bone, a texture per level shared with the legend, a gradient legend with a caret for the hovered cell, quarter separators that fade at both ends, faded weekends, an opt-in row and column highlight, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/heat-grid
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/heat-grid/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { HeatGrid } from '@/components/obsyde/ember/heat-grid/HeatGrid';

export function Example() {
  return (
    <HeatGrid />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `weeks` | number (4–104) | 26 | Weeks |
| `density` | number (0.05–1) | 0.85 | Density |
| `cell` | 'square' \| 'dot' \| 'squircle' | 'square' | Cell |
| `palette` | 'mono' \| 'heat' | 'mono' | Palette |
| `patterns` | boolean | false | Level patterns |
| `legend` | 'levels' \| 'gradient' \| 'none' | 'levels' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `crosshair` | boolean | false | Row & column |
| `separators` | boolean | false | Separators |
| `weekends` | 'normal' \| 'faded' | 'normal' | Weekends |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `unit` | string | — | Unit |
| `seed` | number (1–999) | 1 | Seed |

## Examples

- **Short**. `weeks={12}`
- **Long**. `weeks={52} separators={true}`
- **Sparse**: Most days empty. `seed={4} density={0.22}`
- **Dot calendar**: Round cells, faded weekends, quarter separators. `cell="dot" weekends="faded" separators={true} weeks={39}`
- **Pattern levels**: Each level its own texture, shared with the legend. `patterns={true} cell="squircle"`
- **Gradient legend**: A continuous scale with a caret for the hovered cell. `legend="gradient" weeks={20} palette="heat"`
- **Loading**. `status="loading"`

---

# Strata

> A stacked area chart you can take apart.

Charts · Trends · Pro · https://obsydeui.com/charts/strata

Point at a layer to make it live: its top line brightens while the others step back, and the header rolls to its value and share. Click it, or pick it with Up and Down and press Enter, to isolate it (now it carries the accent): the others collapse to the baseline, it drops to sit on the baseline and the axis re-fits, all in one motion because both edges of every band tween together. Escape restores. Stack the values, show them as shares of 100%, or centre them as a stream; fill the layers with graded greys, a texture per layer or a fade. Optional extras: a legend row or a list with rolling values and shares (hover isolates both ways, click hides, hold locks), dashed min, max and average lines over the total, a threshold past which the top of the stack runs hot, event badges, a floating or corner tooltip, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/strata
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/strata/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Strata } from '@/components/obsyde/ember/strata/Strata';

export function Example() {
  return (
    <Strata />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `series` | number (1–8) | 4 | Series |
| `offset` | 'stacked' \| 'percent' \| 'stream' | 'stacked' | Offset |
| `fill` | 'solid' \| 'pattern' \| 'gradient' | 'solid' | Fill |
| `legend` | 'none' \| 'row' \| 'list' | 'none' | Legend |
| `unit` | string | — | Unit |
| `refLines` | 'none' \| 'min-max' \| 'avg' \| 'median' \| 'all' | 'none' | Reference lines |
| `threshold` | 'none' \| 'above' \| 'below' | 'none' | Threshold |
| `thresholdValue` | number (0–300) | 120 | Threshold value |
| `annotations` | boolean | false | Annotations |
| `readout` | 'corner' \| 'tooltip' | 'corner' | Readout |
| `showAxis` | boolean | true | Axes |
| `tooltip` | 'none' \| 'panel' \| 'corner' | 'none' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'rise' \| 'sweep' \| 'fade' \| 'none' | 'rise' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (160–400) | 240 | Height |
| `points` | number (8–200) | 40 | Points |
| `seed` | number (1–999) | 7 | Seed |

## Examples

- **Two series**. `series={2}`
- **Six series**. `series={6}`
- **Dense**. `points={120}`
- **Legend toggle**: Hide a layer and the stack closes up while the axis re-fits. `legend={true}`
- **Min / max lines**: Dashed min, max and average over the total. `refLines="all"`
- **Threshold**: The top of the stack runs in the accent above 120. `threshold="above" thresholdValue={120}`
- **Tooltip**: A floating panel and two event badges. `readout="tooltip" annotations={true}`
- **Shares of 100%**: Every layer as its share; a list legend rolls values and shares. `offset="percent" legend="list" series={4} crosshair="dashed"`
- **Stream**: Layers centred as a stream, faded fills, no grid. `offset="stream" fill="gradient" series={6} background="none" curve="catmull" points={60}`
- **Pattern layers**: A texture per layer instead of a hue, keyed by pattern swatches. `fill="pattern" legend="row" series={4} background="dots"`
- **Loading**. `status="loading"`

---

# Area Chart

> A smooth line over a surface that fades to nothing beneath it.

Charts · Trends · Pro · https://obsydeui.com/charts/area-chart

Scrub with a pointer, a finger or the arrow keys: a hairline snaps to the nearest point, a hot dot rides the line, the stretch round the cursor stays bright while the rest dims, and the big readout top-left rolls to the value with heavier digits in the higher places. New data morphs over half a second. Optional layers: the kiln sky (a warm glow rising off the line), gradient, solid or hatched fills, a trend line, a projection with a widening cone, a Bollinger envelope or a band of normal, dashed min, max and average lines with pills, a threshold past which the line runs hot, event badges and sparks that ping as the crosshair passes, an afterglow that marks where you scrubbed, a dashed previous period with the change in the readout, drag-to-select a span, a brush strip, a live stream with a pilot light, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/area-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/area-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { AreaChart } from '@/components/obsyde/ember/area-chart/AreaChart';

export function Example() {
  return (
    <AreaChart />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rangeSwitch` | boolean | false | Range switch |
| `readout` | 'corner' \| 'tooltip' | 'corner' | Readout |
| `fill` | 'gradient' \| 'solid' \| 'pattern' \| 'none' | 'gradient' | Fill |
| `sky` | boolean | false | Kiln sky |
| `glow` | boolean | false | Glow |
| `markers` | 'none' \| 'ring' \| 'dot' | 'none' | Markers |
| `trend` | 'none' \| 'dashed' \| 'gradient' | 'none' | Trend |
| `projection` | 'none' \| 'regression' \| 'target' | 'none' | Projection |
| `band` | boolean | false | Envelope |
| `bandRange` | boolean | false | Band of normal |
| `refLines` | 'none' \| 'min-max' \| 'avg' \| 'median' \| 'all' | 'none' | Reference lines |
| `threshold` | 'none' \| 'above' \| 'below' | 'none' | Threshold |
| `thresholdValue` | number (0–300) | 70 | Threshold value |
| `annotations` | boolean | false | Annotations |
| `sparks` | boolean | false | Sparks |
| `afterglow` | boolean | false | Afterglow |
| `compare` | boolean | false | Compare |
| `tail` | boolean | false | Dashed tail |
| `selection` | boolean | false | Select a span |
| `brush` | boolean | false | Brush zoom |
| `yTicks` | number (2–8) | 4 | Y ticks |
| `showAxis` | boolean | true | Axes |
| `tooltip` | 'none' \| 'panel' \| 'corner' | 'none' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `live` | boolean | false | Live |
| `height` | number (140–480) | 220 | Height |
| `points` | number (2–240) | 30 | Points |
| `seed` | number (1–999) | 7 | Seed |

## Examples

- **Default**: 30 points. `points={30}`
- **Sparse**: Seven points, Mon–Sun. `points={7}`
- **Volt**. `points={30} accent="volt"`
- **Range switch**: 7 / 30 / 90 morph the same series. `rangeSwitch={true}`
- **Min / max lines**: Dashed min, max and average with value pills. `points={30} refLines="all"`
- **Threshold**: Past 70 the line runs in the accent over a hatched zone. `points={30} threshold="above" thresholdValue={70}`
- **Compare**: The previous period as a dashed ghost; the readout shows the change. `points={30} compare={true}`
- **Brush zoom**: 90 points; drag on the strip to zoom, double-click to reset. `points={90} brush={true}`
- **Live**: A new point every second with a pilot light; scrubbing holds it. `points={30} live={true}`
- **Tooltip and annotations**: A floating panel and two event badges. `points={30} readout="tooltip" annotations={true}`
- **Kiln sky**: The fill gives way to a warm glow above the line; it brightens while you read. `points={48} sky={true} glow={true} background="none" crosshair="gradient" seed={12}`
- **Trend and projection**: A dashed trend and a projection that hands off into a widening cone. `points={30} trend="dashed" projection="regression" background="dots"`
- **Hatched, band of normal**: A hatched fill inside a 40–70 band with brackets and tinted ticks. `points={30} fill="pattern" pattern="diagonal-up" bandRange={true} dots="ring"`
- **Sparks and afterglow**: Events as sparks that ping as you pass; scrubbed points glow and cool. `points={40} sparks={true} afterglow={true} crosshair="dashed" fill="solid"`
- **Select a span**: Drag across the plot: the span stays lit and its change and average read out. `points={40} selection={true} curve="step" markers="dot"`
- **Loading**. `points={30} status="loading"`

---

# Bar Chart

> Vertical bars on the viz-kit chart: single, grouped or stacked, morphing between layouts bar by bar on staggered springs.

Charts · Comparison · Pro · https://obsydeui.com/charts/bar-chart

The signature is the selected-value grammar: one bar runs hot with a dashed leader to its value pill, and the pill springs and rolls as you scrub. Options: squircle unit columns with a ring on the top unit, hatched remaining tracks, per-series patterns, gradient fills, positive and negative bars from a bright zero line, value labels thinned to avoid collisions, sort with FLIP springs, mass-by-value landing, reference lines with pills, a reference band, a trend line, a threshold that runs hot, event markers, the previous period as dashed ghosts, a legend that isolates, toggles and locks, panel or corner tooltips, grid or textured backgrounds, keyboard scrubbing with detents, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/bar-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/bar-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BarChart } from '@/components/obsyde/ember/bar-chart/BarChart';

export function Example() {
  return (
    <BarChart series={2} mode="grouped" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `mode` | 'grouped' \| 'stacked' | 'grouped' | Mode |
| `categories` | number (1–90) | 12 | Categories |
| `series` | number (1–4) | 1 | Series |
| `modeSwitch` | boolean | false | Mode switch |
| `sortSwitch` | boolean | false | Sort switch |
| `sort` | 'none' \| 'desc' \| 'asc' | 'none' | Sort |
| `shape` | 'bar' \| 'units' | 'bar' | Shape |
| `fill` | 'solid' \| 'gradient' | 'solid' | Fill |
| `track` | 'none' \| 'hatch' \| 'solid' | 'none' | Track |
| `selected` | number (-1–89) | -1 | Selected bar |
| `signed` | boolean | false | Positive & negative |
| `mass` | boolean | false | Mass landing |
| `refLines` | 'none' \| 'min-max' \| 'avg' \| 'median' \| 'all' | 'none' | Reference lines |
| `band` | boolean | false | Reference band |
| `trend` | 'none' \| 'dashed' \| 'gradient' | 'none' | Trend |
| `threshold` | 'none' \| 'above' \| 'below' | 'none' | Threshold |
| `annotations` | boolean | false | Markers |
| `compare` | boolean | false | Compare |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `pattern` | 'none' \| 'series' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `showAxis` | boolean | true | Axis |
| `height` | number (140–480) | 260 | Height |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Grouped**: Mon–Sun, two series side by side. `series={2} categories={7} mode="grouped"`
- **Single**: 12 bars, one series. `series={1} categories={12}`
- **Stacked**. `series={3} categories={12} mode="stacked"`
- **Mode switch**: Grouped / Stacked morph in place. `series={3} categories={8} modeSwitch={true}`
- **Min / max lines**: Dashed min, max and average with value pills, and a ring on the bars they come from. `refLines="all"`
- **Threshold**: Above 70 every bar runs in the accent. `threshold="above" thresholdValue={70}`
- **Compare**: The previous period as dashed outlines; the tooltip shows the change. `compare={true}`
- **Legend toggle**: Three series; hide one and the groups close up. `series={3} categories={7} legendToggle={true}`
- **Tooltip**: Stacked, with a floating panel and two event markers. `series={2} mode="stacked" readout="tooltip" annotations={true}`
- **Selected value**: One hot bar with a dashed leader to its pill; scrub to move it. `series={1} categories={12} selected={8} tooltip="none"`
- **Squircle units**: Columns of units under hatched remaining tracks; a ring hugs the top unit. `series={1} categories={14} shape="units" track="hatch" selected={9} tooltip="none" background="none" height={280}`
- **Patterns**: Stacked series told apart by texture, with a list legend. `series={3} categories={8} mode="stacked" pattern="series" legend="list"`
- **Positive & negative**: Bars grow both ways from a bright zero line, with value labels. `signed={true} categories={14} valueLabels={true}`
- **Sort**: Switch the order; bars glide to their new places and land by mass. `sortSwitch={true} categories={10} valueLabels={true} mass={true}`
- **Dense**: 60 gradient bars on a dot background, a band of normal and a trend line. `categories={60} fill="gradient" trend="gradient" band={true} background="dots"`
- **Loading**: The same chart while data loads. `status="loading"`

---

# Line Chart

> Up to six series drawn in greys of different strength, never a rainbow.

Charts · Trends · Pro · https://obsydeui.com/charts/line-chart

Focus one from the legend, with a click or Up and Down on the plot, and it alone turns accent while the rest step back. A hairline crosshair snaps to the nearest row with a floating panel or a corner readout, the line around the cursor stays bright while the rest dims, and names sit at the right edge, nudged apart. Optional layers: the kiln sky (a warm glow rising off the lead line), a gradient or hatched fill, a trend line, a projection with a widening cone, a Bollinger envelope, dashed min, max and average lines with value pills, a threshold past which every line runs hot, event badges that fan out, a dashed previous period, a dashed unfinished tail, drag-to-select a span, a brush strip that zooms, a live stream with a pilot light, and loading and empty states on the same instance.

## Install

```bash
npx shadcn@latest add @obsyde/line-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/line-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { LineChart } from '@/components/obsyde/ember/line-chart/LineChart';

export function Example() {
  return (
    <LineChart series={2} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `series` | number (1–6) | 2 | Series |
| `focused` | number (-1–5) | -1 | Focused series (-1 none) |
| `legend` | 'focus' \| 'toggle' \| 'list' \| 'none' | 'focus' | Legend |
| `endLabels` | boolean | true | End labels |
| `area` | 'none' \| 'gradient' \| 'pattern' | 'none' | Fill |
| `sky` | boolean | false | Kiln sky |
| `glow` | boolean | false | Glow |
| `markers` | 'none' \| 'ring' \| 'dot' | 'none' | Markers |
| `trend` | 'none' \| 'dashed' \| 'gradient' | 'none' | Trend |
| `projection` | 'none' \| 'regression' \| 'target' | 'none' | Projection |
| `band` | boolean | false | Envelope |
| `refLines` | 'none' \| 'min-max' \| 'avg' \| 'median' \| 'all' | 'none' | Reference lines |
| `threshold` | 'none' \| 'above' \| 'below' | 'none' | Threshold |
| `thresholdValue` | number (0–300) | 70 | Threshold value |
| `annotations` | boolean | false | Annotations |
| `compare` | boolean | false | Compare |
| `tail` | boolean | false | Dashed tail |
| `selection` | boolean | false | Select a span |
| `brush` | boolean | false | Brush zoom |
| `yTicks` | number (2–8) | 4 | Y ticks |
| `showAxis` | boolean | true | Axes |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `live` | boolean | false | Live |
| `height` | number (160–480) | 260 | Height |
| `points` | number (2–240) | 24 | Points |
| `seed` | number (1–999) | 11 | Seed |

## Examples

- **Two series**. `series={2}`
- **Four series**. `series={4}`
- **Focused**: Series B focused: it alone runs in the accent. `series={3} focused={1}`
- **Volt**. `series={2} accent="volt"`
- **Min / max lines**: Dashed min, max and average with value pills, following the focused series. `series={2} focused={0} refLines="all"`
- **Legend toggle**: Click a name to hide its line; the axis re-fits. Shift+click to lock. `series={4} legend="toggle"`
- **Threshold**: Every line runs in the accent past 70, over a hatched zone. `series={2} threshold="above" thresholdValue={70}`
- **Brush zoom**: 90 points; drag on the strip to zoom, double-click to reset. `series={2} points={90} brush={true}`
- **Live**: Both series stream a point a second with a pilot light; scrubbing holds them. `series={2} live={true}`
- **Compare and annotations**: Series A against its previous period, with two event badges. `series={1} compare={true} annotations={true}`
- **Kiln sky**: A warm glow rises off the line, which glows like a horizon. `series={1} points={40} sky={true} glow={true} background="none" crosshair="gradient" seed={4}`
- **Trend and projection**: A gradient trend, then a projection that hands off into a widening cone. `series={1} points={30} trend="gradient" projection="regression" area="gradient" background="dots"`
- **Envelope and markers**: A Bollinger envelope round the line, ring markers, a dashed unfinished tail. `series={1} points={24} band={true} markers="ring" tail={true} dots="ring"`
- **List legend**: Values roll in a side legend as you scrub; dashed crosshair, ring dots. `series={3} legend="list" tooltip="none" crosshair="dashed" dots="ring" endLabels={false}`
- **Select a span**: Drag across the plot: the span stays lit and the head reads its change. `series={2} selection={true} curve="step" background="dots" area="pattern" pattern="diagonal-up"`
- **Loading**. `series={2} status="loading"`

---

# Donut Chart

> Ring segments in grey steps, cut apart by 2px gaps, that sweep on clockwise on the shared reveal curve.

Charts · Composition · Pro · https://obsydeui.com/charts/donut-chart

Point at a segment, step with the arrow keys or hover its legend row: it slides out (or grows outward) on a spring and heats to the accent while the others step back, and the centre rolls its digits on per-digit mass and rewrites its caption as a sentence (“24% of total · 2nd of 5”). Options: a linked legend (row, list with shares, or progress rows; click hides a segment and the ring re-proportions, press and hold locks it), a hatch per segment so it reads without colour, a tick-ring style whose ticks shoot out under the pointer and settle slowly into a cooling trail, outside labels on elbow leaders, one segment selected at rest, rounded ends, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/donut-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/donut-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DonutChart } from '@/components/obsyde/ember/donut-chart/DonutChart';

export function Example() {
  return (
    <DonutChart label="Total" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `variant` | 'ring' \| 'ticks' | 'ring' | Style |
| `hover` | 'offset' \| 'grow' | 'offset' | Hover |
| `segments` | number (1–16) | 5 | Segments |
| `thickness` | number (2–60) | 20 | Thickness |
| `corner` | number (0–12) | 0 | Corner |
| `size` | number (120–400) | 240 | Size |
| `labels` | 'none' \| 'outside' | 'none' | Labels |
| `centerMetric` | 'value' \| 'share' | 'value' | Centre shows |
| `selected` | number (-1–15) | -1 | Selected |
| `label` | string | 'Total' | Label |
| `centerLabel` | string | — | Centre label |
| `centerValue` | string | — | Centre value |
| `centerCaption` | string | — | Centre caption |
| `legend` | 'none' \| 'row' \| 'list' \| 'progress' | 'none' | Legend |
| `pattern` | 'none' \| 'per-slice' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Default**: Five segments. `segments={5}`
- **Thin**: An 8px ring. `segments={5} thickness={8}`
- **Many segments**. `segments={10}`
- **Volt**. `segments={5} accent="volt"`
- **Outside labels**: Names and shares on leader lines. `labels="outside"`
- **Custom centre**: The centre reads a fixed figure at rest. `centerLabel="Share" centerValue="100%" centerCaption="of the whole"`
- **Linked legend**: List legend with shares; hover isolates both ways, click hides, hold locks. `segments={5} legend="list"`
- **Tick ring**: The ring as radial ticks; sweeping leaves a cooling trail. `segments={5} variant="ticks" thickness={16} legend="row"`
- **Patterned slices**: A hatch per segment, shared with the legend. `segments={5} pattern="per-slice" thickness={34} legend="list"`
- **Grow hover**: Segments grow outward; rounded ends; progress legend. `segments={4} hover="grow" corner={4} thickness={26} legend="progress"`
- **Selected share**: One segment lit at rest; the centre reads its share. `segments={6} selected={1} centerMetric="share" thickness={14}`
- **Loading**. `status="loading" legend="list"`

---

# Radar Chart

> A web of hairline rings and spokes holding up to four series polygons.

Charts · Comparison · Pro · https://obsydeui.com/charts/radar-chart

The axis labels fade in, then the polygons spring out of the centre one after another. Point inside a polygon (overlaps resolve to the smallest one) or hover its legend row: that series lifts while the others step back, both ways. At the same time the pointer's angle picks an axis: the legend rolls every series' value on it, and the axis is marked quietly with vertex dots and a soft wedge of the sector (or dots only, nothing, or an opt-in accent spoke that fades in from the centre and stops at the outer ring). Options: hover by axis, series or both; straight-edged rings (a triangle at three axes, a hexagon at six), circles or spokes only; solid, hatched or outline-only polygons; smoothed outlines; one series selected at rest; loading and empty states. ←/→ walk the axes, ↑/↓ the series.

## Install

```bash
npx shadcn@latest add @obsyde/radar-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/radar-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RadarChart } from '@/components/obsyde/ember/radar-chart/RadarChart';

export function Example() {
  return (
    <RadarChart />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `axes` | number (3–12) | 6 | Axes |
| `compare` | boolean | false | Compare |
| `seriesCount` | number (0–4) | 0 | Series (0 = compare) |
| `indicator` | 'wedge' \| 'dots' \| 'spoke' \| 'none' | 'wedge' | Axis indicator |
| `hover` | 'both' \| 'axis' \| 'series' | 'both' | Hover |
| `grid` | 'polygon' \| 'circle' \| 'none' | 'polygon' | Grid |
| `fill` | 'solid' \| 'pattern' \| 'none' | 'solid' | Fill |
| `curved` | boolean | false | Curved |
| `levels` | number (1–8) | 4 | Rings |
| `selected` | number (-1–3) | -1 | Selected |
| `size` | number (200–440) | 360 | Size |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 9 | Seed |

## Examples

- **Single**. `compare={false}`
- **Compare**: Two series; point inside one to lift it. `compare={true}`
- **Volt**. `compare={true} accent="volt"`
- **Four series**: Dashed outlines tell C and D apart; hover by series only. `seriesCount={4} hover="series" legend="row" axes={8}`
- **Triangle**: Three axes, outline only, dots on the hovered axis. `axes={3} compare={true} fill="none" indicator="dots" levels={3}`
- **Circular grid**: Round rings and smoothed outlines. `compare={true} grid="circle" curved={true} levels={5}`
- **Hatched**: A hatch per series, shared with the legend. `compare={true} fill="pattern"`
- **Spoke indicator**: The opt-in accent spoke; one series selected at rest. `compare={true} indicator="spoke" selected={1}`
- **Loading**. `compare={true} status="loading"`

---

# Bar List

> A ranked list of horizontal bars with each value in mono on the right.

Charts · Comparison · Free · https://obsydeui.com/charts/bar-list

Rank numbers stay put while rows slide between them on springs when the data re-ranks, and a bar's leading edge glints while it is still resizing. Point at a row, or use the arrow keys, and the rest recede. Options on the viz-kit: dot bars on a unit lattice, hatched remaining tracks, gradient and pattern fills, a dashed reference line with a value pill, positive and negative rows diverging from zero, one selected row in the accent, a tooltip panel, sort order, mass-by-value landing, and loading and empty states.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/bar-list.json
```

Files land in `components/obsyde/ember/bar-list/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BarList } from '@/components/obsyde/ember/bar-list/BarList';

export function Example() {
  return (
    <BarList />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rows` | number (3–12) | 8 | Rows |
| `compact` | boolean | false | Compact |
| `labelPosition` | 'inside' \| 'over' | 'inside' | Label position |
| `shape` | 'bar' \| 'dots' | 'bar' | Shape |
| `fill` | 'solid' \| 'gradient' | 'solid' | Fill |
| `track` | 'none' \| 'hatch' \| 'solid' | 'none' | Track |
| `reference` | 'none' \| 'avg' \| 'median' | 'none' | Reference |
| `selected` | number (0–12) | 0 | Selected rank |
| `signed` | boolean | false | Positive & negative |
| `sort` | 'desc' \| 'asc' \| 'none' | 'desc' | Sort |
| `showShare` | boolean | true | Show share |
| `unit` | string | — | Unit |
| `autoShuffle` | boolean | false | Auto shuffle |
| `hover` | 'soft' \| 'hot' | 'soft' | Hover |
| `tooltip` | 'none' \| 'panel' | 'none' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 1 | Seed |

## Examples

- **Compact**: Ten tighter rows. `compact={true} rows={10}`
- **Shuffle**: Re-ranks itself every few seconds. `autoShuffle={true}`
- **Labels over**: Labels on their own line over thin bars. `labelPosition="over" rows={6}`
- **Volt**. `accent="volt"`
- **Dot bars**: Values as lit units on a lattice; unlit units are the remainder. `shape="dots" rows={7}`
- **Remaining**: Hatched tracks show what is left to the leader, with the average marked. `track="hatch" reference="avg" rows={7}`
- **Selected**: One row in the accent; hover moves the selection, the panel follows. `selected={2} tooltip="panel" fill="gradient"`
- **Positive & negative**: Rows grow both ways from a zero line. `signed={true} showShare={false} rows={8}`
- **Pattern**: Textured bars, ascending. `pattern="diagonal-up" sort="asc" rows={6}`
- **Loading**. `status="loading"`

---

# Scatter Plot

> Points on the viz-kit chart with a free pointer.

Charts · Distribution · Pro · https://obsydeui.com/charts/scatter-plot

Point anywhere and the nearest point gets a quiet bone ring and a panel with its values; drag a rectangle to brush and the points inside run hot while the rest fall back, with n of N rolling in the header. In zoom mode the brush becomes the view and the axes tween to it; a double-click zooms back out. The arrow keys walk points left to right. Options: groups with a legend that isolates, hides and locks, depth of field (inactive points blur), rings, luminance by height, a deterministic jitter strip, an opt-in free crosshair with a y value pill, a trend line, a reference band, dot backgrounds, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/scatter-plot
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/scatter-plot/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ScatterPlot } from '@/components/obsyde/ember/scatter-plot/ScatterPlot';

export function Example() {
  return (
    <ScatterPlot shape="clusters" blur />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `shape` | 'cloud' \| 'clusters' \| 'strip' | 'cloud' | Shape |
| `points` | number (50–1500) | 300 | Points |
| `marker` | 'dot' \| 'ring' | 'dot' | Marker |
| `size` | number (0–6) | 0 | Dot size (0 = auto) |
| `yGradient` | boolean | false | Y gradient |
| `blur` | boolean | false | Blur inactive |
| `brushMode` | 'select' \| 'zoom' | 'select' | Brush |
| `brushed` | boolean | false | Brushed |
| `trend` | 'none' \| 'dashed' \| 'gradient' | 'none' | Trend |
| `band` | boolean | false | Reference band |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'none' \| 'dashed' | 'none' | Crosshair |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–480) | 320 | Height |
| `label` | string | 'Scatter' | Label |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Clusters**: Three groups with a legend; hover one and the others blur. `shape="clusters" blur={true}`
- **Brushed**: Starts with a box over the middle of the cloud. `brushed={true}`
- **Volt**. `accent="volt" brushed={true} shape="clusters"`
- **Rings**: Ring markers, luminance by height, and a trend line. `marker="ring" yGradient={true} trend="gradient" points={160}`
- **Jitter strip**: Five categories as a deterministic strip with a band of normal. `shape="strip" points={260} band={true} legend="none"`
- **Brush zoom**: Drag to zoom; a free crosshair reads y in a pill. `brushMode="zoom" crosshair="dashed" points={900} background="dots"`
- **Loading**. `status="loading"`

---

# Radial Bars

> Two to five concentric arcs on faint tracks, read clockwise.

Charts · Radial · Pro · https://obsydeui.com/charts/radial-bars

Each arc sweeps on its own spring and its head runs hot while it moves, cooling to grey as it settles. Point at a ring, its legend row or use the arrow keys to light it in the accent while the others step back; the centre rolls to it on per-digit mass and reads it as a sentence. Options: a linked progress, list or row legend (hover isolates both ways, click hides a ring, hold locks it); an instrument tick ring with quarter labels; a scrubber hand that springs to the pointer's angle while rings short of it step back, so it reads as a threshold (“2 of 3 past 60%”); hatched ghost arcs running on to each ring's target; full, three-quarter or half sweeps with the ring names in the open quadrant; round caps; a hatch per ring; loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/radial-bars
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/radial-bars/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RadialBars } from '@/components/obsyde/ember/radial-bars/RadialBars';

export function Example() {
  return (
    <RadialBars rings={3} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rings` | number (2–5) | 3 | Rings |
| `span` | 'full' \| 'three-quarter' \| 'half' | 'full' | Sweep |
| `scale` | boolean | false | Tick ring |
| `scrubber` | boolean | false | Scrubber |
| `ghost` | boolean | false | Ghost targets |
| `caps` | 'butt' \| 'round' | 'butt' | Caps |
| `max` | number (10–1000) | 100 | Full turn |
| `unit` | string | '%' | Unit |
| `size` | number (160–360) | 260 | Size |
| `legend` | 'progress' \| 'list' \| 'row' \| 'none' | 'progress' | Legend |
| `pattern` | 'none' \| 'per-ring' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Three rings**. `rings={3}`
- **Five rings**. `rings={5}`
- **Volt**. `accent="volt" rings={4}`
- **Instrument**: Tick ring with quarter labels and a scrubber hand. `rings={4} scale={true} scrubber={true}`
- **Ghost targets**: Hatched arcs run on to each ring's target. `rings={3} ghost={true} caps="round" legend="list"`
- **Three-quarter**: A 270° sweep with names in the open quadrant. `rings={4} span="three-quarter" scale={true} caps="round"`
- **Half**: A semicircle with a row legend under it. `rings={3} span="half" legend="row" size={300}`
- **Hatched rings**. `rings={4} pattern="per-ring"`
- **Loading**. `rings={3} status="loading"`

---

# Metric

> A label, one big number and its change. When the value changes the number counts to it through a real odometer: the next wheel up only turns when the one below passes nine, and with per-digit mass each wheel follows on its own spring, heavier per place, so units flick and thousands lumber; wheels too fast to read fade back.

Charts · Metrics · Pro · https://obsydeui.com/charts/metric

The change is a small drawn chevron, accent when up and grey when down, as a percentage, an absolute step or both. Options: a pilot light by the label that breathes in the accent while the value is fresh and goes ash and still once it is stale (“6m ago”); an inline sparkline that slides left as values arrive, whose hover drops the line back, re-strokes a sprung window round the pointer and rolls the big number to the point under it; loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/metric
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/metric/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Metric } from '@/components/obsyde/ember/metric/Metric';

export function Example() {
  return (
    <Metric label="Count" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number (0–1000000) | 12408 | Value |
| `previous` | number (0–1000000) | 11906 | Previous |
| `label` | string | 'Count' | Label |
| `unit` | string | — | Unit |
| `deltaFormat` | 'percent' \| 'absolute' \| 'both' | 'percent' | Change as |
| `pilot` | 'none' \| 'fresh' \| 'stale' | 'none' | Pilot light |
| `mass` | boolean | true | Digit mass |
| `sparkline` | boolean | false | Sparkline |
| `changing` | boolean | false | Changing |
| `row` | boolean | false | Row of three |
| `size` | 'md' \| 'lg' | 'lg' | Size |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 1 | Seed |

## Examples

- **With sparkline**: Hover the line: the number rolls to the point under it. `sparkline={true}`
- **Changing**: A new value every 2.5 seconds. `changing={true} sparkline={true}`
- **Row of three**. `row={true}`
- **Live**: A pilot light breathes while values keep arriving. `changing={true} sparkline={true} pilot="fresh" deltaFormat="both"`
- **Stale**: Last updated minutes ago: the pilot has gone ash. `pilot="stale" deltaFormat="absolute"`
- **Row with sparklines**. `row={true} sparkline={true} pilot="fresh"`
- **Loading**. `status="loading" sparkline={true}`

---

# Histogram Range

> A distribution with a two-thumb range slider fused to its baseline.

Charts · Distribution · Pro · https://obsydeui.com/charts/histogram-range

Bars inside the range are bone and bars outside fall back to a faint outline; a bar a thumb cuts through is cut exactly, with a hot 1px edge, and the count in range rolls as you drag. Thumbs take a pointer, a finger or the keys, and can snap to bins. Options on the viz-kit: gradient or textured in-range fills, ghost or hatched bars outside, a density line, bone inside the range, a dashed mean or median with a value pill, a quiet panel for the bin under the pointer, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/histogram-range
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/histogram-range/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { HistogramRange } from '@/components/obsyde/ember/histogram-range/HistogramRange';

export function Example() {
  return (
    <HistogramRange label="Distribution" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `bins` | number (8–80) | 36 | Bins |
| `samples` | number (200–5000) | 1400 | Samples |
| `snap` | boolean | false | Snap to bins |
| `from` | number (0–100) | 28 | From |
| `to` | number (0–100) | 72 | To |
| `fill` | 'solid' \| 'gradient' \| 'diagonal-up' \| 'dots' \| 'vertical' \| 'crosshatch' | 'solid' | Fill |
| `outside` | 'outline' \| 'ghost' \| 'hatch' | 'outline' | Outside |
| `density` | boolean | false | Density line |
| `reference` | 'none' \| 'mean' \| 'median' | 'none' | Reference |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (80–280) | 140 | Height |
| `unit` | string | — | Unit |
| `label` | string | 'Distribution' | Label |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Snapped**: Twenty bins; thumbs step from edge to edge. `snap={true} bins={20}`
- **Narrow**. `from={46} to={55}`
- **Volt**. `accent="volt"`
- **Density**: A smoothed density line over ghost bars, with the median marked. `density={true} outside="ghost" reference="median" bins={48}`
- **Hatched**: Hatched bars outside, a gradient inside. `outside="hatch" fill="gradient" bins={28}`
- **Textured**: In-range bars carry a texture; the mean is marked. `fill="diagonal-up" reference="mean" bins={24} snap={true}`
- **Loading**. `status="loading"`

---

# Candlestick

> Open, high, low and close per period: rising candles green, falling ones red, or a monochrome tape (hollow bone rising, solid grey falling) where the candle under your pointer heats in the accent.

Charts · Trends · Pro · https://obsydeui.com/charts/candlestick

Point at a candle and it lights up; the readout rolls to its close and lists O, H, L and C with the change. The vertical crosshair and the change take the candle’s direction colour, a dashed line follows your pointer’s height with a rolling value pill on the price axis, and the date pill rolls along the bottom. Scroll to zoom around the pointer, drag to pan with a little momentum, double-click to reset, + and − from the keyboard; the price axis re-fits to what is in view. Options: volume bars on their own axis in the bottom quarter, a moving average, a Bollinger envelope, hatched falling bodies, an OHLC tooltip, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/candlestick
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/candlestick/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Candlestick } from '@/components/obsyde/ember/candlestick/Candlestick';

export function Example() {
  return (
    <Candlestick />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `colors` | 'market' \| 'mono' | 'market' | Colours |
| `candles` | number (12–400) | 64 | Candles |
| `zoom` | number (0–400) | 0 | Zoom (visible) |
| `volume` | boolean | false | Volume |
| `ma` | number (0–50) | 0 | Moving average |
| `bands` | boolean | false | Envelope |
| `bodies` | 'solid' \| 'pattern' | 'solid' | Falling bodies |
| `priceLine` | boolean | true | Price line |
| `tooltip` | 'none' \| 'panel' | 'none' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (160–480) | 260 | Height |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Default**: 64 candles, all in view. `candles={64}`
- **Zoomed**: 120 candles, the last 30 in view; drag to pan back. `candles={120} zoom={30}`
- **With volume**: Volume bars in the bottom quarter, on their own axis. `volume={true}`
- **Volt**. `accent="volt" volume={true}`
- **Price, volume and average**: A 7-candle moving average through the tape, volume underneath, an OHLC tooltip. `candles={90} zoom={60} volume={true} ma={7} tooltip="panel"`
- **Envelope, hatched bodies**: A Bollinger envelope behind the candles; falling bodies hatched. `candles={80} bands={true} bodies="pattern" pattern="diagonal-up" background="dots" colors="mono"`
- **Monochrome**: Hollow bone rising, solid grey falling; the hovered candle takes the accent. `colors="mono"`
- **Loading**. `status="loading"`

---

# Treemap

> A squarified treemap with 2px gaps, each cell a grey step by its value.

Charts · Composition · Pro · https://obsydeui.com/charts/treemap

Point at a cell and it lifts while the readout rolls to its value and share; click a group to zoom in and every cell springs to its new rectangle while the rest fly out with the camera. The breadcrumb zooms back out. Options on the viz-kit: a group legend (hover isolates a group, click hides it and the others re-flow on springs, hold locks), a texture per group shared with the legend, round corners, a tooltip panel, an opt-in accent hover, keyboard reading and zoom, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/treemap
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/treemap/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Treemap } from '@/components/obsyde/ember/treemap/Treemap';

export function Example() {
  return (
    <Treemap />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `grouped` | boolean | true | Grouped |
| `count` | number (2–12) | 6 | Groups / cells |
| `zoom` | 'none' \| 'Alpha' \| 'Beta' \| 'Gamma' \| 'Delta' \| 'Epsilon' \| 'Zeta' | 'none' | Start zoomed into |
| `fill` | 'steps' \| 'pattern' | 'steps' | Fill |
| `corners` | 'tight' \| 'round' | 'tight' | Corners |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `hover` | 'soft' \| 'hot' | 'soft' | Hover |
| `tooltip` | 'none' \| 'panel' | 'none' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–520) | 320 | Height |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Grouped**: Six groups of cells; click one to zoom in. `grouped={true}`
- **Flat**: Ten cells, one level. `grouped={false} count={10}`
- **Zoomed**: Starts inside Beta. `grouped={true} zoom="Beta"`
- **Volt**. `accent="volt"`
- **Patterns**: A texture per group, shared with the legend; hide a group and the rest re-flow. `grouped={true} count={4} fill="pattern" corners="round"`
- **Panel**: A tooltip panel and the accent on hover. `grouped={true} count={5} tooltip="panel" hover="hot"`
- **Loading**. `status="loading"`

---

# Ridgeline

> Density curves stacked like a range of hills: each ridge is a stage-black fill with a bone top line, so nearer ridges hide the ones behind.

Charts · Trends · Pro · https://obsydeui.com/charts/ridgeline

Point at a ridge and it heats, an accent top line over a faint wash, while the others’ lines step back; the fills never fade, so nothing behind bleeds through. A shared crosshair reads every ridge at the same x into the right gutter with rolling numbers, and the header rolls to the hovered ridge’s value and share. Left and Right move along x, Up and Down between ridges. Ridges rise one after another on mount, front first. Options: smooth densities or binned steps, one shared amplitude or each ridge filling its row, sorting by mean or peak, median ticks, bone gradient or textured fills, column grid or dots, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/ridgeline
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/ridgeline/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Ridgeline } from '@/components/obsyde/ember/ridgeline/Ridgeline';

export function Example() {
  return (
    <Ridgeline />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `ridges` | number (2–12) | 7 | Ridges |
| `overlap` | number (0.5–4) | 2.2 | Overlap |
| `mode` | 'density' \| 'histogram' | 'density' | Mode |
| `scale` | 'shared' \| 'own' | 'shared' | Scale |
| `sort` | 'none' \| 'mean' \| 'peak' | 'none' | Sort |
| `medians` | boolean | false | Medians |
| `hoverTone` | 'bone' \| 'accent' | 'bone' | Hover tone |
| `fill` | 'stage' \| 'gradient' \| 'pattern' | 'stage' | Fill |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'none' \| 'grid' \| 'dots' | 'none' | Background |
| `reveal` | 'rise' \| 'sweep' \| 'fade' \| 'none' | 'rise' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–520) | 320 | Height |
| `seed` | number (1–999) | 12 | Seed |

## Examples

- **Default**: Seven ridges. `ridges={7}`
- **Dense**: Twelve ridges, tighter rows. `ridges={12} height={380}`
- **Volt, accent hover**: The hovered ridge runs in the accent (opt-in). `accent="volt" hoverTone="accent"`
- **Sorted, medians**: Ridges sorted by mean with a tick at each median. `ridges={9} sort="mean" medians={true} height={360}`
- **Histogram**: Binned steps instead of smooth densities, on a column grid. `ridges={6} mode="histogram" background="grid" overlap={1.6}`
- **Own scales, textured**: Each ridge fills its row to compare shapes; textured fills, a dashed crosshair. `ridges={7} scale="own" fill="pattern" pattern="diagonal-up" crosshair="dashed"`
- **Loading**. `status="loading"`

---

# Bump Chart

> Rank over time as smooth S-curves between rank positions, with each series named at its right end.

Charts · Trends · Pro · https://obsydeui.com/charts/bump-chart

Point at a line and it brightens while the others step back, and the header rolls to its rank, value and the places it gained or lost; click to pin it, and the pinned line alone runs in the accent. New data springs every node to its new rank on its own spring, so you watch the overtakes happen. Up and Down move between ranks, Left and Right between steps, Enter pins. Options: rank numbers in badges, straight segments, names at both ends, the top three drawn brighter, a ranked tooltip, dotted background, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/bump-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/bump-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BumpChart } from '@/components/obsyde/ember/bump-chart/BumpChart';

export function Example() {
  return (
    <BumpChart series={6} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `series` | number (2–8) | 6 | Series |
| `steps` | number (2–16) | 8 | Steps |
| `focused` | number (-1–7) | -1 | Pinned series |
| `markers` | 'dot' \| 'rank' \| 'none' | 'dot' | Markers |
| `curve` | 'bump' \| 'linear' | 'bump' | Curve |
| `names` | 'end' \| 'both' | 'end' | Names |
| `highlightTop` | number (0–8) | 0 | Highlight top |
| `tooltip` | 'none' \| 'panel' | 'none' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–480) | 300 | Height |
| `seed` | number (1–999) | 21 | Seed |

## Examples

- **Default**: Six series over eight weeks. `series={6}`
- **Focused**: Gamma pinned. `series={6} focused={2}`
- **Volt**. `accent="volt" series={8}`
- **Rank badges**: Rank numbers in badges at every node; the top three run brighter. `series={6} markers="rank" highlightTop={3} steps={7}`
- **Names at both ends**: Straight segments, names left and right, a ranked tooltip. `series={5} curve="linear" names="both" tooltip="panel" crosshair="dashed" background="dots"`
- **Long run**: Sixteen steps, quiet nodes. `series={7} steps={16} markers="none" highlightTop={1}`
- **Loading**. `status="loading"`

---

# Radial Histogram

> A day around a dial, drawn as a radial instrument: a tight tick ring just outside the hole, hour labels well outside the values, faint value rings, and bins that glow outward (dim at the root, full strength at the tip) as arc bars or columns of dots at even density.

Charts · Radial · Pro · https://obsydeui.com/charts/radial-histogram

Give it a “now” and later bins become the future: yesterday's values as hatched ghosts, with the scrubber resting on now and its dot breathing in the accent. Move around the centre and the scrubber springs to the pointer's angle (gradient, solid or dashed); the bin under it heats while the others step back, and the centre rolls to it on per-digit mass and rewrites itself as a sentence (“+18 vs yesterday”, “forecast 18:00”). Bins cascade outward clockwise on entry; arrow keys step bins; loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/radial-histogram
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/radial-histogram/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RadialHistogram } from '@/components/obsyde/ember/radial-histogram/RadialHistogram';

export function Example() {
  return (
    <RadialHistogram />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `bins` | '24' \| '48' | '24' | Bins |
| `mark` | 'bars' \| 'dots' | 'bars' | Marks |
| `nowHour` | number (-1–23) | -1 | Now (hour, −1 off) |
| `compare` | boolean | false | Compare yesterday |
| `scrubber` | 'gradient' \| 'solid' \| 'dashed' \| 'none' | 'gradient' | Scrubber |
| `ramp` | boolean | true | Outward ramp |
| `rings` | boolean | true | Value rings |
| `inner` | number (0.2–0.55) | 0.36 | Hole |
| `size` | number (220–480) | 360 | Size |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 8 | Seed |

## Examples

- **24 bins**: One bar per hour. `bins="24"`
- **48 bins**: One bar per half hour. `bins="48"`
- **Volt**. `accent="volt"`
- **Now and yesterday**: After 15:00 the bins are yesterday's, hatched; the hand rests on now. `bins="24" nowHour={15}`
- **Dot field**: Half-hour columns of dots, glowing outward. `bins="48" mark="dots" nowHour={17} scrubber="dashed"`
- **Versus yesterday**: A finished day; the readout compares each hour. `bins="24" compare={true} scrubber="solid" inner={0.42}`
- **Flat**: No ramp, no value rings. `bins="24" ramp={false} rings={false}`
- **Loading**. `status="loading"`

---

# Dumbbell

> A before and an after value per row: a hollow ring, a solid dot and the link between them.

Charts · Comparison · Pro · https://obsydeui.com/charts/dumbbell

Monochrome at rest (risers bone, fallers grey); point at a row and its after dot runs hot while the rest step back, with a panel for both values and the change. On mount each after dot slides out of its before dot; the sort switch re-ranks the rows and each springs to its new place. Options: line, gradient or capsule links (the capsule can carry a hatch), a dashed average with a value pill, a band of normal, a legend that isolates and hides before or after, absolute or percent change, risers in the accent, keyboard reading, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/dumbbell
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dumbbell/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Dumbbell } from '@/components/obsyde/ember/dumbbell/Dumbbell';

export function Example() {
  return (
    <Dumbbell />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rows` | number (2–12) | 8 | Rows |
| `sort` | 'original' \| 'after' \| 'change' | 'original' | Sort |
| `link` | 'line' \| 'gradient' \| 'bar' | 'line' | Link |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `tone` | 'mono' \| 'rise' | 'mono' | Tone |
| `reference` | 'none' \| 'avg-before' \| 'avg-after' | 'none' | Reference |
| `band` | boolean | false | Band |
| `delta` | 'abs' \| 'pct' \| 'none' | 'abs' | Change |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `rowHeight` | number (22–64) | 34 | Row height |
| `seed` | number (1–999) | 6 | Seed |

## Examples

- **Default**: Original order. `sort="original"`
- **Sorted**: Sorted by change. `sort="change"`
- **Volt**: Risers in the accent. `accent="volt" tone="rise"`
- **Capsule**: The gap as a hatched capsule, change in percent. `link="bar" pattern="diagonal-up" delta="pct" sort="after"`
- **Gradient link**: Links fade toward the before value, with the average after marked. `link="gradient" reference="avg-after" band={true}`
- **Dense**: Twelve tight rows, no legend. `rows={12} rowHeight={24} legend="none" delta="none"`
- **Loading**. `status="loading"`

---

# Bullet Chart

> One measure against its target per row: three quiet bands for the qualitative ranges, a thin bone bar for the measure and a bone tick for the target; only the part past the target runs hot.

Charts · Comparison · Free · https://obsydeui.com/charts/bullet-chart

On mount the bars fill on springs, one row after another; point at a row or use the arrow keys and the readout rolls to its measure and distance to target while the other rows step back. Options: hatched remaining (the distance still to go), hatched ranges, a dot measure, a key that isolates and hides measure, target or ranges, a tooltip panel, hot target ticks, and loading and empty states.

## Install

```bash
npx shadcn@latest add https://obsydeui.com/r/bullet-chart.json
```

Files land in `components/obsyde/ember/bullet-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BulletChart } from '@/components/obsyde/ember/bullet-chart/BulletChart';

export function Example() {
  return (
    <BulletChart rows={5} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rows` | number (1–10) | 5 | Rows |
| `compact` | boolean | false | Compact |
| `bands` | 'grey' \| 'hatch' \| 'none' | 'grey' | Ranges |
| `measure` | 'bar' \| 'dot' | 'bar' | Measure |
| `remaining` | boolean | false | Remaining hatch |
| `overHot` | boolean | true | Over target hot |
| `hotTargets` | boolean | false | Hot targets |
| `readout` | boolean | true | Readout |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'none' \| 'panel' | 'none' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 9 | Seed |

## Examples

- **Default**: Five rows with names and notes. `rows={5}`
- **Compact**: Eight thin rows. `rows={8} compact={true}`
- **Volt**. `accent="volt"`
- **Remaining**: The distance still to go as a hatch. `rows={6} remaining={true}`
- **Hatched ranges**: Textured ranges and a dot measure, with a panel. `bands="hatch" measure="dot" tooltip="panel"`
- **Minimal**: No ranges, no key; just measures and targets. `rows={6} bands="none" legend="none" readout={false} compact={true}`
- **Loading**. `status="loading"`

---

# Sankey

> Flows between columns of thin bone bars, carried by ribbons that run as gradients from the source's grey to the target's.

Charts · Relationships · Pro · https://obsydeui.com/charts/sankey

Nodes fade in column by column, then the ribbons grow from source to target on the shared reveal curve. Point at a node or a ribbon, or walk them with the arrow keys, and every path through it heats end to end while unrelated ribbons drop to a tenth and unrelated nodes step back; % pills appear on the ribbons it touches and the readout rolls to its value and share. Options: flat ribbons, pills always on the wide ribbons, a node lit at rest, column captions, loading and empty states. The layout is relaxed in the component itself, and new data morphs into place on springs.

## Install

```bash
npx shadcn@latest add @obsyde/sankey
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/sankey/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Sankey } from '@/components/obsyde/ember/sankey/Sankey';

export function Example() {
  return (
    <Sankey />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `focus` | 'none' \| 'alpha' \| 'beta' \| 'gamma' \| 'delta' \| 'stage-i' \| 'stage-ii' \| 'stage-iii' \| 'out-a' \| 'out-b' \| 'out-c' \| 'out-d' | 'none' | Focus |
| `ribbons` | 'gradient' \| 'solid' | 'gradient' | Ribbons |
| `pills` | 'hover' \| 'always' \| 'none' | 'hover' | Pills |
| `captions` | boolean | true | Column captions |
| `height` | number (200–480) | 320 | Height |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Focused**: Stage II stays lit at rest. `focus="stage-ii"`
- **Other flows**: A different seed. `seed={12}`
- **Volt**. `accent="volt"`
- **Share pills**: % of the source on every wide ribbon. `pills="always" seed={7}`
- **Flat ribbons**: Flat grey ribbons, no captions. `ribbons="solid" captions={false} height={280}`
- **Loading**. `status="loading"`

---

# Network Graph

> A force-directed graph on one canvas that cools to rest: nodes sized by their links under a soft top light, gently arced links that fade with length and weight, and a faint filled blob behind each group.

Charts · Relationships · Pro · https://obsydeui.com/charts/network-graph

Point at a node and it heats in the accent while its links light outward with a travelling pulse, neighbours brighten, their labels place themselves without colliding, and the rest steps back. Click a node to pin it, click empty space or press Esc to let go; hold Shift to reach second-degree neighbours. Drag a node and the graph warms up around it. Hover a legend row and its group's blob lifts; click a row to hide a group. Wheel or pinch to zoom, drag empty space to pan, double-click or Reset view to fit again; arrow keys step to the neighbour in that direction and Enter pins. Options: two-hop reach, link curve, group blobs, node size, hub labels at rest, a hatch per group, loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/network-graph
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/network-graph/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { NetworkGraph } from '@/components/obsyde/ember/network-graph/NetworkGraph';

export function Example() {
  return (
    <NetworkGraph />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `nodes` | number (8–120) | 48 | Nodes |
| `clusters` | number (1–5) | 4 | Groups |
| `linkDistance` | number (16–90) | 30 | Link length |
| `charge` | number (0–200) | 100 | Repulsion |
| `hops` | '1' \| '2' | '1' | Reach |
| `pin` | 'none' \| 'hub' | 'none' | Pin |
| `curve` | number (0–1) | 0.35 | Link curve |
| `hulls` | 'soft' \| 'none' | 'soft' | Group blobs |
| `sizeBy` | 'degree' \| 'uniform' | 'degree' | Node size |
| `labels` | 'focus' \| 'hubs' | 'focus' | Labels |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `pattern` | 'none' \| 'per-group' | 'none' | Pattern |
| `height` | number (240–520) | 420 | Height |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 11 | Seed |

## Examples

- **Pinned, two hops**: The best-connected node pinned, reaching two hops. `pin="hub" hops="2"`
- **One web**: One web grown by attachment, hubs labelled. `clusters={1} nodes={40} linkDistance={40} charge={60} labels="hubs"`
- **Volt**. `accent="volt" pin="hub"`
- **Straight and even**: Straight links, equal nodes, no blobs. `curve={0} sizeBy="uniform" hulls="none"`
- **Hatched groups**: A hatch per group, shared with the legend. `clusters={3} nodes={30} linkDistance={34} charge={120} pattern="per-group"`
- **Dense**: Ninety nodes in five groups. `clusters={5} nodes={90} linkDistance={22} charge={70} height={460} labels="hubs"`
- **Loading**. `status="loading"`

---

# Waffle

> A hundred small cells showing a share of 100.

Charts · Composition · Pro · https://obsydeui.com/charts/waffle

Cells fill in reading order with a fast white-hot flash that cools through the accent to bone, and a new value fills or empties only the difference. Split into two or three parts it reads in grey steps; point at a part in the grid, the legend or with the arrow keys and it lifts to bone while the rest recede. Options on the viz-kit: squircle, dot or honeycomb cells, a 20 × 5 strip, a hatched remainder, a legend that hides a part (its cells empty out) and locks on hold, a tooltip panel, an opt-in accent hover, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/waffle
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/waffle/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Waffle } from '@/components/obsyde/ember/waffle/Waffle';

export function Example() {
  return (
    <Waffle />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `value` | number (0–100) | 64 | Value |
| `categories` | number (1–3) | 1 | Parts |
| `changing` | boolean | false | Changing |
| `shape` | 'square' \| 'squircle' \| 'dot' \| 'hex' | 'square' | Shape |
| `layout` | 'square' \| 'strip' | 'square' | Layout |
| `empty` | 'faint' \| 'hatch' | 'faint' | Empty cells |
| `hover` | 'soft' \| 'hot' | 'soft' | Hover |
| `tooltip` | 'none' \| 'panel' | 'none' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `cell` | number (8–32) | 22 | Cell size |
| `gap` | number (1–8) | 4 | Gap |

## Examples

- **Single**. `value={64}`
- **Categories**: Three parts in grey steps. `categories={3}`
- **Changing**: Steps through values; only the difference moves. `changing={true}`
- **Volt**. `categories={3} accent="volt"`
- **Honeycomb**: Hexagon cells over a hatched remainder. `categories={3} shape="hex" empty="hatch" cell={24} gap={3}`
- **Dots**: Round cells with a panel for each part. `categories={2} shape="dot" tooltip="panel"`
- **Strip**: Twenty by five, squircle cells. `value={72} layout="strip" shape="squircle" cell={20}`
- **Loading**. `status="loading"`

---

# Box Plot

> 5 IQR and hollow rings for the outliers past them, on the viz-kit chart.

Charts · Distribution · Pro · https://obsydeui.com/charts/box-plot

Point at a column or step with the arrow keys: the other sets step back, a small accent dot marks the median and the panel reads max, Q3, median, Q1 and min. Boxes grow out of their medians on staggered springs and morph when data changes. Options: a violin of each set's density behind a slim box or on its own, jittered raw values, a mean ring, gradient or textured boxes, a band of normal, an opt-in dashed median line across the other sets, grid or textured backgrounds, panel or corner tooltips, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/box-plot
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/box-plot/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BoxPlot } from '@/components/obsyde/ember/box-plot/BoxPlot';

export function Example() {
  return (
    <BoxPlot />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `series` | number (1–12) | 6 | Sets |
| `samples` | number (5–200) | 40 | Values per set |
| `shape` | 'box' \| 'both' \| 'violin' | 'box' | Shape |
| `points` | boolean | false | Raw points |
| `mean` | boolean | false | Mean |
| `fill` | 'solid' \| 'gradient' \| 'diagonal-up' \| 'dots' \| 'crosshatch' | 'solid' | Fill |
| `compare` | boolean | false | Compare median |
| `band` | boolean | false | Reference band |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (160–480) | 280 | Height |
| `seed` | number (1–999) | 9 | Seed |

## Examples

- **With points**: Raw values jittered behind each box. `points={true}`
- **Volt**. `accent="volt"`
- **Violin**: Each set's density behind a slim box, with its mean. `shape="both" mean={true} samples={120}`
- **Violins**: Density only, on a dot background. `shape="violin" samples={160} background="dots" series={5}`
- **Textured**: Hatched boxes, a band of normal and the median compared across sets. `fill="diagonal-up" band={true} compare={true}`
- **Loading**. `status="loading"`

---

# Sunburst

> A hierarchy as rings around a centre, one grey step per depth, cut apart by 2px gaps, sweeping on clockwise.

Charts · Composition · Pro · https://obsydeui.com/charts/sunburst

Point at a segment and every arc on the path from the centre out to it grows outward a few pixels, cumulatively, while the segment heats to the accent and unrelated branches step back to a quarter (or keep the quieter heat mode, where the path warms in place). Click a segment with parts and it becomes the centre: the angular window and the ring depth run on springs, so every arc morphs into place; click the centre or a breadcrumb pill to go back up. The centre rolls on per-digit mass and reads as a sentence (“24% of Beta · 3 parts”). Options: a legend of the current level that follows the drill and highlights both ways, a hatch per top-level branch, loading and empty states. Arrow keys walk the rings, Enter zooms in, Backspace zooms out.

## Install

```bash
npx shadcn@latest add @obsyde/sunburst
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/sunburst/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Sunburst } from '@/components/obsyde/ember/sunburst/Sunburst';

export function Example() {
  return (
    <Sunburst />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `zoom` | 'none' \| 'Alpha' \| 'Beta' \| 'Gamma' \| 'Delta' \| 'Epsilon' | 'none' | Zoom |
| `hover` | 'grow' \| 'heat' | 'grow' | Hover |
| `legend` | 'none' \| 'list' \| 'row' | 'none' | Legend |
| `pattern` | 'none' \| 'per-branch' | 'none' | Pattern |
| `breadcrumb` | boolean | true | Breadcrumb |
| `branches` | number (2–8) | 5 | Branches |
| `rings` | number (1–4) | 3 | Rings |
| `size` | number (200–440) | 340 | Size |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Zoomed**: Starts inside Beta. `zoom="Beta"`
- **Volt**. `accent="volt"`
- **Linked legend**: The legend follows the drill level and lights the arcs both ways. `legend="list" branches={5}`
- **Hatched branches**: A hatch per top-level branch. `pattern="per-branch" legend="row"`
- **Heat path**: The quieter hover: the path warms in place. `hover="heat" rings={2} branches={6}`
- **Loading**. `status="loading"`

---

# Small Multiples

> A grid of tiny charts that share one crosshair.

Charts · Trends · Pro · https://obsydeui.com/charts/small-multiples

Scrub any tile with a pointer, a finger or the arrow keys and every tile scrubs to the same row: a hairline and a dot ride each curve and each value rolls in its corner, while the day rolls in the header. Only the tile leading at that row runs hot, so the eye finds the leader without a legend. The y scale is shared, so shapes compare by size, or each tile’s own, and switching tweens every domain. Tiles can be areas, lines or bars, sorted by latest value, change or peak, with an average hairline, a shared band of normal, hatched fills, and loading and empty states.

## Install

```bash
npx shadcn@latest add @obsyde/small-multiples
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/small-multiples/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SmallMultiples } from '@/components/obsyde/ember/small-multiples/SmallMultiples';

export function Example() {
  return (
    <SmallMultiples />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `count` | number (2–16) | 6 | Tiles |
| `type` | 'area' \| 'line' \| 'bars' | 'area' | Type |
| `sharedScale` | boolean | true | Shared scale |
| `scaleSwitch` | boolean | false | Scale switch |
| `sort` | 'none' \| 'latest' \| 'change' \| 'peak' | 'none' | Sort |
| `hot` | 'leader' \| 'none' | 'leader' | Hot tile |
| `fill` | 'gradient' \| 'solid' \| 'pattern' | 'gradient' | Fill |
| `average` | boolean | false | Average line |
| `band` | boolean | false | Band of normal |
| `tileHeight` | number (40–160) | 72 | Tile height |
| `columns` | number (0–6) | 0 | Columns (0 = auto) |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'none' \| 'grid' \| 'dots' | 'none' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `points` | number (2–120) | 30 | Points |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Six**. `count={6}`
- **Twelve**. `count={12}`
- **Independent scales**: Each tile on its own range, with a switch. `count={6} sharedScale={false} scaleSwitch={true}`
- **Volt**. `count={6} accent="volt"`
- **Bars, sorted**: Bar tiles sorted by their latest value; the leader’s bar runs hot. `count={6} type="bars" sort="latest" points={20}`
- **Lines with averages**: Line tiles on dots, a dashed average in each, a dashed crosshair. `count={9} type="line" average={true} background="dots" crosshair="dashed" columns={3}`
- **Band of normal, hatched**: A shared 30–60 band across every tile and hatched fills, sorted by change. `count={6} fill="pattern" pattern="diagonal-up" band={true} sort="change"`
- **Loading**. `count={6} status="loading"`

---

# Chart Tooltip

> The tooltip and crosshair kit on real charts.

Charts · Utilities · Pro · https://obsydeui.com/charts/chart-tooltip

A raised panel follows the crosshair on a lazier spring, tweens its size when the content changes, flips at the edges and scale-fades in and out. Crosshairs come solid, dashed or as a gradient, fading at both ends; a finance crosshair tracks the pointer's height with a rolling value pill on the y axis; the date pill on the x axis rolls its digits while axis labels step aside. Dots ride the line with a halo or a ring. Bars keep the dots and the panel without a line, and three sparklines share one store so their crosshairs and readouts move together. Nothing re-renders while the pointer moves.

## Install

```bash
npx shadcn@latest add @obsyde/chart-tooltip
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/chart-tooltip/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ChartTooltipDemo } from '@/components/obsyde/ember/chart-tooltip/ChartTooltipDemo';

export function Example() {
  return (
    <ChartTooltipDemo view="panel" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'panel' \| 'corner' \| 'finance' \| 'bars' \| 'synced' | 'panel' | View |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `glow` | boolean | false | Dot glow |
| `follow` | 'lazy' \| 'crosshair' | 'lazy' | Panel follow |
| `snap` | boolean | true | Snap to rows |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `points` | number (4–120) | 30 | Points |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Panel**: Two series, halo dots, a date pill and a panel on a lazy spring. `view="panel"`
- **Corner readout**: A fixed readout in the plot corner whose values roll. `view="corner" tooltip="corner"`
- **Dashed crosshair, rings**. `view="panel" crosshair="dashed" dots="ring"`
- **Gradient crosshair, glow**. `view="panel" crosshair="gradient" glow={true}`
- **Finance crosshair**: A dashed horizontal line at the pointer with a value pill on the y axis. `view="finance"`
- **Bars**: No line: dots on the bar tops and the panel; the other bars step back. `view="bars" crosshair="none"`
- **Synced sparklines**: Three sparklines on one store: crosshairs and readouts move together. `view="synced" crosshair="dashed"`
- **Volt**. `view="panel" accent="volt" dots="halo"`

---

# Chart Legend

> Every legend layout from the chart kit, wired to real charts through one focus store.

Charts · Utilities · Pro · https://obsydeui.com/charts/chart-legend

Hover a row and the other series step back to a fifth of their strength everywhere; hover a line or a ring and its row lights up as a filled pill. Click a row to switch a series off: it fades out, the row goes ash with a hollow swatch and the axis tweens to what is left. Shift+click a row to lock the isolation; tap the legend or press Esc to let go (press-and-hold locking is an option). Rows are a roving keyboard group: arrows move, Enter toggles, Shift+Enter isolates. Layouts: a row, a list with rolling values and shares, progress rows on concentric rings, Less-to-More levels on a heat grid and a continuous gradient with a caret.

## Install

```bash
npx shadcn@latest add @obsyde/chart-legend
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/chart-legend/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ChartLegendDemo } from '@/components/obsyde/ember/chart-legend/ChartLegendDemo';

export function Example() {
  return (
    <ChartLegendDemo view="row" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'row' \| 'list' \| 'progress' \| 'levels' \| 'gradient' | 'row' | View |
| `marker` | 'dot' \| 'line' \| 'dash' \| 'ring' \| 'square' \| 'pattern' | 'dot' | Marker |
| `toggle` | boolean | true | Click toggles |
| `hold` | boolean | false | Hold also locks |
| `percent` | boolean | true | Show share |
| `series` | number (2–6) | 4 | Series |
| `curve` | 'catmull' \| 'monotone' \| 'linear' \| 'step' | 'catmull' | Curve |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Row**: Four lines; hover, click to hide, Shift+click to lock. `view="row"`
- **List**: Dot, label, value and share; values roll to the scrubbed day. `view="list"`
- **Progress rings**: Progress rows synced both ways with concentric rings. `view="progress" series={4}`
- **Levels**: Less–More swatches on a heat grid; a level isolates its cells. `view="levels"`
- **Gradient**: A continuous scale with a caret at the hovered cell. `view="gradient"`
- **Pattern swatches**: Hatched areas keyed by pattern swatches instead of hue. `view="row" marker="pattern" series={3}`
- **Line markers**. `view="list" marker="line"`
- **Arc**. `view="progress" accent="arc"`

---

# Chart Patterns

> Single-colour textures for charts, on a 6px base tile so lines and dots land on whole pixels and stay crisp at any pixel density.

Charts · Utilities · Pro · https://obsydeui.com/charts/chart-patterns

A catalogue of every preset (lines, grids, dashed and dotted, dots, circles, tiles; -sparse doubles the spacing, -dense halves it), drawn as SVG patterns or canvas patterns, each enlarging on hover. Then patterns at work: a hatched area, patterned bars with one hot month, a donut whose slices differ by hatch direction rather than hue, budget rows where solid is spent and stripes are what is left, and textured backgrounds that replace gridlines and fade at every edge.

## Install

```bash
npx shadcn@latest add @obsyde/chart-patterns
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/chart-patterns/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ChartPatternsDemo } from '@/components/obsyde/ember/chart-patterns/ChartPatternsDemo';

export function Example() {
  return (
    <ChartPatternsDemo view="catalogue" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'catalogue' \| 'area' \| 'bars' \| 'donut' \| 'remaining' \| 'backgrounds' | 'catalogue' | View |
| `pattern` | 'diagonal-up' \| 'diagonal-down' \| 'diagonal-up-sparse' \| 'vertical' \| 'vertical-dense' \| 'horizontal' \| 'crosshatch' \| 'grid' \| 'grid-dotted' \| 'dots' \| 'dots-sparse' \| 'diagonal-dots-up' \| 'circles-dense' \| 'circles' \| 'blocks' \| 'checkerboard-xs' \| 'checkerboard-inset' | 'diagonal-up' | Pattern |
| `scale` | number (1–3) | 1 | Scale |
| `strokeWidth` | number (0.5–2) | 1 | Stroke width |
| `renderer` | 'svg' \| 'canvas' | 'svg' | Renderer |
| `seed` | number (1–999) | 6 | Seed |

## Examples

- **Catalogue**: Every preset, SVG. `view="catalogue"`
- **Catalogue (canvas)**: The same presets as CanvasPatterns. `view="catalogue" renderer="canvas"`
- **Hatched area**. `view="area" pattern="diagonal-up"`
- **Patterned bars**: Plan vs actual told apart by texture; one hot month. `view="bars" pattern="diagonal-up"`
- **Patterned donut**: A different hatch per slice. `view="donut"`
- **Hatch = remaining**: Solid is spent, stripes are left. `view="remaining"`
- **Backgrounds**: Textures behind charts instead of gridlines. `view="backgrounds"`
- **Dense area**. `view="area" pattern="vertical-dense"`

---

# Chart Annotations

> The chart kit layers that explain data, each on a real chart.

Charts · Utilities · Pro · https://obsydeui.com/charts/chart-annotations

The selected value as a dashed leader with a hot value pill, the one accent on a grey chart. A band of normal with inward brackets and tinted axis ticks under a Bollinger envelope; only stretches past the limit run hot. A least-squares trend that tweens to its new fit. A projection with a widening cone and a horizon dot. A code freeze over weekend stripes, with a brush whose outside is dimmed and blurred. A dashed tail for the day still counting. Event badges above the plot whose stacks fan out in an arc on hover. Events as sparks on the line that ping as the crosshair passes while the scrubbed path glows and cools. And a pilot light on the last point that breathes while data is fresh and goes ash when it stops.

## Install

```bash
npx shadcn@latest add @obsyde/chart-annotations
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/chart-annotations/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ChartAnnotationsDemo } from '@/components/obsyde/ember/chart-annotations/ChartAnnotationsDemo';

export function Example() {
  return (
    <ChartAnnotationsDemo view="reference" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'reference' \| 'band' \| 'trend' \| 'projection' \| 'deadline' \| 'tail' \| 'markers' \| 'sparks' \| 'pilot' \| 'select' | 'reference' | View |
| `fill` | 'pattern' \| 'gradient' \| 'solid' | 'pattern' | Fill |
| `trend` | 'gradient' \| 'dashed' \| 'solid' | 'gradient' | Trend |
| `projection` | 'regression' \| 'last-segment' \| 'target' | 'regression' | Projection |
| `live` | boolean | true | Live |
| `valueLabels` | boolean | true | Value labels |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `seed` | number (1–999) | 8 | Seed |

## Examples

- **Reference line**: Click a bar: it runs hot with its value on a dashed line. `view="reference"`
- **Reference band**: Band of normal with brackets, tinted ticks and an envelope. `view="band" fill="pattern"`
- **Trend line**. `view="trend" trend="gradient"`
- **Projection**: Regression forecast with a cone and a horizon dot. `view="projection" projection="regression"`
- **Projection to target**. `view="projection" projection="target"`
- **Deadline and weekends**: A freeze over weekend stripes; brush to zoom. `view="deadline" fill="pattern"`
- **Dashed tail**. `view="tail"`
- **Markers**: Badges with a stack that fans out on hover. `view="markers"`
- **Sparks and afterglow**. `view="sparks"`
- **Pilot light**: Breathes while streaming; ash when stale. `view="pilot" live={true}`
- **Segment selection**: Drag a range; outside dims and the total follows. `view="select"`

---

# Chart States

> Loading, empty and ready on one chart instance, crossfading without a remount.

Charts · Utilities · Pro · https://obsydeui.com/charts/chart-states

Loading is a shimmering placeholder grid with a pulse travelling along a placeholder curve and a quiet shimmering label, or a diagonal sheen, grey pills or a cell field; empty is a faint baseline, a muted message, a hint and an action. Then the reveal modes on a line and bars: a sweep on one steep ease-in-out curve, a cooling entry that draws in the accent and cools to grey behind the leading edge so only the live point keeps its heat, a fade, or nothing; bars land on springs whose mass grows with value. Finally a data change: the shape morphs in 500ms while the previous one lingers as a 1px ash trace and cools away.

## Install

```bash
npx shadcn@latest add @obsyde/chart-states
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/chart-states/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ChartStatesDemo } from '@/components/obsyde/ember/chart-states/ChartStatesDemo';

export function Example() {
  return (
    <ChartStatesDemo view="cycle" status="loading" auto />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'cycle' \| 'reveal' \| 'ghost' | 'cycle' | View |
| `status` | 'loading' \| 'ready' \| 'empty' | 'loading' | Status |
| `variant` | 'pulse' \| 'sweep' \| 'bars' \| 'cells' | 'pulse' | Loading |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `auto` | boolean | true | Auto cycle |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Cycle**: Loading → ready → empty on a timer. `view="cycle" status="loading" auto={true}`
- **Loading: sweep**. `view="cycle" status="loading" variant="sweep" auto={false}`
- **Loading: bars**. `view="cycle" status="loading" variant="bars" auto={false}`
- **Loading: cells**. `view="cycle" status="loading" variant="cells" auto={false}`
- **Empty**: Faint baseline, muted message and an action. `view="cycle" status="empty" auto={false}`
- **Reveal: sweep**. `view="reveal" reveal="sweep"`
- **Reveal: cool**: Drawn hot, cooling to grey. `view="reveal" reveal="cool"`
- **Delta ghost**: New data morphs; the old shape cools away. `view="ghost"`

---

# Live Line

> A streaming line that never ticks. Time glides left at a constant speed a beat behind the stream, like a seismograph, so batches land unseen ahead of the tip and the line simply keeps flowing; or switch to the tide, where the axis swells forward once per batch.

Charts · Trends · Pro · https://obsydeui.com/charts/live-line

Either way the line is drawn up to now and never past it: new samples are revealed by the motion itself. Optional smoothing turns a noisy signal into a calm monotone curve, while the tooltip keeps reading the real samples. Heat follows recency: the newest seconds glow white-hot at the tip and cool through the accent ramp back to grey behind it, with a soft bloom under the hot stretch. A pilot light breathes on the tip, and a rolling value badge sits in the now-gap to its right. The y scale tweens as the range shifts and new labels fade in. Point at it and the stream holds still under the cursor; let go and it catches up in one swell. When the stream stops, the heat drains out and the pilot goes ash.

## Install

```bash
npx shadcn@latest add @obsyde/live-line
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/live-line/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { LiveLine } from '@/components/obsyde/ember/live-line/LiveLine';

export function Example() {
  return (
    <LiveLine tide="glide" window={60} fill="gradient" glow badge />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `tide` | 'glide' \| 'calm' \| 'brisk' | 'glide' | Motion |
| `smoothing` | 'none' \| 'light' \| 'strong' | 'light' | Smoothing |
| `cadence` | number (300–3000) | 1200 | Batch every (ms) |
| `window` | number (15–300) | 60 | Window (s) |
| `cooling` | number (1–30) | 8 | Hot seconds |
| `fill` | 'gradient' \| 'pattern' \| 'none' | 'gradient' | Fill |
| `badge` | boolean | true | Value badge |
| `glow` | boolean | true | Bloom |
| `live` | boolean | true | Live |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 260 | Height |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Smooth stream**: Glides at a constant speed, lightly smoothed. `tide="glide" cadence={1200} window={60} fill="gradient" live={true} glow={true} badge={true} tooltip="panel" background="grid" smoothing="light"`
- **Smooth**: Strong smoothing on a quick glide. `tide="glide" smoothing="strong" cadence={450} window={30} cooling={5} fill="gradient" live={true} glow={true} badge={true} tooltip="panel" background="grid"`
- **Breathing stream**: A batch every 1.2 s; the axis swells forward. `tide="calm" smoothing="none" cadence={1200} window={60} fill="gradient" live={true} glow={true} badge={true} tooltip="panel" background="grid"`
- **Brisk cadence**: Short breaths and a quicker tide. `tide="brisk" cadence={450} window={30} cooling={4} fill="gradient" live={true} glow={true} badge={true} tooltip="panel" background="grid" smoothing="none"`
- **Hatched fill on dots**. `tide="calm" cadence={1200} window={60} fill="pattern" pattern="diagonal-up" background="dots" live={true} glow={true} badge={true} tooltip="panel" smoothing="none"`
- **Corner readout**: A fixed readout instead of a panel; no bloom. `tide="calm" cadence={1500} window={90} fill="none" glow={false} badge={true} live={true} tooltip="corner" crosshair="dashed" dots="ring" background="grid" smoothing="none"`
- **Stale**: The stream stopped: heat drained, pilot ash. `live={false} tide="calm" cadence={1200} window={60} fill="gradient" glow={true} badge={true} tooltip="panel" background="grid" smoothing="none"`
- **Long window**. `tide="calm" cadence={2000} window={180} cooling={20} fill="gradient" live={true} glow={true} badge={true} tooltip="panel" background="hatch" height={300} smoothing="none"`
- **Volt**. `accent="volt" tide="calm" cadence={1200} window={60} fill="gradient" live={true} glow={true} badge={true} tooltip="panel" background="grid" smoothing="none"`
- **Connecting**. `status="loading" live={true} tooltip="panel" background="grid" tide="glide" smoothing="light"`

---

# Violin

> Kernel-density violins per group: each body is the distribution's shape mirrored about its axis, with a box inside (IQR bar, whiskers, a punched-out median) or dashed quartile rules, and an optional strip of the raw samples.

Charts · Distribution · Pro · https://obsydeui.com/charts/violin

Two series split every violin down the middle, with a legend that isolates and toggles a half. Point at a violin and a hot chord cuts across it at your height, exactly as wide as the density there, while the panel reads the value, the density and its percentile; ↑/↓ move that slice from the keyboard. Violins unfold from their axis as the reveal passes and morph when the data or bandwidth changes.

## Install

```bash
npx shadcn@latest add @obsyde/violin
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/violin/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Violin } from '@/components/obsyde/ember/violin/Violin';

export function Example() {
  return (
    <Violin inner="box" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `split` | boolean | false | Split |
| `inner` | 'box' \| 'quartiles' \| 'none' | 'box' | Inner |
| `strip` | boolean | false | Sample strip |
| `bandwidth` | number (0.3–2.5) | 1 | Bandwidth |
| `groups` | number (2–6) | 5 | Groups |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `slice` | 'quiet' \| 'hot' | 'quiet' | Slice |
| `crosshair` | 'none' \| 'dashed' | 'none' | Crosshair |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–480) | 300 | Height |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Box inside**: Five regions with an IQR bar, whiskers and a punched median. `inner="box"`
- **Split**: Weekday on the left half, weekend on the right; the legend isolates and toggles a half. `split={true} inner="box"`
- **Quartile rules, hatched**. `inner="quartiles" pattern="diagonal-up"`
- **Sample strip**: Every sample jittered inside its body. `strip={true} inner="none" background="dots"`
- **Narrow bandwidth**: Half of Silverman's bandwidth: the second mode separates. `bandwidth={0.5} inner="quartiles" groups={4}`
- **Split, patterned, hot slice**. `split={true} pattern="diagonal-down" inner="quartiles" slice="hot" accent="volt"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Tick Ring

> A donut drawn as fine radial ticks. Every slice shares one sweep of ticks with an empty slot between neighbours, and on mount the ring lights up like a gauge with a crest running ahead of the sweep.

Charts · Composition · Pro · https://obsydeui.com/charts/tick-ring

Point at the ring and the tick under the pointer shoots out and thickens while its neighbours lift; it settles slowly, so sweeping round the ring leaves a trail. The hovered slice runs hot and the others step back; the centre rolls from the total at rest to the slice's share or value. The legend is linked both ways: hover isolates, click switches a slice off and the ticks re-deal, hold locks. Tab in and use the arrow keys to step through slices.

## Install

```bash
npx shadcn@latest add @obsyde/tick-ring
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/tick-ring/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { TickRing } from '@/components/obsyde/ember/tick-ring/TickRing';

export function Example() {
  return (
    <TickRing ticks={96} legend="row" center="percent" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `slices` | number (2–7) | 5 | Slices |
| `ticks` | number (36–200) | 96 | Ticks |
| `thickness` | number (0.15–0.5) | 0.3 | Tick length |
| `center` | 'percent' \| 'value' | 'percent' | Centre |
| `trail` | boolean | true | Tick trail |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'none' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Default**: Five channels on 96 ticks with a row legend. `slices={5} ticks={96} legend="row" center="percent"`
- **List legend**: Values and shares beside the ring; the centre shows counts. `slices={6} legend="list" center="value"`
- **Dense**: 160 hairline ticks, seven slices. `slices={7} ticks={160} thickness={0.22} legend="row"`
- **Coarse**: 48 heavy ticks, three slices, no legend. `slices={3} ticks={48} thickness={0.42} legend="none"`
- **Tooltip panel**: A floating panel follows the trail. `slices={4} tooltip="panel" legend="row" accent="volt"`
- **Still ticks**: No trail: slices only light and dim. `slices={5} trail={false} accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Lollipop

> One row per category: a hairline stem that fades in from the baseline and a head at the value, as a dot, a ring or a squircle.

Charts · Comparison · Pro · https://obsydeui.com/charts/lollipop

Rows re-sort on springs, so a new order slides into place rather than jumping. Point at a row or step with the arrow keys and its head pops with a one-shot ping, turns hot and carries a value pill while the other rows step back. Stems can grow from zero or diverge left and right from the average, and an optional hatched track shows what is left to the end of the scale.

## Install

```bash
npx shadcn@latest add @obsyde/lollipop
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/lollipop/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Lollipop } from '@/components/obsyde/ember/lollipop/Lollipop';

export function Example() {
  return (
    <Lollipop head="dot" sort="desc" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `head` | 'dot' \| 'ring' \| 'squircle' | 'dot' | Head |
| `sort` | 'desc' \| 'asc' \| 'none' | 'desc' | Sort |
| `sortSwitch` | boolean | false | Sort switch |
| `baseline` | 'zero' \| 'mean' | 'zero' | Baseline |
| `highlight` | 'max' \| 'min' \| 'none' | 'max' | Highlight |
| `track` | 'none' \| 'solid' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Track |
| `rows` | number (2–16) | 8 | Rows |
| `tooltip` | 'pill' \| 'panel' \| 'none' | 'pill' | Tooltip |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Default**: Eight regions, highest first; the top head is hot. `rows={8} head="dot" sort="desc"`
- **Sort switch**: High / Low / A–Z re-sort the rows on springs. `rows={8} sortSwitch={true} head="ring"`
- **Squircle heads**: Squircle heads, values printed after each one. `rows={8} head="squircle" valueLabels={true}`
- **From the average**: Stems diverge left and right from a dashed average. `rows={10} baseline="mean" head="dot" highlight="none"`
- **Remaining track**: A hatched track runs from each head to the end of the scale. `rows={6} track="diagonal-up" head="ring" background="none"`
- **Dense**: Sixteen rows, a panel tooltip instead of the pill. `rows={16} tooltip="panel" head="dot" seed={9}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Density Plot

> Smooth kernel-density curves, overlaid on one baseline or stacked as ridges that occlude the row behind.

Charts · Distribution · Pro · https://obsydeui.com/charts/density-plot

The area under each curve is an ordered dither whose ink is the density itself: the peak is near-solid, the tails thin to scattered dots, and there are no edge lines. Gradient and pattern fills are there too. Each curve carries its median and interquartile range on its baseline, the crosshair reads the share of samples below the pointer, and a narrow / auto / wide bandwidth switch morphs every curve over 500ms. The legend isolates and toggles curves; the y range tweens to what is left.

## Install

```bash
npx shadcn@latest add @obsyde/density-plot
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/density-plot/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DensityPlot } from '@/components/obsyde/ember/density-plot/DensityPlot';

export function Example() {
  return (
    <DensityPlot mode="overlay" shading="dither" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `mode` | 'overlay' \| 'ridge' | 'overlay' | Mode |
| `shading` | 'dither' \| 'gradient' \| 'pattern' \| 'none' | 'dither' | Shading |
| `bandwidth` | number (0.3–2.5) | 1 | Bandwidth |
| `markers` | boolean | true | Median & IQR |
| `series` | number (1–3) | 3 | Series |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'none' \| 'solid' \| 'dashed' \| 'gradient' | 'none' | Crosshair |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–480) | 280 | Height |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Dithered**: Three cohorts; ink density is probability density. `mode="overlay" shading="dither"`
- **Ridges**: One ridge per weekday, each occluding the row behind. `mode="ridge" shading="dither" height={340}`
- **Gradient fill, crosshair**. `mode="overlay" shading="gradient" crosshair="dashed"`
- **Patterned**. `mode="overlay" shading="pattern" background="none"`
- **Ridges, gradient**. `mode="ridge" shading="gradient" markers={false} height={340} accent="arc"`
- **Narrow bandwidth**: Half of Silverman's bandwidth: the bimodal cohort splits. `mode="overlay" shading="dither" bandwidth={0.5} series={2}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Radial Clock

> A day wrapped round a dial. Each time bin is a column of dots on concentric rows that glow brighter toward the rim, stacked by series, inside an instrument tick ring that hugs the hole.

Charts · Radial · Pro · https://obsydeui.com/charts/radial-clock

Bins after now are yesterday’s ghost, smaller and faint, or a hatched forecast. The current bin burns in the accent and the bins behind it cool back to grey, the busy ones more slowly. Point at a bin, or Tab in and step with the arrow keys: a spoke springs round to it, the other bins step back and the centre rewrites itself as a sentence with rolling digits, against yesterday. The legend isolates a series across every layer and clicking it restacks the dots. Also as five rows of big patterned dots, or as stacked radial bars.

## Install

```bash
npx shadcn@latest add @obsyde/radial-clock
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/radial-clock/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RadialClock } from '@/components/obsyde/ember/radial-clock/RadialClock';

export function Example() {
  return (
    <RadialClock variant="dots" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `variant` | 'dots' \| 'patterned' \| 'bars' | 'dots' | Variant |
| `dataset` | 'activity' \| 'hourly' \| 'energy' | 'activity' | Data |
| `bins` | '24' \| '48' \| '96' | '96' | Bins |
| `now` | number (0–23.75) | 17.25 | Now (hour) |
| `heat` | boolean | true | Furnace heat |
| `annotations` | boolean | true | Notes |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `size` | number (240–560) | 440 | Size |
| `seed` | number (1–999) | 1 | Seed |

## Examples

- **Dot bars**: 96 bins of three series; yesterday ghosted after now; a note on an overnight spike. `variant="dots" dataset="activity" bins={96}`
- **Hourly columns**: 24 columns of dots, one series, gradient scrubber. `variant="dots" dataset="hourly" bins={24} crosshair="gradient" now={14.5}`
- **Patterned dots**: Five rows of big dots per hour: solid and hatched series, the rest of the day as a hatched forecast. `variant="patterned" dataset="energy" crosshair="dashed" now={13.4}`
- **Radial bars**: Stacked bars with a constant gap; ghost bars after now. `variant="bars" dataset="activity" bins={48} now={15.6}`
- **Early morning**: Most of the day still to come, ghosted with a hatch. `variant="dots" dataset="activity" bins={96} now={7.2} pattern="diagonal-up"`
- **No furnace**: Heat off: monochrome throughout. `variant="dots" dataset="activity" bins={96} heat={false} crosshair="dashed"`
- **Loading**. `status="loading"`

---

# Step Line

> Honest steps for tiers, plans and prices: values that hold until they change.

Charts · Trends · Pro · https://obsydeui.com/charts/step-line

Each value owns a period, and its step can sit at the start of the period, its end or its middle. The period still running is dashed, and its label carries the accent. Labels sit once per step on the plateau they name, and drop out when a plateau is too short to hold one. Scrub it and the plateau under the cursor lifts as a shelf: a faint column down to the baseline and a brighter tread that springs from plateau to plateau. The tooltip says how long the tier held and how far the last step moved. A second series (active against licensed, use against quota) runs as a plain grey step line, linked to the legend.

## Install

```bash
npx shadcn@latest add @obsyde/step-line
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/step-line/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { StepLine } from '@/components/obsyde/ember/step-line/StepLine';

export function Example() {
  return (
    <StepLine step="after" fill="gradient" open valueLabels shelf />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'seats' \| 'price' \| 'quota' | 'seats' | Data |
| `step` | 'after' \| 'before' \| 'mid' | 'after' | Step at |
| `fill` | 'gradient' \| 'solid' \| 'pattern' \| 'none' | 'gradient' | Fill |
| `open` | boolean | true | Open period |
| `shelf` | boolean | true | Shelf on hover |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | true | Value labels |
| `height` | number (140–480) | 260 | Height |
| `points` | number (4–120) | 18 | Points |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Seats**: Licensed tiers over active seats; the open month is dashed. `view="seats" step="after" fill="gradient" open={true} valueLabels={true} shelf={true} legend="row" tooltip="panel" points={18}`
- **Price tiers, solid**: One series with a solid fill and step labels. `view="price" step="after" fill="solid" open={false} valueLabels={true} shelf={true} legend="none" tooltip="panel" points={24}`
- **Step before**: Values land at the end of their period. `view="seats" step="before" fill="none" open={true} valueLabels={true} shelf={true} legend="row" tooltip="panel" points={18} crosshair="dashed" dots="ring"`
- **Mid step, hatched**. `view="quota" step="mid" fill="pattern" pattern="diagonal-up" open={true} valueLabels={true} shelf={true} legend="row" tooltip="panel" points={14}`
- **Quota vs peak**: A corner readout over a quota and its peak use. `view="quota" step="after" fill="gradient" open={true} valueLabels={true} shelf={true} legend="row" tooltip="corner" points={20}`
- **Dense, no labels**. `view="price" step="after" fill="gradient" open={true} valueLabels={false} shelf={true} legend="none" tooltip="panel" points={60} background="dots"`
- **Arc**. `accent="arc" view="seats" step="after" fill="gradient" open={true} valueLabels={true} shelf={true} legend="row" tooltip="panel" points={18}`
- **Empty**. `view="seats" status="empty" legend="row" tooltip="panel" points={18}`

---

# Profit / Loss Line

> One line split exactly at zero. Above it the line and a soft fill are bone; below it the line drops to a cool grey with a hatch beneath, so a loss reads as money gone rather than as a colour.

Charts · Trends · Pro · https://obsydeui.com/charts/profit-loss-line

The zero baseline is the one bright rule. The best and worst points carry quiet rings and pills that only take the accent while the cursor sits on them, and the crosshair snaps to them and to every zero crossing (Shift + arrows jump between them). The cursor dot takes the tone of its side. The legend's Profit and Loss rows isolate one sign or hide it, and the axis tweens to what is left.

## Install

```bash
npx shadcn@latest add @obsyde/profit-loss-line
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/profit-loss-line/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ProfitLossLine } from '@/components/obsyde/ember/profit-loss-line/ProfitLossLine';

export function Example() {
  return (
    <ProfitLossLine
      profitFill="gradient"
      lossFill="pattern"
      pattern="diagonal-up"
      extremes
      legend="row"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `profitFill` | 'gradient' \| 'solid' \| 'none' | 'gradient' | Profit fill |
| `lossFill` | 'pattern' \| 'gradient' \| 'none' | 'pattern' | Loss fill |
| `extremes` | boolean | true | High and low |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'diagonal-up' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 260 | Height |
| `points` | number (4–120) | 40 | Points |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Hatched loss**: Bone above zero, hatch below; extremes light under the cursor. `profitFill="gradient" lossFill="pattern" pattern="diagonal-up" extremes={true} legend="row" tooltip="panel" points={40}`
- **Lines only**. `profitFill="none" lossFill="none" pattern="diagonal-up" extremes={true} legend="row" tooltip="panel" crosshair="dashed" points={60}`
- **Dotted loss, solid profit**. `profitFill="solid" lossFill="pattern" pattern="dots" extremes={true} legend="row" tooltip="panel" points={40}`
- **Corner readout**. `profitFill="gradient" lossFill="pattern" pattern="diagonal-down" extremes={true} legend="row" tooltip="corner" points={40}`
- **Linear, dense**. `profitFill="gradient" lossFill="pattern" pattern="vertical" extremes={false} legend="row" tooltip="panel" curve="linear" points={90} background="dots" seed={9}`
- **Volt**. `accent="volt" profitFill="gradient" lossFill="pattern" pattern="diagonal-up" extremes={true} legend="row" tooltip="panel" points={40} seed={12}`
- **Loading**. `status="loading" legend="row" tooltip="panel" points={40}`

---

# Range Band

> A line inside its envelope: min–max, a confidence interval, or Bollinger bands (a moving average ± kσ).

Charts · Trends · Pro · https://obsydeui.com/charts/range-band

The band fills solid, as a gradient or with a hatch, and fades out at both ends instead of stopping. Scrub it and a range capsule rises at the cursor: a soft rounded column from low to high with a dot on each edge and the line's own dot between them, so the spread reads as a physical span; the tooltip says "low – high". Readings that break out of the band are the only heat on the chart. The legend isolates or hides the line or the band, and the axis tweens to fit.

## Install

```bash
npx shadcn@latest add @obsyde/range-band
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/range-band/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RangeBand } from '@/components/obsyde/ember/range-band/RangeBand';

export function Example() {
  return (
    <RangeBand
      fill="gradient"
      capsule
      breaches
      legend="row"
      tooltip="panel"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `mode` | 'minmax' \| 'confidence' \| 'bollinger' | 'minmax' | Band |
| `fill` | 'gradient' \| 'solid' \| 'pattern' | 'gradient' | Fill |
| `edges` | boolean | false | Dashed edges |
| `breaches` | boolean | true | Breakouts |
| `capsule` | boolean | true | Range capsule |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 260 | Height |
| `points` | number (6–160) | 40 | Points |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **p05–p95**: Median latency inside its band; spills glow. `mode="minmax" fill="gradient" capsule={true} breaches={true} legend="row" tooltip="panel" points={40}`
- **Confidence interval**. `mode="confidence" fill="solid" capsule={true} breaches={false} legend="row" tooltip="panel" points={30} edges={true}`
- **Bollinger bands**: SMA 20 ± 2σ with the average dashed. `mode="bollinger" fill="pattern" pattern="diagonal-up" k={2} capsule={true} breaches={true} legend="row" tooltip="panel" points={80}`
- **Wide bands, corner readout**: ±2.5σ with dashed edges; only real breakouts glow. `mode="bollinger" fill="gradient" k={2.5} edges={true} capsule={true} breaches={true} legend="row" tooltip="corner" points={60} crosshair="dashed"`
- **Hatched band**. `mode="minmax" fill="pattern" pattern="diagonal-down" capsule={true} breaches={true} legend="row" tooltip="panel" points={30} background="none"`
- **Linear, no capsule**. `mode="confidence" fill="gradient" capsule={false} breaches={false} legend="row" tooltip="panel" curve="linear" points={24} dots="ring"`
- **Arc**. `accent="arc" mode="minmax" fill="gradient" capsule={true} breaches={true} legend="row" tooltip="panel" points={40}`
- **Empty**. `mode="minmax" status="empty" legend="row" tooltip="panel" points={40}`

---

# Funnel

> Stages as one stream that narrows from step to step.

Charts · Composition · Pro · https://obsydeui.com/charts/funnel

Each stage is a solid core inside lighter halo rings, and the share that fell away between two stages is left behind as a hatched ghost of the previous width: hatch means lost. Conversion pills sit on faint dividers that fade at both ends. On mount the stages land one after another on springs, cores first and halos a beat later. Point at a stage, or Tab in and use the arrow keys: it runs hot, the rest step back, a panel gives the count, share of entry and drop, and the readout rolls from overall conversion to that stage. Horizontal or vertical, curved or straight edges, zero to two halos.

## Install

```bash
npx shadcn@latest add @obsyde/funnel
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/funnel/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Funnel } from '@/components/obsyde/ember/funnel/Funnel';

export function Example() {
  return (
    <Funnel
      orientation="horizontal"
      halos={2}
      edges="curved"
      pattern="diagonal-up"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `orientation` | 'horizontal' \| 'vertical' | 'horizontal' | Orientation |
| `stages` | number (2–7) | 5 | Stages |
| `halos` | number (0–2) | 2 | Halos |
| `edges` | 'curved' \| 'straight' | 'curved' | Edges |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'diagonal-up' | Pattern |
| `conversion` | boolean | true | Conversion pills |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (180–400) | 260 | Height |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Default**: Five stages, two halos, hatched drop-off. `orientation="horizontal" stages={5} halos={2} edges="curved" pattern="diagonal-up"`
- **Vertical**: Top to bottom with labels left and pills right. `orientation="vertical" stages={5} halos={2} edges="curved" pattern="diagonal-up"`
- **Straight edges**: A classic funnel taper, one halo. `orientation="horizontal" stages={5} halos={1} edges="straight" pattern="diagonal-down"`
- **Bare cores**: No halos, dotted drop-off, seven stages. `orientation="horizontal" stages={7} halos={0} edges="curved" pattern="dots"`
- **Three steps**: A short funnel without the drop-off ghost. `orientation="horizontal" stages={3} halos={2} edges="curved" pattern="none" accent="volt"`
- **Vertical, straight**. `orientation="vertical" stages={4} halos={1} edges="straight" pattern="crosshatch" accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Range Bars

> Floating bars, one per row, from a start to an end, with a capsule tick for the current value.

Charts · Comparison · Pro · https://obsydeui.com/charts/range-bars

As a range it reads low to high and where things sit now; a tick that falls outside its range turns hot and a dashed leader ties it back. As a budget it reads in, spent and left: the spent part solid, what is left hatched, a tick at today's pace and anything past the budget in the accent. Point at a row or step with the arrow keys: the others step back, the ends print their values and a pill rides the tick. Ticks glide on springs when the data changes.

## Install

```bash
npx shadcn@latest add @obsyde/range-bars
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/range-bars/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RangeBars } from '@/components/obsyde/ember/range-bars/RangeBars';

export function Example() {
  return (
    <RangeBars variant="range" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `variant` | 'range' \| 'budget' | 'range' | Variant |
| `rows` | number (2–12) | 7 | Rows |
| `ticks` | boolean | true | Ticks |
| `outliers` | boolean | false | Outliers |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'pill' \| 'panel' \| 'none' | 'pill' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Range**: Seven days, low to high, with the latest reading. `variant="range" rows={7}`
- **Out of range**: Two readings outside their range run hot, tied back by a leader. `variant="range" rows={7} outliers={true}`
- **Budget**: Spent, left (hatched) and a pace tick; overspend runs hot. `variant="budget" rows={7} valueLabels={true} pattern="diagonal-up"`
- **Budget, panel**: Dotted remainder and a panel readout. `variant="budget" rows={5} pattern="dots" tooltip="panel" seed={8}`
- **Bare ranges**: Twelve rows, no ticks, no legend, no grid. `variant="range" rows={12} ticks={false} legend="none" background="none" seed={11}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Unit Dots

> A unit chart: every period is a column of equal-value squares, so one square is always the same amount and nothing can be exaggerated.

Charts · Distribution · Pro · https://obsydeui.com/charts/unit-dots

Two series share each column from the baseline, the larger one behind and the smaller lit inside it, with the empty squares above kept as a faint ghost grid that carries the scale. Scrub a column and it becomes a highlight band riding the cursor spring: its squares light up, the primary series in the accent, while every other column steps back. Squares cascade in column by column on a springy overshoot; switching the range re-deals them.

## Install

```bash
npx shadcn@latest add @obsyde/unit-dots
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/unit-dots/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { UnitDots } from '@/components/obsyde/ember/unit-dots/UnitDots';

export function Example() {
  return (
    <UnitDots />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `range` | 'year' \| 'quarter' | 'year' | Range |
| `shape` | 'square' \| 'round' | 'square' | Shape |
| `rows` | number (6–24) | 16 | Rows |
| `ghost` | boolean | true | Ghost grid |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `reveal` | 'cascade' \| 'none' | 'cascade' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–480) | 300 | Height |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Year**: Twenty-six fortnights of inflow and outflow, one square per unit. `range="year"`
- **Quarter, round**. `range="quarter" shape="round"`
- **Corner readout**. `tooltip="corner" range="year"`
- **Hatched inflow**: Inflow squares carry a hatch; outflow stays solid. `pattern="diagonal-up" range="quarter"`
- **No ghost grid**. `ghost={false} rows={12} accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Timeline Bars

> Events on a week track where a bar's width is its duration, one lane per kind.

Charts · Calendars · Pro · https://obsydeui.com/charts/timeline-bars

A now line cuts the track in the accent: everything before it is solid, everything after it is hatched as planned, and the one event in progress burns in the accent up to now. Hover a bar for a pill that reads "2h 14m  Review · Wed 11:45–13:59" while the rest step back and a time pill follows the pointer; switch between week and day, or click a day, and the view tweens in with hour ticks and labels inside the bars. Lanes isolate and hide from the legend; ←/→ walk the events from the keyboard.

## Install

```bash
npx shadcn@latest add @obsyde/timeline-bars
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/timeline-bars/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { TimelineBars } from '@/components/obsyde/ember/timeline-bars/TimelineBars';

export function Example() {
  return (
    <TimelineBars />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `zoom` | 'week' \| 'day' | 'week' | Zoom |
| `lanes` | number (2–4) | 4 | Lanes |
| `now` | boolean | true | Now line |
| `crosshair` | 'none' \| 'solid' \| 'dashed' | 'none' | Crosshair |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `pattern` | 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' \| 'none' | 'diagonal-up' | Pattern |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 6 | Seed |

## Examples

- **Week**: Four lanes, past solid, future hatched, the running event hot. `zoom="week"`
- **Day**: Zoomed to Wednesday with hour ticks and labels inside the bars. `zoom="day"`
- **Dotted future**. `pattern="dots" zoom="week"`
- **No now line**. `now={false} lanes={3}`
- **Volt, two lanes**. `lanes={2} accent="volt" zoom="day"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Barcode Stack

> A category breakdown drawn as a stacked progress bar of hairlines.

Charts · Composition · Pro · https://obsydeui.com/charts/barcode-stack

Each category is a run of thin vertical strokes in the grey ladder, what is left of the limit is a run of ghost strokes, and strokes past the target run hot. On mount the strokes rise in a wave from left to right. The pointer drags a comb through the bar: strokes near it stretch up on a spring and settle behind it. Point at a run, or Tab in and use the arrow keys, to isolate it; the readout rolls from total spend to that category and a panel gives its share. Labels above the runs thin themselves so none collide. As one stacked bar, or one barcode row per category.

## Install

```bash
npx shadcn@latest add @obsyde/barcode-stack
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/barcode-stack/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BarcodeStack } from '@/components/obsyde/ember/barcode-stack/BarcodeStack';

export function Example() {
  return (
    <BarcodeStack layout="stack" target={0.7} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'stack' \| 'rows' | 'stack' | Layout |
| `texture` | 'hairline' \| 'dense' \| 'dashed' | 'hairline' | Texture |
| `categories` | number (2–7) | 5 | Categories |
| `spent` | number (0.1–1) | 0.78 | Spent |
| `target` | number (0–1) | 0.7 | Target |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Default**: Five categories against a limit, target at 70%. `layout="stack" categories={5} spent={0.78} target={0.7}`
- **Under target**: Spend below the target: nothing runs hot. `layout="stack" categories={4} spent={0.52} target={0.75}`
- **Rows**: One barcode row per category. `layout="rows" categories={6}`
- **Dense**: Tighter hairlines, seven categories, no target. `layout="stack" texture="dense" categories={7} target={0}`
- **Dashed strokes**. `layout="stack" texture="dashed" categories={4} accent="volt"`
- **Rows, dense**. `layout="rows" texture="dense" categories={4} legend="none" accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Radial Line

> Today as an open line round a 24-hour dial, ending in a pulsing dot at now, against yesterday’s dashed full loop on the same scale, inside an instrument tick ring and faint value rings.

Charts · Radial · Pro · https://obsydeui.com/charts/radial-line

The line draws on clockwise, and its last stretch runs hot: what just happened glows, older data has cooled to bone. Point anywhere round the dial or step with the arrow keys: a gradient spoke springs to the hour, a marker rides the curve on its own spring, the line steps back to half strength while a short window round the marker is re-stroked at full, and the centre rewrites itself as a sentence with rolling digits. An optional seam fills the gap between the loops, hot only where today runs ahead.

## Install

```bash
npx shadcn@latest add @obsyde/radial-line
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/radial-line/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RadialLine } from '@/components/obsyde/ember/radial-line/RadialLine';

export function Example() {
  return (
    <RadialLine />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `points` | number (12–144) | 96 | Points |
| `now` | number (0–23.75) | 17.25 | Now (hour) |
| `seam` | boolean | false | Seam |
| `heat` | boolean | true | Heat by recency |
| `rings` | boolean | true | Value rings |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'gradient' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `curve` | 'catmull' \| 'linear' | 'catmull' | Curve |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `size` | number (240–560) | 440 | Size |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Today vs yesterday**: 96 points, gradient spoke, marker on its own spring. `points={96}`
- **Overheat seam**: The gap between the loops fills, hot only where today runs ahead. `points={96} seam={true}`
- **Hourly, linear**: 24 straight segments; the marker snaps; ring dots. `points={24} curve="linear" marker="snap" dots="ring" crosshair="solid"`
- **Dashed spoke, ring marker**: A dashed spoke and a hollow marker; no value rings. `points={96} crosshair="dashed" dots="ring" rings={false}`
- **Late evening**: Almost a full loop; heat off, no rings. `points={96} now={22.5} heat={false} rings={false}`
- **Empty**. `status="empty"`

---

# Circle Pack

> A hierarchy as nested circles, packed tight with an even gap between siblings and a clear inset inside each parent.

Charts · Composition · Pro · https://obsydeui.com/charts/circle-pack

Every group names itself along its top arc, in a band the layout keeps free, so a label never sits on a circle. Leaves take one grey ramp by value across the whole chart, with ink picked for contrast, and show their name (and value, where there is room) only when it fits. Click a circle and the camera springs in until it fills the stage; the breadcrumb, a click on the background, or Esc springs back out one level. Hover a leaf and it lifts hot while everything else steps back; hover a group and the group stays lit. The legend keys the groups: hover isolates, click removes a group and the pack re-settles. Tab in: arrows walk the circles in view, Enter zooms in, Esc zooms out.

## Install

```bash
npx shadcn@latest add @obsyde/circle-pack
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/circle-pack/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { CirclePack } from '@/components/obsyde/ember/circle-pack/CirclePack';

export function Example() {
  return (
    <CirclePack />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `groups` | number (2–6) | 5 | Groups |
| `depth` | number (2–3) | 3 | Depth |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `labels` | boolean | true | Leaf labels |
| `padding` | number (1–12) | 3 | Padding |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (280–560) | 440 | Height |
| `seed` | number (1–999) | 7 | Seed |

## Examples

- **Default**: Regions → teams → buckets; click to zoom. `groups={5} depth={3}`
- **Two levels**: Groups straight to leaves. `groups={4} depth={2}`
- **Hatched groups**: Group discs carry a texture. `groups={5} depth={3} pattern="diagonal-up"`
- **Loose**: More air between siblings, no leaf labels. `groups={6} depth={2} padding={9} labels={false}`
- **Volt**. `accent="volt" groups={3} depth={3} pattern="dots"`
- **No legend**. `accent="arc" groups={5} depth={3} legend="none"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Year Loop

> A year wrapped into a loop. The record range and the normal range are radial bands, faint and stronger, with no edge strokes; this year’s line runs from January round to today and ends in a dot, over faint value rings.

Charts · Radial · Pro · https://obsydeui.com/charts/year-loop

Days that broke the record leave a scorch mark, a small accent spark just past the line: the only heat on the chart. Point at any day or step with the arrow keys: a spoke springs to it, a marker rides the line, and the centre reads the day, its value with rolling digits, how far it sits from normal, and the normal and record ranges. Pointing at a band or the line isolates it, both ways with the legend.

## Install

```bash
npx shadcn@latest add @obsyde/year-loop
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/year-loop/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { YearLoop } from '@/components/obsyde/ember/year-loop/YearLoop';

export function Example() {
  return (
    <YearLoop />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `today` | number (0–364) | 202 | Today (day) |
| `units` | 'fahrenheit' \| 'celsius' | 'fahrenheit' | Units |
| `scorch` | boolean | true | Scorch records |
| `rings` | boolean | true | Value rings |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'gradient' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `size` | number (240–580) | 460 | Size |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Hatched record band**: The record range as a diagonal hatch. `pattern="diagonal-up"`
- **Full year, Celsius**: The loop closed on Dec 31; dashed spoke, ring marker. `today={364} units="celsius" crosshair="dashed" dots="ring"`
- **Early spring**: Only March so far; no rings. `today={75} rings={false}`
- **No scorch**: Records unmarked; monochrome throughout. `scorch={false} crosshair="solid"`
- **Loading**. `status="loading"`

---

# Beeswarm

> A deterministic swarm plot: every sample is a dot on the value axis, nudged up or down just enough not to touch its neighbours, so the outline of each swarm is the distribution and every point can still be pointed at.

Charts · Distribution · Pro · https://obsydeui.com/charts/beeswarm

Switch the grouping (all, by region, by tier) and each dot flies to its new swarm on its own spring, leaving in value order so the population visibly re-sorts. The pointer snaps to the nearest dot rather than the nearest x: it lifts and lights in the accent while the other groups step back, optionally blurring out of focus. Dashed median ticks cross each swarm; the legend isolates and hides groups; ←/→ walk the dots in value order.

## Install

```bash
npx shadcn@latest add @obsyde/beeswarm
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/beeswarm/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Beeswarm } from '@/components/obsyde/ember/beeswarm/Beeswarm';

export function Example() {
  return (
    <Beeswarm by="group" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `by` | 'group' \| 'tier' \| 'none' | 'group' | Group by |
| `points` | number (20–400) | 220 | Points |
| `radius` | number (2–6) | 4 | Radius |
| `blur` | boolean | false | Blur inactive |
| `median` | boolean | true | Medians |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (180–480) | 300 | Height |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **By region**: Four swarms; the hovered dot lights and its region stays forward. `by="group"`
- **One swarm**. `by="none" height={220}`
- **By tier**. `by="tier"`
- **Depth of field**: Other groups blur out of focus on hover. `by="group" blur={true} background="dots"`
- **Dense**: Four hundred builds; dots shrink until every swarm fits its row. `points={400} radius={3.5} median={false}`
- **Arc**. `accent="arc" by="tier" background="none"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Waterfall

> A start, the steps up and down, subtotals and the end.

Charts · Comparison · Pro · https://obsydeui.com/charts/waterfall

Steps up are bone, steps down are hatched grey, subtotals sit quiet and the final total is the one bar in the accent. Faint dashed connectors carry each level across to the next step. On entry the bars pour left to right, each step dropping from the level the previous one left. Point at a bar or step with the arrow keys and the rest step back while a panel reads the change, the running total and the change on the start; an optional level leader runs a quiet dashed line to the axis with the running total in a pill.

## Install

```bash
npx shadcn@latest add @obsyde/waterfall
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/waterfall/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Waterfall } from '@/components/obsyde/ember/waterfall/Waterfall';

export function Example() {
  return (
    <Waterfall />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `dataset` | 'bridge' \| 'quarters' | 'bridge' | Data |
| `connectors` | boolean | true | Connectors |
| `level` | boolean | false | Level leader |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'diagonal-up' | Pattern |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `height` | number (140–480) | 280 | Height |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Bridge**: Revenue to net, with a gross subtotal. `dataset="bridge"`
- **Value labels**: Signed changes on every step, totals on the totals. `dataset="bridge" valueLabels={true} legend="none"`
- **Quarterly subtotals**: Twelve months with a subtotal per quarter. `dataset="quarters" height={300}`
- **Level leader**: Hover runs a quiet leader to the axis with the running total. `dataset="bridge" level={true} tooltip="none"`
- **Plain**: No connectors, dotted decreases, dot background. `dataset="bridge" connectors={false} pattern="dots" background="dots" seed={7}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Ribbon Chart

> Stacked bars per period, re-ranked every period with the leader on top, joined by flowing ribbons that carry each series from one period to the next.

Charts · Composition · Pro · https://obsydeui.com/charts/ribbon-chart

A change of rank reads as two ribbons crossing. Grey ladder at rest, with an optional texture per series on the ribbons. Hover a ribbon or a bar and that series runs hot from end to end while the others step back; the period under the pointer gets a soft wash instead of a crosshair line and the panel lists it by rank. Rank and name sit at the right end of each band. A legend click drops a series and every stack re-ranks on a 500ms morph; the arrow keys step through the periods.

## Install

```bash
npx shadcn@latest add @obsyde/ribbon-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/ribbon-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RibbonChart } from '@/components/obsyde/ember/ribbon-chart/RibbonChart';

export function Example() {
  return (
    <RibbonChart series={4} order="rank" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `series` | number (2–6) | 4 | Series |
| `periods` | number (3–10) | 6 | Periods |
| `order` | 'rank' \| 'fixed' | 'rank' | Order |
| `barWidth` | number (0.15–0.7) | 0.36 | Bar width |
| `pattern` | 'none' \| 'series' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `ribbon` | 'soft' \| 'strong' | 'soft' | Ribbons |
| `endLabels` | boolean | true | End labels |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `background` | 'grid' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `height` | number (200–480) | 300 | Height |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Default**: Four regions over six quarters, re-ranked each quarter. `series={4} periods={6} order="rank"`
- **Textured ribbons**: A different hatch per series on the ribbons. `series={4} periods={6} pattern="series" ribbon="strong"`
- **Six series, ten quarters**: Narrow bars, long ribbons. `series={6} periods={10} barWidth={0.26}`
- **Fixed order**: No re-ranking: a plain stacked flow. `series={4} periods={6} order="fixed"`
- **Value labels**: Wide bars with values inside. `series={3} periods={5} barWidth={0.5} valueLabels={true} accent="volt"`
- **Bare**: No grid, no end labels, no legend. `series={5} periods={7} endLabels={false} background="none" legend="none" accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Bubble Chart

> Bubbles for x, y, size and category: area encodes size on a square-root scale and each category is a step on the grey ladder.

Charts · Distribution · Pro · https://obsydeui.com/charts/bubble-chart

Labels never collide: a label sits inside its bubble when it fits, otherwise to the right, left, above or below, otherwise it is left out. Switch periods and every bubble glides to its new place and size over 500ms, leaving a dashed ash ring where it was that cools away, so you see what moved. Hovering lights one bubble in the accent and keeps its category forward while the others step back; an optional size-weighted trend line fades at both ends and re-fits when categories are hidden.

## Install

```bash
npx shadcn@latest add @obsyde/bubble-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/bubble-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BubbleChart } from '@/components/obsyde/ember/bubble-chart/BubbleChart';

export function Example() {
  return (
    <BubbleChart />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `period` | 'first' \| 'second' | 'first' | Period |
| `bubbles` | number (4–24) | 18 | Bubbles |
| `labels` | boolean | true | Labels |
| `trend` | 'none' \| 'dashed' \| 'gradient' | 'none' | Trend |
| `ghost` | boolean | true | Morph ghosts |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'grow' \| 'none' | 'grow' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (220–480) | 320 | Height |
| `seed` | number (1–999) | 8 | Seed |

## Examples

- **Labelled**: Eighteen units in four regions, labels placed without collisions. `period="first"`
- **Second half**: The H2 dataset; switch back and forth to watch the morph and its ghosts. `period="second"`
- **Trend line**. `trend="gradient" labels={false}`
- **Dashed trend, dots**. `trend="dashed" background="dots"`
- **Patterned**. `pattern="diagonal-up" labels={false}`
- **Crowded**: Twenty-four units: only the labels that fit are shown. `bubbles={24} accent="volt"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Forecast Handoff

> Measured bars hand off to a dashed forecast at a "today" divider.

Charts · Trends · Pro · https://obsydeui.com/charts/forecast-handoff

The forecast sits inside a widening confidence cone drawn as an ordered dither: stipple density is the probability, so the cone is dense along the forecast line, thins toward its edges and grows fainter as the horizon spreads the odds. A horizon dot and a quiet pill close the line. Today's bar is the one hot mark. The actuals can be bars or an area; the cone can also be a gradient wedge or a hatch. The tooltip switches from the measured value to the forecast with its likely range, and Shift + arrows jump between today and the horizon.

## Install

```bash
npx shadcn@latest add @obsyde/forecast-handoff
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/forecast-handoff/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ForecastHandoff } from '@/components/obsyde/ember/forecast-handoff/ForecastHandoff';

export function Example() {
  return (
    <ForecastHandoff
      actuals="bars"
      cone="dither"
      horizonDot
      legend="row"
      tooltip="panel"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `actuals` | 'bars' \| 'area' | 'bars' | Actuals |
| `cone` | 'dither' \| 'gradient' \| 'pattern' \| 'none' | 'dither' | Cone |
| `horizon` | number (2–40) | 12 | Horizon |
| `uncertainty` | number (0.4–3) | 1 | Uncertainty |
| `horizonDot` | boolean | true | Horizon dot |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 270 | Height |
| `points` | number (6–90) | 24 | Points |
| `seed` | number (1–999) | 6 | Seed |

## Examples

- **Dithered cone**: Stipple density is the probability. `actuals="bars" cone="dither" horizon={12} uncertainty={1} horizonDot={true} legend="row" tooltip="panel" points={24}`
- **Gradient wedge**. `actuals="bars" cone="gradient" horizon={12} uncertainty={1} horizonDot={true} legend="row" tooltip="panel" points={24}`
- **Area actuals**: A measured area handing off to the forecast. `actuals="area" cone="dither" horizon={14} uncertainty={1.2} horizonDot={true} legend="row" tooltip="panel" points={30} crosshair="dashed"`
- **Wide uncertainty**: A long horizon; the cone fades as it spreads. `actuals="bars" cone="dither" horizon={24} uncertainty={2} horizonDot={true} legend="row" tooltip="panel" points={30}`
- **Hatched range**. `actuals="bars" cone="pattern" pattern="diagonal-up" horizon={10} uncertainty={1} horizonDot={true} legend="row" tooltip="corner" points={20}`
- **Short horizon, no dot**. `actuals="bars" cone="dither" horizon={5} uncertainty={0.8} horizonDot={false} legend="none" tooltip="panel" points={40} background="dots"`
- **Volt**. `accent="volt" actuals="bars" cone="dither" horizon={12} uncertainty={1} horizonDot={true} legend="row" tooltip="panel" points={24}`
- **Loading**. `status="loading" actuals="bars" cone="dither" legend="row" tooltip="panel" points={24}`

---

# Streamgraph

> Smooth stacked streams around a moving centre (wiggle), a symmetric silhouette, a zero baseline or shares of 100%.

Charts · Trends · Pro · https://obsydeui.com/charts/streamgraph

Streams are told apart by the grey ladder with a hairline gap between them and, optionally, a texture each, never by hue. Point at a stream and it holds while the rest step back to a fifth. Along the vertical guide every stream carries a value pill at its own centre, pushed apart so none collide, and the hovered stream's pill turns bone. Hide a stream in the legend and the others flow into its place over half a second.

## Install

```bash
npx shadcn@latest add @obsyde/streamgraph
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/streamgraph/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Streamgraph } from '@/components/obsyde/ember/streamgraph/Streamgraph';

export function Example() {
  return (
    <Streamgraph
      offset="wiggle"
      pills
      legend="row"
      tooltip="none"
      pattern="none"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `offset` | 'wiggle' \| 'silhouette' \| 'zero' \| 'expand' | 'wiggle' | Offset |
| `streams` | number (2–6) | 5 | Streams |
| `pills` | boolean | true | Value pills |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'none' \| 'panel' \| 'corner' | 'none' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `pattern` | 'none' \| 'series' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'none' \| 'grid' \| 'dots' \| 'hatch' | 'none' | Background |
| `curve` | 'catmull' \| 'monotone' \| 'linear' | 'catmull' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 280 | Height |
| `points` | number (6–120) | 36 | Points |
| `seed` | number (1–999) | 7 | Seed |

## Examples

- **Wiggle**: The calmest centre line; pills on the guide. `offset="wiggle" streams={5} pills={true} legend="row" tooltip="none" pattern="none" points={36}`
- **Silhouette, textured**: A different hatch per stream. `offset="silhouette" streams={4} pills={true} legend="row" tooltip="none" pattern="series" points={36}`
- **Zero baseline**. `offset="zero" streams={5} pills={true} legend="row" tooltip="none" pattern="none" points={36} background="grid"`
- **Share of 100%**: Pills read as shares. `offset="expand" streams={4} pills={true} legend="row" tooltip="none" pattern="none" points={30} background="grid"`
- **Panel instead of pills**. `offset="wiggle" streams={6} pills={false} legend="list" tooltip="panel" pattern="none" points={48}`
- **Linear, dense**. `offset="silhouette" streams={5} pills={true} legend="row" tooltip="none" pattern="none" curve="linear" points={90} seed={21}`
- **Arc**. `accent="arc" offset="wiggle" streams={5} pills={true} legend="row" tooltip="none" pattern="none" points={36}`
- **Empty**. `status="empty" offset="wiggle" streams={5} legend="row" tooltip="none" points={36}`

---

# Pareto

> Causes sorted largest first as bars, with the cumulative share as a line on a 0 to 100% axis.

Charts · Comparison · Pro · https://obsydeui.com/charts/pareto

A dashed reference marks the cutoff, 80% by default, and where the line crosses it a hot ring lands with a quiet dashed drop to the axis and a badge reading how many causes it takes. Bars past the crossing are ghosted, hatched and dim: the trivial many. Point at a bar or step with the arrow keys (Shift jumps to the crossing): the rest step back, a dot rides the cumulative line and a panel reads count, share and cumulative share.

## Install

```bash
npx shadcn@latest add @obsyde/pareto
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/pareto/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Pareto } from '@/components/obsyde/ember/pareto/Pareto';

export function Example() {
  return (
    <Pareto />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `cutoff` | number (50–95) | 80 | Cutoff % |
| `ghost` | boolean | true | Ghost the rest |
| `categories` | number (3–16) | 10 | Categories |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'diagonal-up' | Pattern |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `curve` | 'linear' \| 'monotone' \| 'step' | 'linear' | Curve |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `height` | number (140–480) | 280 | Height |
| `seed` | number (1–999) | 5 | Seed |

## Examples

- **Share labels**: Each bar prints its share of the total. `valueLabels={true} legend="none"`
- **90% cutoff**: A stricter cutoff moves the crossing right. `cutoff={90} categories={14} seed={9}`
- **No ghosting**: Every bar solid; a smooth cumulative curve and ring dots. `ghost={false} curve="monotone" dots="ring"`
- **Dotted tail**: Dotted ghost bars over a dot background. `pattern="dots" background="dots" categories={8} seed={3}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Ring Stack

> Concentric ring bars on a semicircle, a 270° horseshoe or a full circle: one ring per group, its parts stacked end to end along the arc over a faint track that stands for what is left, with percent ticks along the outside.

Charts · Radial · Pro · https://obsydeui.com/charts/ring-stack

The rings sweep on in turn. Point at a ring and the others step back while the centre switches to it with rolling digits; point at a part and that part lights in every ring. A ring past its limit runs hot at its leading edge, the one ember on the dial. The progress-row legend rolls to the hovered ring’s values, isolates parts both ways, and click hides a part while the rest close up on springs.

## Install

```bash
npx shadcn@latest add @obsyde/ring-stack
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/ring-stack/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RingStack } from '@/components/obsyde/ember/ring-stack/RingStack';

export function Example() {
  return (
    <RingStack arc="semicircle" pattern="parts" legend="row" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `arc` | 'semicircle' \| 'horseshoe' \| 'full' | 'semicircle' | Arc |
| `ends` | 'square' \| 'round' | 'square' | Ends |
| `rings` | number (1–5) | 3 | Rings |
| `fill` | number (0.3–1.3) | 1 | Fill |
| `limit` | number (50–100) | 90 | Limit % |
| `legend` | 'progress' \| 'row' \| 'none' | 'progress' | Legend |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' \| 'parts' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `size` | number (260–560) | 460 | Size |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Patterned parts**: Each part in its own hatch instead of a grey step. `arc="semicircle" pattern="parts" legend="row"`
- **Semicircle**: Three rings of four parts; the laptop is past its limit. `arc="semicircle"`
- **Horseshoe, hatched free space**: 270° with what is left drawn as hatch. `arc="horseshoe" pattern="diagonal-up"`
- **Full rings, round ends**: Four full rings with rounded segment ends. `arc="full" rings={4} ends="round"`
- **Plenty of room**: Lightly used: nothing runs hot. `arc="semicircle" fill={0.6} rings={5}`
- **Empty**. `status="empty"`

---

# Half Donut

> A segmented half ring for a budget or a quota.

Charts · Composition · Pro · https://obsydeui.com/charts/half-donut

Categories fill equal segments from left to right in the grey ladder, and what is left of the limit is hatched: hatch means remaining. On mount the segments ignite one after another, each flaring in the accent and cooling to its tone, while the centre number counts up with them. Point at a segment, or Tab in and use the arrow keys: its category runs hot, the others step back and the centre rolls to its amount and share; the hatched part reports what is left. An optional target tick sits outside the ring, and the legend is linked both ways.

## Install

```bash
npx shadcn@latest add @obsyde/half-donut
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/half-donut/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { HalfDonut } from '@/components/obsyde/ember/half-donut/HalfDonut';

export function Example() {
  return (
    <HalfDonut segments={24} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `preset` | 'budget' \| 'storage' | 'budget' | Data |
| `segments` | number (0–48) | 24 | Segments |
| `thickness` | number (0.12–0.5) | 0.28 | Thickness |
| `used` | number (0.05–1) | 0.68 | Used |
| `target` | number (0–1) | 0 | Target |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'diagonal-up' | Pattern |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'none' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Budget**: 24 segments, 68% spent, hatched remainder. `preset="budget" segments={24} used={0.68}`
- **Storage**: 40 thin segments with a list legend. `preset="storage" segments={40} thickness={0.2} used={0.81} legend="list"`
- **Continuous**: One rounded arc per category. `preset="budget" segments={0} used={0.74}`
- **With target**: A tick at 80% of the limit. `preset="budget" segments={18} used={0.58} target={0.8} pattern="dots"`
- **Chunky**: 12 thick segments, crosshatched remainder. `preset="storage" segments={12} thickness={0.4} used={0.45} pattern="crosshatch" accent="volt"`
- **Tooltip panel**. `preset="budget" segments={30} used={0.9} tooltip="panel" legend="none" accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Hexbin

> A few thousand points binned into hexagons and drawn on a canvas, with SVG axes, keyboard and states on top.

Charts · Distribution · Pro · https://obsydeui.com/charts/hexbin

Counts climb the grey ladder (or, opt-in, the blackbody heat ramp) in five levels that stop short of the accent, so the single densest hexagon is the only one that burns at accent intensity. On entry the field blooms outward from that hot cell. Hover a hexagon and it lifts with its count and share while its level stays forward and the rest step back; the levels legend isolates a level the same way.

## Install

```bash
npx shadcn@latest add @obsyde/hexbin
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/hexbin/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Hexbin } from '@/components/obsyde/ember/hexbin/Hexbin';

export function Example() {
  return (
    <Hexbin ramp="mono" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `points` | number (200–8000) | 3000 | Points |
| `size` | number (5–18) | 10 | Hex size |
| `ramp` | 'heat' \| 'mono' | 'mono' | Ramp |
| `lattice` | boolean | false | Lattice |
| `legend` | 'levels' \| 'none' | 'levels' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `reveal` | 'bloom' \| 'none' | 'bloom' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (200–480) | 320 | Height |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Grey ladder**: Counts in greys; the densest cell is still the only accent. `ramp="mono"`
- **Heat ramp**: Three thousand requests; one hot cell. `ramp="heat"`
- **Fine bins, lattice**. `size={6} lattice={true} points={6000}`
- **Coarse bins**. `size={16} background="dots"`
- **Arc**. `accent="arc" lattice={true}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Chord Diagram

> Flows between groups around a circle. Each group is an arc sized by what it sends, ringed by a fine instrument scale of ticks; chords join every pair, shaded along the grey ladder from the source's tone to the target's.

Charts · Relationships · Pro · https://obsydeui.com/charts/chord-diagram

On mount the ring sweeps in clockwise and the chords rise after it. Hover a group and only its chords stay while the rest fall to a tenth; hover a chord and that one flow runs hot, with both directions in the panel. The legend is linked both ways: a click folds a group away and the whole layout re-flows from a tweened matrix. Tab in and use the arrow keys to step through the groups.

## Install

```bash
npx shadcn@latest add @obsyde/chord-diagram
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/chord-diagram/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ChordDiagram } from '@/components/obsyde/ember/chord-diagram/ChordDiagram';

export function Example() {
  return (
    <ChordDiagram groups={5} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `groups` | number (3–6) | 5 | Groups |
| `gap` | number (0–20) | 6 | Gap |
| `ticks` | boolean | true | Tick ring |
| `chords` | 'gradient' \| 'source' | 'gradient' | Chord fill |
| `selfFlow` | boolean | false | Flow within groups |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 8 | Seed |

## Examples

- **Default**: Five regions, gradient chords, tick ring. `groups={5}`
- **Six groups**: Tighter gaps, flow inside each group too. `groups={6} gap={3} selfFlow={true}`
- **Source tone**: Chords take the sender's tone; no ticks. `groups={5} chords="source" ticks={false}`
- **Three groups**: Wide gaps, few big flows. `groups={3} gap={14}`
- **Volt**. `groups={4} accent="volt"`
- **No legend**. `groups={5} legend="none" accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Rose Chart

> A polar area chart in the Nightingale manner: one wedge per category, stacked by series, its radius on a square-root scale so the area tells the truth, cut apart by a constant-width gap.

Charts · Radial · Pro · https://obsydeui.com/charts/rose-chart

Grey steps at rest, or a hatch per series. Wedges grow from the centre in a clockwise cascade. Point at a wedge and it grows outward on a spring while the others step back and a raised panel lists its layers; point at a layer and that series isolates in every wedge. Click a wedge, or press Enter on it, to select it: it alone burns in the accent. The legend isolates both ways and click hides a series, the wedges restacking on springs.

## Install

```bash
npx shadcn@latest add @obsyde/rose-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/rose-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RoseChart } from '@/components/obsyde/ember/rose-chart/RoseChart';

export function Example() {
  return (
    <RoseChart categories="months" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `categories` | 'months' \| 'weekdays' \| 'hours' | 'months' | Categories |
| `series` | number (1–4) | 3 | Series |
| `pad` | number (0–8) | 2 | Gap |
| `hole` | number (0–0.4) | 0.08 | Hole |
| `rings` | boolean | true | Value rings |
| `selected` | number (-1–11) | 6 | Selected wedge |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `pattern` | 'none' \| 'series' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `size` | number (260–600) | 460 | Size |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Months**: Twelve wedges of three regions with value rings; July selected. `categories="months"`
- **Nothing selected**: Grey steps only until you click a wedge. `categories="months" selected={-1}`
- **Hatched series**: A hatch per series instead of grey steps. `categories="months" pattern="series" selected={-1}`
- **Weekdays, true rose**: Seven wedges, no hole, wider gaps, corner readout. `categories="weekdays" hole={0} pad={4} tooltip="corner" selected={4}`
- **Hours, single series**: 24 thin wedges of one series, no rings. `categories="hours" series={1} rings={false} pad={1.5} selected={-1}`
- **Loading**. `status="loading"`

---

# Diverging Bars

> Bars grow away from a highlighted midline, up and down or left and right.

Charts · Comparison · Pro · https://obsydeui.com/charts/diverging-bars

Mirrored, it sets two periods back to back, today above and yesterday below: the current hour is the one hot pair, and hours still to come show yesterday as a hatched ghost so the shape of the day ahead is already there. Signed, it shows gains and losses either side of zero. The midline is a 2px gap with a hairline in it, so the halves never touch. Point at a period or step with the arrow keys: the rest step back, the header totals roll to that period and a panel reads both values and the change. An optional range meter underneath slides a caret through the day's low to high.

## Install

```bash
npx shadcn@latest add @obsyde/diverging-bars
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/diverging-bars/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DivergingBars } from '@/components/obsyde/ember/diverging-bars/DivergingBars';

export function Example() {
  return (
    <DivergingBars mode="mirror" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `mode` | 'mirror' \| 'signed' | 'mirror' | Mode |
| `orientation` | 'vertical' \| 'horizontal' | 'vertical' | Orientation |
| `hoursDone` | number (1–24) | 24 | Hours done |
| `rangeMeter` | boolean | false | Range meter |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `height` | number (140–480) | 260 | Height |
| `seed` | number (1–999) | 6 | Seed |

## Examples

- **Today vs yesterday**: Twenty-four hours, the last one hot. `mode="mirror"`
- **Day in progress**: Fifteen hours done; the rest are hatched ghosts of yesterday. With the range meter. `mode="mirror" hoursDone={15} rangeMeter={true}`
- **Left and right**: Twelve two-hour blocks growing left and right from a vertical midline. `mode="mirror" orientation="horizontal" valueLabels={true}`
- **Gain and loss**: One signed series, hatched losses, value labels. `mode="signed" pattern="diagonal-up" valueLabels={true}`
- **Gain and loss, sideways**: Signed months growing left and right, dotted losses. `mode="signed" orientation="horizontal" pattern="dots" legend="none" seed={3}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Calendar Heatmap

> A year of days as a dot calendar: round or square cells in week columns, quarters set apart by a gap with a hairline that fades at both ends, single-letter day labels, months and quarters above, and future days left as faint empties.

Charts · Calendars · Pro · https://obsydeui.com/charts/calendar-heatmap

Levels climb the grey ladder and only the busiest day runs hot; the blackbody heat ramp is opt-in. Start the week on Monday and the weekend rows fade back so the working week leads. Hover a day and it swells on a spring while its neighbours give way, so the gap around it grows; its level lights in the legend, and hovering a legend level isolates every day at that level. Narrow widths scroll horizontally with faded edges, starting at the latest weeks, while the day letters stay pinned. Tab in and the arrows walk the days, a week or a day at a time. Loading is a shimmer wave across the same lattice.

## Install

```bash
npx shadcn@latest add @obsyde/calendar-heatmap
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/calendar-heatmap/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { CalendarHeatmap } from '@/components/obsyde/ember/calendar-heatmap/CalendarHeatmap';

export function Example() {
  return (
    <CalendarHeatmap shape="round" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `shape` | 'round' \| 'square' | 'round' | Shape |
| `weekStart` | 'sunday' \| 'monday' | 'sunday' | Week starts |
| `scale` | 'heat' \| 'mono' | 'mono' | Scale |
| `separators` | 'fade' \| 'none' | 'fade' | Separators |
| `dayLabels` | 'all' \| 'alternate' | 'all' | Day labels |
| `months` | number (3–12) | 12 | Months |
| `legend` | 'levels' \| 'none' | 'levels' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `reveal` | 'wave' \| 'none' | 'wave' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 11 | Seed |

## Examples

- **Dot calendar**: Round cells, faded quarter separators, single-letter days. `shape="round"`
- **Monday start**: Weekends sink to the bottom rows and fade back. `weekStart="monday"`
- **Squares, grey ladder**: The busiest day is the only accent. `shape="square" scale="mono" dayLabels="alternate"`
- **Heat ramp**: Levels on the blackbody ramp instead of the grey ladder. `scale="heat" shape="round"`
- **Six months**. `months={6} separators="none"`
- **Volt**. `accent="volt" weekStart="monday" shape="square"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Arc Diagram

> Nodes on one line and their links as arcs above it, each as thick as its weight.

Charts · Relationships · Pro · https://obsydeui.com/charts/arc-diagram

Hover a node and it runs hot while its arcs re-draw outward from it and its neighbours stay lit; everything else fades back. Hover an arc for that one link and its two ends. Re-sort by group, degree or name and the nodes spring to their new places with every arc stretching after them. Split mode keeps links inside a group above the line and sends links across groups below it. The legend keys the groups: hover lights a group's links, a click folds its nodes away and the line re-spaces. Tab in and use the arrow keys to walk the nodes.

## Install

```bash
npx shadcn@latest add @obsyde/arc-diagram
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/arc-diagram/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ArcDiagram } from '@/components/obsyde/ember/arc-diagram/ArcDiagram';

export function Example() {
  return (
    <ArcDiagram nodes={18} groups={4} sort="group" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `nodes` | number (6–24) | 18 | Nodes |
| `groups` | number (2–5) | 4 | Groups |
| `density` | number (0.6–3) | 1.6 | Links per node |
| `sort` | 'group' \| 'degree' \| 'name' | 'group' | Sort |
| `layout` | 'above' \| 'split' | 'above' | Layout |
| `maxWidth` | number (2–12) | 6 | Max stroke |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (220–480) | 320 | Height |
| `seed` | number (1–999) | 11 | Seed |

## Examples

- **Default**: 18 nodes in four groups, sorted by group. `nodes={18} groups={4} sort="group"`
- **By degree**: Busiest nodes first. `nodes={18} groups={4} sort="degree"`
- **Split**: Inside a group above, across groups below. `nodes={18} groups={4} layout="split" height={380}`
- **Dense**: 24 nodes, more links, thinner strokes. `nodes={24} groups={5} density={2.4} maxWidth={4}`
- **Small**: Ten nodes, heavy strokes, by name. `nodes={10} groups={2} density={1.4} maxWidth={9} sort="name" accent="volt"`
- **No legend**. `nodes={16} groups={3} legend="none" accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Unit Columns

> Columns counted out in rounded squares, one per unit, over a faded hatched track that shows how far the scale goes.

Charts · Comparison · Pro · https://obsydeui.com/charts/unit-columns

A part-unit on top is drawn as a smaller square, so nothing is rounded away. Filled squares share one vertical gradient across the plot, bone at the top, and the latest (or largest) column carries the accent. On entry the squares cascade up column by column with mass by value: tall columns arrive later and settle heavier while the track gives way square by square. Point at a column and a thin ring hugs its top square on a spring while the other columns step back; with several series, pointing at one series isolates it.

## Install

```bash
npx shadcn@latest add @obsyde/unit-columns
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/unit-columns/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { UnitColumns } from '@/components/obsyde/ember/unit-columns/UnitColumns';

export function Example() {
  return (
    <UnitColumns />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `shape` | 'rounded' \| 'squircle' \| 'square' \| 'dot' | 'rounded' | Shape |
| `series` | number (1–3) | 1 | Series |
| `columns` | number (2–12) | 6 | Columns |
| `highlight` | 'last' \| 'max' \| 'none' | 'last' | Highlight |
| `pattern` | 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' \| 'none' \| 'off' | 'diagonal-up' | Pattern |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `background` | 'none' \| 'grid' \| 'dots' | 'none' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `height` | number (140–480) | 260 | Height |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Two series**: Side by side with a legend; point at a series to isolate it. `series={2} columns={6}`
- **Squircle**: Squircle squares and a squircle ring, the largest month hot. `shape="squircle" highlight="max" valueLabels={true}`
- **Dots**: Twelve months of dots over a dotted track. `shape="dot" columns={12} pattern="dots" height={220}`
- **Three series, no track**: Three series, square cells, grid instead of a track. `series={3} columns={5} shape="square" pattern="off" background="grid" highlight="none"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Radial Stack

> Stacked bars standing out from a ring, one per category, sorted by total so the dial reads as a spiral from the largest at 12 o’clock round to the smallest.

Charts · Radial · Pro · https://obsydeui.com/charts/radial-stack

Layers darken toward the centre and brighten outward. Short codes sit on the spokes, rotated to read outward, and compact value rings give the scale in the gap at the top. Bars rise in a clockwise cascade. Point at a bar or step with the arrow keys: the others step back and the centre rewrites itself as a sentence with rolling digits, naming the largest layer and its share; point at a layer and that series isolates round the whole dial. One category can be pinned hot. Legend toggles restack on springs.

## Install

```bash
npx shadcn@latest add @obsyde/radial-stack
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/radial-stack/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { RadialStack } from '@/components/obsyde/ember/radial-stack/RadialStack';

export function Example() {
  return (
    <RadialStack />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `points` | number (8–72) | 40 | Categories |
| `series` | number (2–5) | 5 | Series |
| `sort` | boolean | true | Sort by total |
| `highlight` | boolean | true | Pin one |
| `rings` | boolean | true | Value rings |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `pattern` | 'none' \| 'series' | 'none' | Pattern |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `size` | number (280–640) | 520 | Size |
| `seed` | number (1–999) | 8 | Seed |

## Examples

- **Monochrome**: Nothing pinned: grey steps only. `highlight={false}`
- **Hatched layers**: Three layers told apart by hatch. `series={3} pattern="series"`
- **Dense**: 72 thin bars; codes drop when they no longer fit. `points={72} rings={false}`
- **Unsorted**: Input order instead of a spiral. `sort={false} points={24}`
- **Loading**. `status="loading"`

---

# Punch Card

> Day by hour as a grid of dots sized, and optionally shaded up the grey ladder, by value, so the busy hours of the week read at a glance and empty slots stay as pinpricks.

Charts · Calendars · Pro · https://obsydeui.com/charts/punch-card

The current hour is live: its dot burns in the accent inside a slow pilot-light ring, the one hot value on the card. Hover any dot and its row and column rise as soft filled bands that fade at both ends, their labels brighten, the dot lifts on a spring and the rest of the week steps back; the panel compares the hour with that day's average. Tab in and the arrows walk the grid. Dots ripple in diagonally; loading is a shimmering lattice.

## Install

```bash
npx shadcn@latest add @obsyde/punch-card
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/punch-card/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { PunchCard } from '@/components/obsyde/ember/punch-card/PunchCard';

export function Example() {
  return (
    <PunchCard encode="size-shade" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `shape` | 'circle' \| 'square' | 'circle' | Shape |
| `encode` | 'size-shade' \| 'size' | 'size-shade' | Encode |
| `crosshair` | 'band' \| 'none' | 'band' | Hover bands |
| `now` | boolean | true | Live hour |
| `legend` | 'size' \| 'none' | 'size' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `reveal` | 'wave' \| 'none' | 'wave' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Sized and shaded**: A working week with a live hour on Wednesday afternoon. `encode="size-shade"`
- **Size only**. `encode="size"`
- **Squares**. `shape="square"`
- **No live hour, no bands**. `now={false} crosshair="none"`
- **Arc**. `accent="arc" shape="square" encode="size"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Parallel Coordinates

> One vertical axis per dimension and one line per record, coloured by class in the grey ladder.

Charts · Relationships · Pro · https://obsydeui.com/charts/parallel-coordinates

Drag along any axis to brush a range: records outside the brushes fall back to a whisper while the ones inside firm up, and the count in the corner rolls. Click an axis to clear its brush; brushes on several axes combine. Drag an axis by its title pill to reorder: it follows the pointer and the other axes spring out of its way, every line stretching after them (focus a title and use the arrow keys to do the same). Hover a line, or Tab in and use the arrow keys, and that record runs hot with all its values in a panel. The legend isolates or hides a class.

## Install

```bash
npx shadcn@latest add @obsyde/parallel-coordinates
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/parallel-coordinates/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { ParallelCoordinates } from '@/components/obsyde/ember/parallel-coordinates/ParallelCoordinates';

export function Example() {
  return (
    <ParallelCoordinates records={90} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `records` | number (10–240) | 90 | Records |
| `axes` | number (3–7) | 6 | Axes |
| `curve` | 'smooth' \| 'linear' | 'smooth' | Curve |
| `opacity` | number (0.1–0.9) | 0.42 | Line strength |
| `brushed` | boolean | false | Start brushed |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (240–520) | 360 | Height |
| `seed` | number (1–999) | 6 | Seed |

## Examples

- **Default**: 90 services on six axes. `records={90} axes={6}`
- **Brushed**: A brush on latency already set; drag more axes. `records={90} axes={6} brushed={true}`
- **Straight segments**: Linear lines, four axes. `records={60} axes={4} curve="linear"`
- **Dense**: 220 records on seven axes, faint lines. `records={220} axes={7} opacity={0.22}`
- **Volt**. `records={40} axes={5} opacity={0.6} accent="volt"`
- **No legend**. `records={90} axes={6} legend="none" accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Horizon Chart

> Many series in very little height. Each row folds its area into two to four bands laid over each other, so a large value reads as a brighter, denser stack rather than a taller one.

Charts · Trends · Pro · https://obsydeui.com/charts/horizon-chart

Values below the baseline fold the same way in a hatched, cooler ramp, mirrored up from the row's floor or hanging from its ceiling. One crosshair runs through every row, and the readouts on the right roll to the scrubbed day; the row furthest from its baseline at that moment is the one value in the accent. A Less → More legend isolates one fold level across all rows, and pointing at a row lets the others step back.

## Install

```bash
npx shadcn@latest add @obsyde/horizon-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/horizon-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { HorizonChart } from '@/components/obsyde/ember/horizon-chart/HorizonChart';

export function Example() {
  return (
    <HorizonChart
      rows={6}
      bands={3}
      mode="mirror"
      scale="shared"
      palette="mono"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `rows` | number (2–8) | 6 | Rows |
| `bands` | number (2–4) | 3 | Folds |
| `mode` | 'mirror' \| 'offset' | 'mirror' | Negatives |
| `scale` | 'shared' \| 'row' | 'shared' | Band size |
| `palette` | 'mono' \| 'heat' | 'mono' | Palette |
| `rowHeight` | number (16–56) | 32 | Row height |
| `readouts` | boolean | true | Readouts |
| `legend` | 'levels' \| 'none' | 'levels' | Legend |
| `tooltip` | 'none' \| 'panel' \| 'corner' | 'none' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `pattern` | 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'diagonal-up' | Negative pattern |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `points` | number (8–240) | 90 | Points |
| `seed` | number (1–999) | 11 | Seed |

## Examples

- **Six signals, three folds**. `rows={6} bands={3} mode="mirror" scale="shared" palette="mono" readouts={true} legend="levels" tooltip="none" points={90}`
- **Offset negatives**: Below-baseline folds hang from the ceiling. `rows={6} bands={3} mode="offset" scale="shared" palette="mono" readouts={true} legend="levels" tooltip="none" points={90}`
- **Four folds, row scale**: Each row uses its own band size. `rows={5} bands={4} mode="mirror" scale="row" palette="mono" readouts={true} legend="levels" tooltip="none" points={120} rowHeight={36}`
- **Heat ramp**: Positive folds on the blackbody ramp. `rows={6} bands={3} mode="mirror" scale="shared" palette="heat" readouts={true} legend="levels" tooltip="none" points={90}`
- **Eight rows, compact**. `rows={8} bands={2} mode="mirror" scale="shared" palette="mono" readouts={true} legend="levels" tooltip="none" points={160} rowHeight={22}`
- **Panel readout**: All rows in one panel; dashed crosshair. `rows={4} bands={3} mode="mirror" scale="shared" palette="mono" readouts={false} legend="none" tooltip="panel" crosshair="dashed" points={60} rowHeight={40} pattern="diagonal-down"`
- **Volt**. `accent="volt" rows={6} bands={3} mode="mirror" scale="shared" palette="heat" readouts={true} legend="levels" tooltip="none" points={90}`
- **Loading**. `status="loading" rows={6} bands={3} legend="levels" tooltip="none" points={90}`

---

# Slope Chart

> Two or three periods joined by straight lines, one per category.

Charts · Trends · Pro · https://obsydeui.com/charts/slope-chart

Direction lives in luminance, not hue: risers are bone, fallers sink to grey, and the biggest mover is the one line in the accent with a soft bloom. Labels sit on both sides with the value and the change, pushed apart so none collide, with a short leader where one had to move. Point at a line or a label and it holds while the rest step back to a fifth; a panel beside it reads each period and the change. Arrow up and down walk the categories from the keyboard; left and right step through the periods.

## Install

```bash
npx shadcn@latest add @obsyde/slope-chart
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/slope-chart/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SlopeChart } from '@/components/obsyde/ember/slope-chart/SlopeChart';

export function Example() {
  return (
    <SlopeChart
      periods="2"
      mover="relative"
      labels="both"
      tooltip="panel"
      dots="halo"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `periods` | '2' \| '3' | '2' | Periods |
| `mover` | 'relative' \| 'absolute' \| 'none' | 'relative' | Accent mover |
| `labels` | 'both' \| 'end' | 'both' | Labels |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'none' \| 'solid' \| 'dashed' \| 'gradient' | 'none' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `background` | 'none' \| 'grid' \| 'dots' \| 'hatch' | 'none' | Background |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 340 | Height |
| `points` | number (2–10) | 8 | Categories |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Two periods**: The biggest relative mover in the accent. `periods="2" mover="relative" labels="both" tooltip="panel" dots="halo" points={8}`
- **Three periods**. `periods="3" mover="relative" labels="both" tooltip="panel" dots="halo" points={7}`
- **Absolute mover, rings**. `periods="2" mover="absolute" labels="both" tooltip="panel" dots="ring" points={8} seed={9}`
- **End labels only**: Ranked on the right; quiet dots. `periods="2" mover="relative" labels="end" tooltip="panel" dots="none" points={10} background="grid"`
- **No accent**: Pure luminance: risers bone, fallers grey. `periods="2" mover="none" labels="both" tooltip="panel" dots="halo" points={6} height={300}`
- **Column crosshair**. `periods="3" mover="relative" labels="both" tooltip="panel" dots="halo" crosshair="dashed" points={6} background="dots"`
- **Arc**. `accent="arc" periods="2" mover="relative" labels="both" tooltip="panel" dots="halo" points={8}`
- **Empty**. `status="empty" periods="2" labels="both" tooltip="panel" points={8}`

---

# Signal & Noise

> Raw readings as faint dots and a bold rolling average drawn through them, with an optional ±kσ band.

Charts · Trends · Pro · https://obsydeui.com/charts/signal-noise

The cursor works like a lens: dots brighten and swell as it passes and fade again behind it. At the scrubbed row a dashed stem joins the raw dot to the average, with the residual printed beside it, so raw against smoothed reads directly; the tooltip lists raw, average and residual. Readings beyond 2σ wear a quiet ring. A window switch in the header (3, 7, 14, 28 days) morphs the average in place; it can be centred, with no lag, or trailing, as it was known on the day.

## Install

```bash
npx shadcn@latest add @obsyde/signal-noise
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/signal-noise/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { SignalNoise } from '@/components/obsyde/ember/signal-noise/SignalNoise';

export function Example() {
  return (
    <SignalNoise
      window={7}
      align="centered"
      sigma={1}
      bandFill="gradient"
      outliers
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `window` | number (1–60) | 7 | Window |
| `align` | 'centered' \| 'trailing' | 'centered' | Align |
| `sigma` | number (0–3) | 1 | Band ±σ |
| `bandFill` | 'gradient' \| 'solid' \| 'pattern' | 'gradient' | Band fill |
| `outliers` | boolean | true | Outlier rings |
| `lens` | boolean | true | Lens |
| `windowSwitch` | boolean | true | Window switch |
| `noise` | number (0.2–3) | 1 | Noise |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 270 | Height |
| `points` | number (8–240) | 60 | Points |
| `seed` | number (1–999) | 8 | Seed |

## Examples

- **7-day mean**: Centred mean with a ±1σ band and the lens. `window={7} align="centered" sigma={1} bandFill="gradient" outliers={true} lens={true} windowSwitch={true} legend="row" tooltip="panel" points={60}`
- **Trailing, 14 days**: Lags the data, as it was known on the day. `window={14} align="trailing" sigma={0} outliers={true} lens={true} windowSwitch={true} legend="row" tooltip="panel" points={90}`
- **Noisy, ±2σ hatched**. `window={14} align="centered" sigma={2} bandFill="pattern" pattern="diagonal-up" noise={2} outliers={true} lens={true} windowSwitch={true} legend="row" tooltip="panel" points={90}`
- **No band, no lens**. `window={7} align="centered" sigma={0} outliers={false} lens={false} windowSwitch={false} legend="none" tooltip="corner" points={45} dots="ring"`
- **3-day window**. `window={3} align="centered" sigma={1} bandFill="solid" outliers={true} lens={true} windowSwitch={true} legend="row" tooltip="panel" points={40} background="dots"`
- **Long series, list legend**. `window={28} align="centered" sigma={1} bandFill="gradient" outliers={true} lens={true} windowSwitch={true} legend="list" tooltip="panel" points={180} crosshair="dashed"`
- **Volt**. `accent="volt" window={7} align="centered" sigma={1} bandFill="gradient" outliers={true} lens={true} windowSwitch={true} legend="row" tooltip="panel" points={60}`
- **Empty**. `status="empty" window={7} windowSwitch={true} legend="row" tooltip="panel" points={60}`

---

# Overheat Seam

> Today against yesterday. The gap between the two lines is a quiet grey while today runs at or below yesterday, and takes the accent only where today exceeds it, as a wash that burns brighter the higher the overshoot, with today's line running hot over the same stretch.

Charts · Trends · Pro · https://obsydeui.com/charts/overheat-seam

Overheating announces itself and nothing else on the chart is warm. Where the lines cross, a seam glows: a short vertical flare with a bloom, brightest where today breaks above. A pilot light breathes on today's latest point; the hours still to come show yesterday alone. The crosshair snaps to every crossing, and the legend can hide or isolate the heat.

## Install

```bash
npx shadcn@latest add @obsyde/overheat-seam
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/overheat-seam/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { OverheatSeam } from '@/components/obsyde/ember/overheat-seam/OverheatSeam';

export function Example() {
  return (
    <OverheatSeam
      fill="gradient"
      seams
      pilot
      legend="row"
      tooltip="panel"
    />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `heat` | 'hot' \| 'mild' \| 'cool' | 'hot' | Today runs |
| `now` | number (0.2–1) | 0.72 | Now |
| `fill` | 'gradient' \| 'solid' \| 'pattern' \| 'none' | 'gradient' | Gap fill |
| `seams` | boolean | true | Seams |
| `pilot` | boolean | true | Pilot light |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'corner' \| 'none' | 'panel' | Tooltip |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'solid' | Crosshair |
| `dots` | 'halo' \| 'ring' \| 'none' | 'halo' | Dots |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'dots' \| 'hatch' \| 'none' | 'grid' | Background |
| `curve` | 'monotone' \| 'linear' \| 'catmull' \| 'step' | 'monotone' | Curve |
| `reveal` | 'sweep' \| 'cool' \| 'rise' \| 'fade' \| 'none' | 'sweep' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (140–480) | 270 | Height |
| `points` | number (12–144) | 48 | Points |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Overheating afternoon**. `heat="hot" now={0.72} fill="gradient" seams={true} pilot={true} legend="row" tooltip="panel" points={48}`
- **Mild day, hatched gap**. `heat="mild" now={0.8} fill="pattern" pattern="diagonal-up" seams={true} pilot={true} legend="row" tooltip="panel" points={48} seed={5}`
- **Cool day**: Almost no heat: the grey gap does the talking. `heat="cool" now={0.9} fill="solid" seams={true} pilot={true} legend="row" tooltip="panel" points={48}`
- **Whole day, corner readout**. `heat="hot" now={1} fill="gradient" seams={true} pilot={false} legend="row" tooltip="corner" points={96} seed={8}`
- **Linear, no seams**. `heat="hot" now={0.65} fill="none" seams={false} pilot={true} legend="list" tooltip="panel" curve="linear" points={36} dots="ring"`
- **Every 10 minutes**. `heat="hot" now={0.7} fill="gradient" seams={true} pilot={true} legend="row" tooltip="panel" points={144} crosshair="dashed" seed={12}`
- **Arc**. `accent="arc" heat="hot" now={0.72} fill="gradient" seams={true} pilot={true} legend="row" tooltip="panel" points={48}`
- **Loading**. `status="loading" heat="hot" legend="row" tooltip="panel" points={48}`

---

# Budget Columns

> Spending against a limit, counted out in cells that light up as money goes out.

Charts · Comparison · Pro · https://obsydeui.com/charts/budget-columns

As a strip, a band of cells with the limit partway along: lit cells warm through the grey ladder as spending nears the limit and every cell past it turns hot. As a burn-up, one column of dots per day stacked to the running total, with the limit as a dashed line and its value in a pill, and dots above it hot. Scrub through the days with a pointer or the arrow keys: the chart shows the budget as it stood that day, cells that just lit flash and cool, and the spend, the day and what is left roll to match.

## Install

```bash
npx shadcn@latest add @obsyde/budget-columns
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/budget-columns/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BudgetColumns } from '@/components/obsyde/ember/budget-columns/BudgetColumns';

export function Example() {
  return (
    <BudgetColumns />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `layout` | 'strip' \| 'burn' | 'strip' | Layout |
| `scenario` | 'within' \| 'close' \| 'over' | 'within' | Scenario |
| `day` | number (1–30) | 30 | Day |
| `rows` | number (1–5) | 2 | Rows |
| `cell` | 'rounded' \| 'dot' | 'rounded' | Cell |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `header` | boolean | true | Header |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 4 | Seed |

## Examples

- **Within the limit**: Day 18; the strip is lit in grey. `scenario="within" day={18}`
- **Close to the limit**: Day 30, 94% spent: the lit cells have warmed to bone. `scenario="close" day={30}`
- **Over the limit**: Past the limit the cells and the marker run hot. `scenario="over" day={30}`
- **Burn-up**: One column of dots per day; dots above the limit run hot. `layout="burn" scenario="over" day={26} cell="dot"`
- **Dots, four rows**: Four rows of dots over a dotted track. `scenario="close" day={22} rows={4} cell="dot" pattern="dots"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Kiln Gauge

> A vertical segmented gauge lit like a kiln.

Charts · Metrics · Pro · https://obsydeui.com/charts/kiln-gauge

Lit segments follow a blackbody ramp, deep red at the bottom through ember and amber to near-white at the top; unlit ones are ash. Only the topmost lit segment glows, with a soft bloom, and it lights in proportion so the level reads between segments. Past the limit that segment flickers subtly, still under reduced motion. The level rides a spring with no bounce and re-sweeps from wherever it is when a new reading lands, and the value rolls with heavier high digits. Several kilns make a bank with a shared scale and limit: point at one, or Tab in and use the arrow keys, and the others step back while its headroom reads out.

## Install

```bash
npx shadcn@latest add @obsyde/kiln-gauge
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/kiln-gauge/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { KilnGauge } from '@/components/obsyde/ember/kiln-gauge/KilnGauge';

export function Example() {
  return (
    <KilnGauge units={1} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `units` | number (1–8) | 1 | Kilns |
| `value` | number (0–100) | 72 | Value |
| `limit` | number (10–100) | 85 | Limit |
| `segments` | number (6–60) | 24 | Segments |
| `height` | number (140–420) | 260 | Height |
| `scale` | boolean | true | Scale |
| `live` | boolean | false | Live |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **Single**: One kiln with a large rolling readout. `units={1} value={72}`
- **Over the limit**: Past 85 the top segment flickers. `units={1} value={93}`
- **Bank**: Six kilns on one scale and limit, with peak ticks. `units={6}`
- **Live**: A new reading every 1.4s; the level re-sweeps from where it is. `units={4} live={true}`
- **Fine segments**: 48 thin segments, no scale. `units={1} value={64} segments={48} scale={false} height={300}`
- **Coarse**: 10 chunky segments. `units={3} segments={10} height={200}`
- **Loading**. `units={4} status="loading"`

---

# Ember Dust

> A density scatter without bins. Every point is a faint speck of light added onto a canvas, so overlaps accumulate luminance and the dense regions glow on their own, from ash through bone; only the densest region in view crosses into the accent.

Charts · Distribution · Pro · https://obsydeui.com/charts/dust

On entry the field ignites and the hot core catches last. The pointer leaves an afterglow that cools over about a second while a panel reads the points nearby and the density, and a caret rides the density legend. Zoom with the wheel or a pinch, drag to pan, double-click or press 0 to reset: the view travels on springs and re-normalises so the hottest region in view is always the one that burns. Arrows pan and +/- zoom from the keyboard.

## Install

```bash
npx shadcn@latest add @obsyde/dust
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dust/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { EmberDust } from '@/components/obsyde/ember/dust/EmberDust';

export function Example() {
  return (
    <EmberDust />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `points` | number (500–20000) | 6000 | Points |
| `speck` | number (0.6–3) | 1.4 | Speck size |
| `afterglow` | boolean | true | Afterglow |
| `zoom` | boolean | true | Zoom |
| `legend` | 'gradient' \| 'none' | 'gradient' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `background` | 'grid' \| 'dots' \| 'none' | 'grid' | Background |
| `reveal` | 'ignite' \| 'none' | 'ignite' | Reveal |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `height` | number (220–480) | 340 | Height |
| `seed` | number (1–999) | 7 | Seed |

## Examples

- **Fine specks, many points**. `points={16000} speck={0.9}`
- **Soft specks, dot field**. `speck={2.4} background="dots" points={3000}`
- **Volt**. `accent="volt"`
- **No afterglow, no zoom**. `afterglow={false} zoom={false} legend="none"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Correlation Matrix

> Every pair of variables as a cell on a diverging scale: cool grey for negative, near-black at zero and bone for positive, with only the strongest pair in the accent (the heat ramp for positives is opt-in).

Charts · Relationships · Pro · https://obsydeui.com/charts/correlation-matrix

The diagonal is hatched, since a variable against itself says nothing. Hover a cell, or Tab in and walk it with the arrow keys: the cell lifts on a spring, its row and column stay lit while everything else steps back, the names brighten and a caret marks its value on the gradient scale. Switch to clustered order (average linkage on 1 − r) and the cells spring into blocks of related variables. Optional values inside the cells and a lower-triangle layout with names on the diagonal.

## Install

```bash
npx shadcn@latest add @obsyde/correlation-matrix
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/correlation-matrix/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { CorrelationMatrix } from '@/components/obsyde/ember/correlation-matrix/CorrelationMatrix';

export function Example() {
  return (
    <CorrelationMatrix variables={10} order="original" />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `variables` | number (4–12) | 10 | Variables |
| `order` | 'original' \| 'clustered' | 'original' | Order |
| `triangle` | 'full' \| 'lower' | 'full' | Triangle |
| `cellMax` | number (20–64) | 46 | Max cell |
| `palette` | 'mono' \| 'heat' | 'mono' | Palette |
| `legend` | 'gradient' \| 'none' | 'gradient' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `seed` | number (1–999) | 9 | Seed |

## Examples

- **Default**: Ten metrics in data order. `variables={10} order="original"`
- **Clustered**: Related metrics pulled into blocks. `variables={10} order="clustered"`
- **Values**: r printed in every cell. `variables={8} order="clustered" valueLabels={true} cellMax={52}`
- **Lower triangle**: Half the matrix, names on the diagonal. `variables={10} triangle="lower" order="clustered" cellMax={44}`
- **Heat ramp**: Positive correlations on the blackbody ramp. `variables={10} order="clustered" palette="heat"`
- **Twelve metrics**: Smaller cells, no scale. `variables={12} order="clustered" cellMax={34} legend="none" accent="volt"`
- **Arc**. `variables={6} order="clustered" valueLabels={true} cellMax={56} accent="arc"`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Marimekko

> Variable-width stacked columns: each column is as wide as its total and split by share, so area is value.

Charts · Comparison · Pro · https://obsydeui.com/charts/marimekko

Series are told apart by grey tone and texture, with 2px gaps between every block, and the largest block carries the accent. Point at a block, or step with the arrow keys (left and right for columns, up and down for series): its series stays while every other block steps back, faint bridges join that series across the columns so its share reads as one path, and the block prints its share. Columns rise left to right on entry, and switching a series off in the legend re-splits the columns and their widths on a 500ms morph.

## Install

```bash
npx shadcn@latest add @obsyde/marimekko
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/marimekko/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Marimekko } from '@/components/obsyde/ember/marimekko/Marimekko';

export function Example() {
  return (
    <Marimekko />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `columns` | number (2–6) | 5 | Columns |
| `series` | number (2–5) | 4 | Series |
| `pattern` | 'series' \| 'none' | 'series' | Pattern |
| `highlight` | 'max' \| 'none' | 'max' | Highlight |
| `bridges` | boolean | true | Bridges |
| `legend` | 'row' \| 'list' \| 'none' | 'row' | Legend |
| `tooltip` | 'panel' \| 'none' | 'panel' | Tooltip |
| `background` | 'grid' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `valueLabels` | boolean | false | Value labels |
| `height` | number (140–480) | 300 | Height |
| `seed` | number (1–999) | 3 | Seed |

## Examples

- **List legend**: A list legend with totals and shares; switch a series off to re-split. `legend="list" series={3}`
- **Column totals**: Each column prints its total under its name. `valueLabels={true} columns={4} seed={8}`
- **Flat tones**: Grey tones only, no bridges, no grid, nothing hot. `pattern="none" bridges={false} background="none" highlight="none"`
- **Six by five**: Six regions, five series. `columns={6} series={5} seed={11} height={320}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Dial Gauge

> One dial, four faces. Notched: fine notches round the rim over a numbered inner ruler, brightening as the sweep passes them with a short glow just behind the needle.

Charts · Metrics · Pro · https://obsydeui.com/charts/dial-gauge

Conic: no track, a conic wedge that brightens toward the value inside a thin progress ring, with a raised centre disc holding the number. Speedometer: heavier notches and an outside scale, with a red zone past the redline whose notches glow in the accent once lit, and rings of dots lighting behind. Dots: seven rings of dots lighting to the score and fading toward the centre. Needles come as a line, a tapered gradient, a triangle or a diamond; the line and tapered ones turn on a raised cap with a short tapered counterweight. The needle rides a spring with no bounce and re-sweeps from wherever it is when a new sample lands; the value rolls. The accent appears only past the redline. Point at the dial, or Tab in and use the arrow keys, to probe the scale: a small mark rides the rim, the centre number rolls to the probed value and the caption gives its distance from the reading.

## Install

```bash
npx shadcn@latest add @obsyde/dial-gauge
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/dial-gauge/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { DialGauge } from '@/components/obsyde/ember/dial-gauge/DialGauge';

export function Example() {
  return (
    <DialGauge variant="notched" needle="line" value={53} />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `variant` | 'notched' \| 'conic' \| 'speedometer' \| 'dots' | 'notched' | Variant |
| `needle` | 'line' \| 'tapered' \| 'triangle' \| 'diamond' \| 'none' | 'line' | Needle |
| `value` | number (0–100) | 62 | Value % |
| `redline` | number (0–95) | 80 | Redline % |
| `live` | boolean | false | Live |
| `size` | number (200–420) | 320 | Size |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |

## Examples

- **Notched, line needle**: Fine notches, inner ruler, a line needle; the red zone waits past 80%. `variant="notched" needle="line" value={53}`
- **Tapered needle, redline**: A gradient needle past an 80% redline: the dial runs hot. `variant="notched" needle="tapered" value={86} redline={80}`
- **Conic sector**: A wedge brightening toward the value, ringed centre disc. `variant="conic" needle="none" value={65} redline={0}`
- **Speedometer**: Red zone past the redline, glowing lit notches, dot rings. `variant="speedometer" needle="triangle" value={84} redline={78}`
- **Progress dots**: Seven rings of dots light to the score. `variant="dots" needle="none" value={83} redline={0}`
- **Live samples**: A new sample every 1.6s; the needle re-sweeps from where it is. `variant="notched" needle="diamond" live={true} redline={85}`
- **Loading**. `variant="notched" status="loading"`

---

# Pyramid

> A population (butterfly) chart: two sides grow outward from a centre spine that carries the age bands, oldest on top.

Charts · Comparison · Pro · https://obsydeui.com/charts/pyramid

A comparison year sits behind the bars as borderless ghost fills, so growth reads as bar beyond ghost and decline as ghost beyond bar. The median band is marked on the spine by the one hot caret. Point at a row or step with the arrow keys: both sides stay while the rest step back, the band label brightens and each side's value sits in a pill at the end of its bar. Switching the year morphs every bar over 500ms.

## Install

```bash
npx shadcn@latest add @obsyde/pyramid
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/pyramid/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Pyramid } from '@/components/obsyde/ember/pyramid/Pyramid';

export function Example() {
  return (
    <Pyramid />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `year` | '2005' \| '2015' \| '2025' | '2025' | Year |
| `yearSwitch` | boolean | false | Year switch |
| `compare` | boolean | true | Compare |
| `unit` | 'percent' \| 'count' | 'percent' | Unit |
| `median` | boolean | true | Median caret |
| `bands` | 'five' \| 'ten' | 'five' | Bands |
| `legend` | 'row' \| 'none' | 'row' | Legend |
| `tooltip` | 'pill' \| 'panel' \| 'none' | 'pill' | Tooltip |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Year switch**: 2005 / 2015 / 2025 morph the bars; the decade before is the ghost. `yearSwitch={true}`
- **Ten-year bands**: Fewer, taller rows; counts instead of shares; a panel readout. `bands="ten" unit="count" tooltip="panel"`
- **No comparison**: One year, hatched right side, no median caret. `compare={false} pattern="diagonal-up" median={false}`
- **Bare**: No legend, no grid. `legend="none" background="none" seed={6}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# Crucible

> One vessel per day, each filled to its value with molten metal.

Charts · Metrics · Pro · https://obsydeui.com/charts/crucible

The selected day is hot: its melt runs from deep red up through the accent to a bright surface and glows, while the other days hold cooled ash. A dashed level line runs from the selected surface across the row to a value pill in the accent, and the header rolls to the day’s value and its change on the day before. Scrub across the days with a pointer, a finger or the arrow keys and the heat moves with you; every change sets the melt’s surface wobbling, a meniscus that settles in about a second. Levels rise on a spring cascade.

## Install

```bash
npx shadcn@latest add @obsyde/crucible
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/crucible/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { Crucible } from '@/components/obsyde/ember/crucible/Crucible';

export function Example() {
  return (
    <Crucible />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `points` | number (3–21) | 7 | Days |
| `reference` | boolean | true | Level line |
| `valueLabels` | boolean | false | Value labels |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `live` | boolean | false | Live |
| `height` | number (140–360) | 220 | Height |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 6 | Seed |

## Examples

- **Week**: Seven vessels; the latest day is hot. `points={7}`
- **Value labels**: Every level labelled; the selected one brightens. `points={7} valueLabels={true}`
- **Hatched headroom**: The empty part of each vessel drawn as hatch. `points={7} pattern="diagonal-up"`
- **Fortnight**: 14 slimmer vessels, no level line. `points={14} reference={false}`
- **Live**: Today’s reading changes every 2s and its surface wobbles. `points={7} live={true}`
- **Empty**. `status="empty"`

---

# Bar Race

> A ranking that moves through time. Values glide between periods, bars re-rank on springs as they pass each other, the numbers at the bar ends count along and the period rolls in the corner.

Charts · Comparison · Pro · https://obsydeui.com/charts/bar-race

An overtake ignites: the bar that moves up flashes in the accent and cools over about a second, so who passed whom stays readable. Underneath, a play / pause button and a timeline you can drag, or step with the arrow keys (Space plays). Point at a bar, or step through the ranks with the arrow keys, to follow that entry: it stays bright while the others step back, wherever the race takes it.

## Install

```bash
npx shadcn@latest add @obsyde/bar-race
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/bar-race/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { BarRace } from '@/components/obsyde/ember/bar-race/BarRace';

export function Example() {
  return (
    <BarRace />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `top` | number (3–12) | 8 | Bars shown |
| `entries` | number (3–12) | 10 | Entries |
| `period` | number (1–12) | 12 | Period |
| `autoplay` | boolean | false | Autoplay |
| `pattern` | 'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch' | 'none' | Pattern |
| `background` | 'grid' \| 'none' | 'grid' | Background |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 7 | Seed |

## Examples

- **Playing**: Starts on its own and loops, a period every 0.9s. `autoplay={true} loop={true} speed={0.9}`
- **Midway**: Paused in 2019, top five of twelve. `period={6} top={5} entries={12}`
- **Hatched**: Hatched bars, no grid, no ignition. `pattern="diagonal-up" background="none" ignite={false} seed={3}`
- **Slow**: Two seconds a period, so every overtake reads. `autoplay={true} speed={2} period={1} seed={12}`
- **Loading**. `status="loading"`
- **Empty**. `status="empty"`

---

# KPI Cards

> Stat cards whose sparkline is a scrubber for the number above it.

Charts · Metrics · Pro · https://obsydeui.com/charts/kpi-cards

Point along a card’s sparkline, or Tab in and use the arrow keys, and its big number and day follow the cursor with rolling digits while the line steps back to half strength around a bright window that springs with you; leave and they fall back to the latest value. The delta pill carries the direction in its glyph and brightness, never green or red, and knows when lower is better. Cards in a row share one focus store, so every crosshair and number moves together. The latest point is a pilot light that breathes while the data is fresh and goes ash when it is stale. Also a dense grid of 32 or more sparklines that share one size observer and one pointer handler with no per-cell runtime, and a table with inline sparklines whose row values roll.

## Install

```bash
npx shadcn@latest add @obsyde/kpi-cards
```

A Pro piece: the `@obsyde` registry entry must be in components.json and `OBSYDE_LICENSE_KEY` set. See https://obsydeui.com/docs/pro.md.

Files land in `components/obsyde/ember/kpi-cards/`, with shared files in `components/obsyde/ember/viz-kit/`, `components/obsyde/ember/shared/`. Keep that layout: the files import each other by relative path. Plain React, TypeScript and CSS with no other dependencies; the components are client components.

## Usage

```tsx
import { KpiRow } from '@/components/obsyde/ember/kpi-cards/KpiCards';

export function Example() {
  return (
    <KpiRow />
  );
}
```

## API

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `accent` | 'ember' \| 'volt' \| 'arc' | 'ember' | Accent |
| `view` | 'cards' \| 'grid' \| 'table' | 'cards' | View |
| `kind` | 'area' \| 'line' \| 'bar' | 'area' | First sparkline |
| `sync` | boolean | true | Sync crosshairs |
| `crosshair` | 'solid' \| 'dashed' \| 'gradient' \| 'none' | 'dashed' | Crosshair |
| `pilot` | boolean | true | Pilot light |
| `stale` | boolean | false | Stale card |
| `live` | boolean | false | Live |
| `cells` | number (8–96) | 32 | Grid cells |
| `points` | number (6–90) | 24 | Points |
| `status` | 'ready' \| 'loading' \| 'empty' | 'ready' | Status |
| `seed` | number (1–999) | 2 | Seed |

## Examples

- **Synced cards**: Four cards (area, line, bars, line); one crosshair moves them all. `view="cards"`
- **Independent cards**: Each card scrubs on its own; solid crosshairs; line sparkline. `view="cards" sync={false} crosshair="solid" kind="line"`
- **Stale pilot**: Visitors stopped updating: its pilot light has gone ash. `view="cards" stale={true} crosshair="gradient"`
- **Live**: A new point every 1.5s; the pilot lights breathe. `view="cards" live={true}`
- **Dense grid**: 48 sparklines, one observer and one pointer handler, synced. `view="grid" cells={48}`
- **Table**: Inline sparklines in rows; values and changes roll together. `view="table"`
- **Loading**. `view="cards" status="loading"`

---

# Changelog

> What shipped in Obsyde UI, newest first.

## 14 November 2026: Docs, Polar checkout and twenty-one new pieces

- Docs: installation, Pro and the CLI, theming, and a guide for AI agents.
- Every page has a Markdown twin, plus llms.txt and llms-full.txt for language models.
- Checkout moved to Polar. The licence key from your receipt restores Pro on any device and works with the CLI.
- A NEW chip marks recent pieces on cards, item pages and a New tab in the library.
- A second pass on the newest pieces: Inbox opens from its bell, Reaction Bar gained Super Reactions, Hotkey Recorder records chords, and Side Nav was rebuilt.

New pieces (20): [Before / After](https://obsydeui.com/components/before-after.md), [Bento Showcase](https://obsydeui.com/components/bento.md), [Changelog](https://obsydeui.com/components/changelog.md), [Comparison Table](https://obsydeui.com/components/comparison.md), [Data Grid](https://obsydeui.com/components/data-grid.md), [Diff Viewer](https://obsydeui.com/components/diff-viewer.md), [Gantt](https://obsydeui.com/components/gantt.md), [Glass Lens](https://obsydeui.com/components/glass-lens.md), [Guided Tour](https://obsydeui.com/components/guided-tour.md), [Hotkey Recorder](https://obsydeui.com/components/hotkey-recorder.md), [Notification Inbox](https://obsydeui.com/components/inbox.md), [Onboarding Checklist](https://obsydeui.com/components/onboarding-checklist.md), [Presence](https://obsydeui.com/components/presence.md), [Profile Peek](https://obsydeui.com/components/profile-peek.md), [Reaction Bar](https://obsydeui.com/components/reaction-bar.md), [Rich Text Editor](https://obsydeui.com/components/rich-text.md), [Shard Rating](https://obsydeui.com/components/shard-rating.md), [Terminal](https://obsydeui.com/components/terminal.md), [Testimonial Wall](https://obsydeui.com/components/testimonials.md), [Waveform Player](https://obsydeui.com/components/waveform-player.md).

## 13 November 2026: Obsyde UI, lifetime pricing and the licence

- The store is Obsyde UI. Pro and Team are paid once, with every update included.
- The Obsyde Licence 1.0: one licence for every piece, in plain words, shipped with every download and install.
- Install any piece with the shadcn CLI, and brief your coding agent with Copy prompt.
- Charts open already drawn, and edge-anchored effects run to the bottom of the stage.

New pieces (4): [Calendar](https://obsydeui.com/components/calendar.md), [Flow Canvas](https://obsydeui.com/components/flow-canvas.md), [Kanban Board](https://obsydeui.com/components/kanban.md), [Roadmap Timeline](https://obsydeui.com/components/roadmap.md).

## 12 November 2026: Charts and page sections

- The charts: lines, bars, distributions, flows, networks and maps, sharing one tooltip, legend and loading state.
- Page sections, and more effects.

New pieces (121): [Arc Diagram](https://obsydeui.com/charts/arc-diagram.md), [Area Chart](https://obsydeui.com/charts/area-chart.md), [ASCII Wake](https://obsydeui.com/components/ascii-wake.md), [Avatar](https://obsydeui.com/components/avatar.md), [Bar Chart](https://obsydeui.com/charts/bar-chart.md), [Bar List](https://obsydeui.com/charts/bar-list.md), [Bar Race](https://obsydeui.com/charts/bar-race.md), [Barcode Stack](https://obsydeui.com/charts/barcode-stack.md), [Beam](https://obsydeui.com/components/beam.md), [Beeswarm](https://obsydeui.com/charts/beeswarm.md), [Blaze](https://obsydeui.com/components/blaze.md), [Border Beam](https://obsydeui.com/components/border-beam.md), [Box Plot](https://obsydeui.com/charts/box-plot.md), [Breadcrumbs](https://obsydeui.com/components/breadcrumbs.md), [Bubble Chart](https://obsydeui.com/charts/bubble-chart.md), [Budget Columns](https://obsydeui.com/charts/budget-columns.md), [Bullet Chart](https://obsydeui.com/charts/bullet-chart.md), [Bump Chart](https://obsydeui.com/charts/bump-chart.md), [Calendar Heatmap](https://obsydeui.com/charts/calendar-heatmap.md), [Candlestick](https://obsydeui.com/charts/candlestick.md), [Card Stack](https://obsydeui.com/components/card-stack.md), [Carousel](https://obsydeui.com/components/carousel.md), [Chart Annotations](https://obsydeui.com/charts/chart-annotations.md), [Chart Legend](https://obsydeui.com/charts/chart-legend.md), [Chart Patterns](https://obsydeui.com/charts/chart-patterns.md), [Chart States](https://obsydeui.com/charts/chart-states.md), [Chart Tooltip](https://obsydeui.com/charts/chart-tooltip.md), [Chord Diagram](https://obsydeui.com/charts/chord-diagram.md), [Circle Pack](https://obsydeui.com/charts/circle-pack.md), [Color Picker](https://obsydeui.com/components/color-picker.md), [Context Meter](https://obsydeui.com/components/context-meter.md), [Correlation Matrix](https://obsydeui.com/charts/correlation-matrix.md), [Crucible](https://obsydeui.com/charts/crucible.md), [Density Plot](https://obsydeui.com/charts/density-plot.md), [Dial Gauge](https://obsydeui.com/charts/dial-gauge.md), [Diverging Bars](https://obsydeui.com/charts/diverging-bars.md), [Dock](https://obsydeui.com/components/dock.md), [Donut Chart](https://obsydeui.com/charts/donut-chart.md), [Dot Matrix](https://obsydeui.com/components/dot-matrix.md), [Dumbbell](https://obsydeui.com/charts/dumbbell.md), [Dynamic Island](https://obsydeui.com/components/dynamic-island.md), [Ember Dust](https://obsydeui.com/charts/dust.md), [FAQ](https://obsydeui.com/components/faq.md), [Feature Grid](https://obsydeui.com/components/feature-grid.md), [Filament Text](https://obsydeui.com/components/filament-text.md), [Flame Wrap](https://obsydeui.com/components/flame-wrap.md), [Footer](https://obsydeui.com/components/footer.md), [Forecast Handoff](https://obsydeui.com/charts/forecast-handoff.md), [Frost](https://obsydeui.com/components/frost.md), [Funnel](https://obsydeui.com/charts/funnel.md), [Goo Toggle](https://obsydeui.com/components/goo-toggle.md), [Half Donut](https://obsydeui.com/charts/half-donut.md), [Hero](https://obsydeui.com/components/hero.md), [Hexbin](https://obsydeui.com/charts/hexbin.md), [Histogram Range](https://obsydeui.com/charts/histogram-range.md), [Horizon Chart](https://obsydeui.com/charts/horizon-chart.md), [Kiln Gauge](https://obsydeui.com/charts/kiln-gauge.md), [KPI Cards](https://obsydeui.com/charts/kpi-cards.md), [Line Chart](https://obsydeui.com/charts/line-chart.md), [Live Line](https://obsydeui.com/charts/live-line.md), [Lollipop](https://obsydeui.com/charts/lollipop.md), [Magnet](https://obsydeui.com/components/magnet.md), [Marimekko](https://obsydeui.com/charts/marimekko.md), [Marquee](https://obsydeui.com/components/marquee.md), [Metal](https://obsydeui.com/components/metal.md), [Metric](https://obsydeui.com/charts/metric.md), [Molten Text](https://obsydeui.com/components/molten-text.md), [Morph Card](https://obsydeui.com/components/morph-card.md), [Navbar](https://obsydeui.com/components/navbar.md), [Network Graph](https://obsydeui.com/charts/network-graph.md), [Overheat Seam](https://obsydeui.com/charts/overheat-seam.md), [Parallel Coordinates](https://obsydeui.com/charts/parallel-coordinates.md), [Pareto](https://obsydeui.com/charts/pareto.md), [Particle Text](https://obsydeui.com/components/particle-text.md), [Pricing](https://obsydeui.com/components/pricing.md), [Profit / Loss Line](https://obsydeui.com/charts/profit-loss-line.md), [Punch Card](https://obsydeui.com/charts/punch-card.md), [Pyramid](https://obsydeui.com/charts/pyramid.md), [Radar Chart](https://obsydeui.com/charts/radar-chart.md), [Radial Bars](https://obsydeui.com/charts/radial-bars.md), [Radial Clock](https://obsydeui.com/charts/radial-clock.md), [Radial Histogram](https://obsydeui.com/charts/radial-histogram.md), [Radial Line](https://obsydeui.com/charts/radial-line.md), [Radial Stack](https://obsydeui.com/charts/radial-stack.md), [Range Band](https://obsydeui.com/charts/range-band.md), [Range Bars](https://obsydeui.com/charts/range-bars.md), [Resizable](https://obsydeui.com/components/resizable.md), [Ribbon Chart](https://obsydeui.com/charts/ribbon-chart.md), [Ridgeline](https://obsydeui.com/charts/ridgeline.md), [Ring Stack](https://obsydeui.com/charts/ring-stack.md), [Rose Chart](https://obsydeui.com/charts/rose-chart.md), [Rotary Knob](https://obsydeui.com/components/rotary-knob.md), [Sankey](https://obsydeui.com/charts/sankey.md), [Scatter Plot](https://obsydeui.com/charts/scatter-plot.md), [Scroll Reveal Text](https://obsydeui.com/components/scroll-reveal-text.md), [Shockwave](https://obsydeui.com/components/shockwave.md), [Signal & Noise](https://obsydeui.com/charts/signal-noise.md), [Signature Pad](https://obsydeui.com/components/signature-pad.md), [Signup](https://obsydeui.com/components/signup.md), [Slide to Confirm](https://obsydeui.com/components/slide-confirm.md), [Slope Chart](https://obsydeui.com/charts/slope-chart.md), [Slosh Slider](https://obsydeui.com/components/slosh-slider.md), [Small Multiples](https://obsydeui.com/charts/small-multiples.md), [Smoke](https://obsydeui.com/components/smoke.md), [Sortable List](https://obsydeui.com/components/sortable-list.md), [Sparks](https://obsydeui.com/components/sparks.md), [Split Flap](https://obsydeui.com/components/split-flap.md), [Spotlight Grid](https://obsydeui.com/components/spotlight-grid.md), [Step Line](https://obsydeui.com/charts/step-line.md), [Streamgraph](https://obsydeui.com/charts/streamgraph.md), [Sunburst](https://obsydeui.com/charts/sunburst.md), [Tick Ring](https://obsydeui.com/charts/tick-ring.md), [Timeline Bars](https://obsydeui.com/charts/timeline-bars.md), [Treemap](https://obsydeui.com/charts/treemap.md), [Unit Columns](https://obsydeui.com/charts/unit-columns.md), [Unit Dots](https://obsydeui.com/charts/unit-dots.md), [Violin](https://obsydeui.com/charts/violin.md), [Waffle](https://obsydeui.com/charts/waffle.md), [Wake Slider](https://obsydeui.com/components/wake-slider.md), [Waterfall](https://obsydeui.com/charts/waterfall.md), [Year Loop](https://obsydeui.com/charts/year-loop.md).

## 11 November 2026: First release

- The first pieces: actions, forms, data, navigation, overlays, feedback, effects and the first charts. Dark, and monochrome at rest.

New pieces (60): [Accordion](https://obsydeui.com/components/accordion.md), [Button](https://obsydeui.com/components/button.md), [Callout](https://obsydeui.com/components/callout.md), [Checkbox](https://obsydeui.com/components/checkbox.md), [Cinder](https://obsydeui.com/components/cinder.md), [Combobox](https://obsydeui.com/components/combobox.md), [Command Palette](https://obsydeui.com/components/command-palette.md), [Convection](https://obsydeui.com/components/convection.md), [Copy Button](https://obsydeui.com/components/copy-button.md), [Date Picker](https://obsydeui.com/components/date-picker.md), [Decode Text](https://obsydeui.com/components/decode-text.md), [Detent Slider](https://obsydeui.com/components/detent-slider.md), [Dialog](https://obsydeui.com/components/dialog.md), [Dither Reveal](https://obsydeui.com/components/dither-reveal.md), [Drawer](https://obsydeui.com/components/drawer.md), [File Drop](https://obsydeui.com/components/file-drop.md), [Filings](https://obsydeui.com/components/filings.md), [Fuse Button](https://obsydeui.com/components/fuse-button.md), [Gauge](https://obsydeui.com/charts/gauge.md), [Heat Grid](https://obsydeui.com/charts/heat-grid.md), [Heat Haze](https://obsydeui.com/components/heat-haze.md), [Hotplate](https://obsydeui.com/components/hotplate.md), [Icon Button](https://obsydeui.com/components/icon-button.md), [Inplace Select](https://obsydeui.com/components/inplace-select.md), [Kbd](https://obsydeui.com/components/kbd.md), [Menu](https://obsydeui.com/components/menu.md), [Molten Edge](https://obsydeui.com/components/molten-edge.md), [Number Input](https://obsydeui.com/components/number-input.md), [Pagination](https://obsydeui.com/components/pagination.md), [Password Input](https://obsydeui.com/components/password-input.md), [Pin Input](https://obsydeui.com/components/pin-input.md), [Popover](https://obsydeui.com/components/popover.md), [Progress](https://obsydeui.com/components/progress.md), [Pulse Line](https://obsydeui.com/charts/pulse-line.md), [Radio Group](https://obsydeui.com/components/radio-group.md), [Range Slider](https://obsydeui.com/components/range-slider.md), [Scroll Area](https://obsydeui.com/components/scroll-area.md), [Scrub Bars](https://obsydeui.com/charts/scrub-bars.md), [Search Input](https://obsydeui.com/components/search-input.md), [Segmented Control](https://obsydeui.com/components/segmented.md), [Side Nav](https://obsydeui.com/components/side-nav.md), [Skeleton](https://obsydeui.com/components/skeleton.md), [Smoulder Text](https://obsydeui.com/components/smoulder-text.md), [Sparkline](https://obsydeui.com/charts/sparkline.md), [Spinner](https://obsydeui.com/components/spinner.md), [Status](https://obsydeui.com/components/status.md), [Stepper](https://obsydeui.com/components/stepper.md), [Strata](https://obsydeui.com/charts/strata.md), [Switch](https://obsydeui.com/components/switch.md), [Table](https://obsydeui.com/components/table.md), [Tabs](https://obsydeui.com/components/tabs.md), [Tag Input](https://obsydeui.com/components/tag-input.md), [Textarea](https://obsydeui.com/components/textarea.md), [Thermal](https://obsydeui.com/components/thermal.md), [Ticker](https://obsydeui.com/components/ticker.md), [Tilt](https://obsydeui.com/components/tilt.md), [Toast](https://obsydeui.com/components/toast.md), [Tooltip](https://obsydeui.com/components/tooltip.md), [Trace Input](https://obsydeui.com/components/trace-input.md), [Tree](https://obsydeui.com/components/tree.md).