# Lode UI: full reference

> Every component, block and template doc in one file. Pro source is never included.

---

# Button

> A clear, responsive action with quiet secondary states.

Component · Free · https://lodeui.com/components/button

## When to use

- The main or secondary action in a form, dialog, card or toolbar.
- Async actions that need a loading state without the button changing width.
- Icon-only actions in dense toolbars, with an aria-label.

## When not to use

- Navigating to another page: render a link styled with buttonVariants() instead.
- Picking one option from a few: use a segmented control or radio group.
- An action whose result should show in place (Saved, Failed): use the action button.

## Installation

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

## Usage

```tsx title="example.tsx"
import { Button } from "@/components/ui/button";

export function SaveBar({ pending, onSave }: { pending: boolean; onSave: () => void }) {
  return (
    <div className="flex justify-end gap-2">
      <Button variant="ghost">Discard</Button>
      <Button loading={pending} onClick={onSave}>Save changes</Button>
    </div>
  );
}
```

## API reference

### Button

A native button with five visual weights, five sizes and a loading state. All other button attributes pass through.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive"` | `"primary"` | Visual weight. Use one primary per view. |
| size | `"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"` | `"md"` | Height and padding. Icon sizes are square. |
| loading | `boolean` | `false` | Shows a spinner, disables the button and keeps its width so the layout doesn't jump. |
| type | `"button" \| "submit" \| "reset"` | `"button"` | Defaults to button so it never submits a form by accident. |
| ...props | `ButtonHTMLAttributes<HTMLButtonElement>` | – | onClick, disabled, aria-* and anything else a button accepts. |

### buttonVariants

Returns the button class string, for links and other elements that should look like a button.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `{ variant?; size?; className? }` | – | Same variant and size values as Button. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Activates the button |
| Tab | Moves focus to and from the button |

## Accessibility

- Renders a real <button>, so it is focusable and announced as a button.
- Loading sets aria-busy and disables the control; the label stays in the DOM for screen readers.
- Icon-only buttons need an aria-label. The focus ring meets contrast on both themes.

## Motion

- Scales to 97% while pressed over 150ms ease-out.
- Hover only changes color, so dense toolbars stay calm.

## Responsive behavior

- Sizes are fixed heights (32, 40, 48px), so buttons line up in any layout.
- Text never wraps; pair long labels with a wider container or the sm size on phones.
- Use w-full on mobile for primary actions at the bottom of forms.

## Performance

- No JavaScript beyond React: hover and press are CSS transitions.
- buttonVariants is a pure function you can call on the server.

## Notes for AI

- Use variant="primary" once per view; secondary or ghost for the rest.
- Pass loading instead of swapping the label for a spinner yourself.
- For links, use <Link className={buttonVariants({ variant: "outline" })}>, not <Button onClick={router.push}>.

## Related

- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Tooltip](https://lodeui.com/components/tooltip) — A small label on hover or focus, with a delay that respects intent.


---

# Segmented control

> A compact single choice with a pill that slides to the selection.

Component · Free · https://lodeui.com/components/segmented-control

## When to use

- Two to five mutually exclusive options that should all be visible, like 7D / 30D / 90D.
- Switching a view (list, board, calendar) or a billing cycle.

## When not to use

- More than five options or long labels: use a select.
- Options that trigger actions rather than set a value: use buttons.
- Navigation between pages: use tabs or links.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/segmented-control.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { SegmentedControl } from "@/components/ui/segmented-control";

export function RangePicker({ value, onChange }: { value: "7" | "30" | "90"; onChange: (v: "7" | "30" | "90") => void }) {
  return (
    <SegmentedControl
      aria-label="Range"
      value={value}
      onValueChange={onChange}
      options={[
        { value: "7", label: "7 days" },
        { value: "30", label: "30 days" },
        { value: "90", label: "90 days" },
      ]}
    />
  );
}
```

## API reference

### SegmentedControl

A radio group drawn as a pill track. Generic over the option value type, so onValueChange is typed.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `readonly { value: T; label: ReactNode }[]` | – | The choices, in order. Labels can include icons. |
| value / defaultValue | `T` | – | Controlled or uncontrolled value. Defaults to the first option. |
| onValueChange | `(value: T) => void` | – | Called with the newly selected value. |
| size | `"sm" \| "md"` | `"md"` | 36px or 44px tall. |
| aria-label | `string` | – | Names the group for screen readers. Required unless a visible label is linked. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Select the previous or next option |
| ↑ / ↓ | Same as left and right |
| Home / End | Select the first or last option |

## Accessibility

- role="radiogroup" with role="radio" items and aria-checked.
- Roving tabindex: Tab enters the group once, arrows move inside it.
- The selected option is not conveyed by color alone; the pill has a ring and shadow.

## Motion

- The pill is a shared-layout element that springs between options (bounce 0.15, 450ms).
- Text color crossfades in 200ms.

## Responsive behavior

- Width hugs the labels. Add className="w-full [&>button]:flex-1" to stretch it on phones.
- Keep labels short (one or two words) so it fits at 320px.

## Performance

- One animated element per control; options are plain buttons.

## Notes for AI

- Always pass aria-label.
- Use `as const` on the options array to get a literal union for T.

## Related

- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.
- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.
- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.


---

# Number field

> A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.

Component · Free · https://lodeui.com/components/number-field

## When to use

- Small integer quantities: seats, guests, items, replicas.
- Values people adjust by feel, where dragging to scrub is faster than typing.

## When not to use

- Large or precise numbers like prices or IDs: use an input.
- A continuous range: use a slider.
- Values with units that need typing (e.g. 12.5 GB): use an input with a trailing unit.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/number-field.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { NumberField } from "@/components/ui/number-field";

export function Seats({ seats, setSeats }: { seats: number; setSeats: (n: number) => void }) {
  return (
    <NumberField
      aria-label="Seats"
      value={seats}
      onValueChange={setSeats}
      min={1}
      max={50}
      format={(n) => `${n} ${n === 1 ? "seat" : "seats"}`}
    />
  );
}
```

## API reference

### NumberField

A spinbutton with decrement and increment buttons, press-and-hold repeat, drag-to-scrub and limit feedback.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue | `number` | `0` | Controlled or uncontrolled value. |
| onValueChange | `(value: number) => void` | – | Called on every change, including while scrubbing. |
| min / max | `number` | `-∞ / ∞` | Bounds. Pushing past them nudges the field instead of changing the value. |
| step | `number` | `1` | Increment for buttons, arrow keys and each 10px of scrubbing. |
| format | `(value: number) => string` | `String` | Display text, also used as aria-valuetext. |
| scrub | `boolean` | `true` | Drag the value horizontally to change it. |
| size | `"sm" \| "md"` | `"md"` | 224px or 304px wide, with smaller or larger digits. |
| disabled | `boolean` | – | Dims and blocks interaction. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / → | Increase by step |
| ↓ / ← | Decrease by step |
| Page Up / Page Down | Change by ten steps |
| Home / End | Jump to min or max |

## Accessibility

- The value is a role="spinbutton" with aria-valuenow, min, max and valuetext.
- The − and + buttons are labelled and skipped in tab order, as the spinbutton pattern recommends.
- Keyboard activation of the buttons still works for assistive tech.

## Motion

- Digits roll up when the value grows and down when it shrinks (spring, 320ms).
- At a limit the field nudges 7px toward the push and springs back.
- Scrubbing past a limit rubber-bands with square-root resistance.

## Responsive behavior

- Fixed widths that shrink with max-w-full in narrow containers.
- Scrubbing uses pointer events, so it works with touch.

## Performance

- Hold-to-repeat speeds up from 380ms to 50ms intervals and stops on pointer up or leave.
- Only the value text re-renders on change.

## Notes for AI

- Use format for units so screen readers hear them too.
- For non-integers set step (e.g. 0.5) and format with toFixed.

## Related

- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.


---

# Select

> A pill trigger with a springy menu, typeahead, and full keyboard support.

Component · Free · https://lodeui.com/components/select

## When to use

- Picking one value from a short list: status, assignee, priority.
- Property panels where the current value reads as text with an icon.

## When not to use

- Long lists people need to search: use a combobox.
- Two or three options that should stay visible: use a segmented control.
- Multiple values: use a combobox with multiple.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/select.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Select } from "@/components/ui/select";

const priorities = [
  { value: "high", label: "High" },
  { value: "medium", label: "Medium" },
  { value: "low", label: "Low" },
] as const;

export function PriorityField() {
  return <Select aria-label="Priority" options={priorities} defaultValue="medium" />;
}
```

## API reference

### Select

A pill trigger that opens a listbox. The menu flips above the trigger when there isn't room below.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `readonly { value: T; label: string; icon?: ReactNode }[]` | – | The choices. |
| value / defaultValue | `T` | – | Controlled or uncontrolled value. |
| onValueChange | `(value: T) => void` | – | Called when an option is chosen. |
| placeholder | `string` | `"Select"` | Shown when there's no value. |
| align | `"start" \| "end"` | `"end"` | Which edge of the trigger the menu lines up with. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space / ↓ | Open the menu |
| ↑ / ↓ | Move the highlight |
| Home / End | First or last option |
| Enter / Space | Choose |
| Esc | Close and return focus |
| Letters | Jump to the matching option |

## Accessibility

- Trigger has aria-haspopup="listbox" and aria-expanded.
- The menu is a listbox using aria-activedescendant, so focus stays on one element.
- Selected option has aria-selected and a check mark.

## Motion

- The menu scales in from its anchor corner (spring, 300ms).
- The trigger's width and label animate when the value changes.

## Responsive behavior

- The trigger hugs its label; the menu is at least 192px wide.
- Opening near the bottom of the viewport flips the menu upward.

## Performance

- Options render only while open. Typeahead resets after 600ms.

## Notes for AI

- Always pass aria-label when there's no visible label.
- For more than ~10 options use Combobox instead.

## Related

- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.


---

# Date range picker

> Pick a start and an end on a calendar that previews the range as you move.

Component · Pro · https://lodeui.com/components/date-range-picker

## When to use

- Filtering reports, logs or bookings by a span of days.
- Choosing travel or booking dates with presets for common ranges.

## When not to use

- A single date: use a date picker.
- Fuzzy ranges like 'last 30 days' only: use a segmented control.

## Installation

```bash
npx shadcn@latest add @lode/date-range-picker
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { DateRangePicker, countDays, type DateRange } from "@/components/ui/date-range-picker";

export function ReportRange() {
  const [range, setRange] = React.useState<DateRange>({ from: new Date(2026, 9, 1), to: new Date(2026, 9, 7) });
  return (
    <div className="flex items-center gap-3">
      <DateRangePicker value={range} onValueChange={setRange} />
      <span className="text-sm text-muted-foreground">{countDays(range)} days</span>
    </div>
  );
}
```

## API reference

### DateRangePicker

A trigger showing the formatted range and a calendar popover. The first click sets the start, the second the end.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue | `{ from: Date; to: Date }` | – | Controlled or uncontrolled range. |
| onValueChange | `(range: DateRange) => void` | – | Called once both ends are picked, or a preset is chosen. |
| presets | `{ label: string; range: DateRange }[]` | – | Shortcuts shown beside the calendar from 640px up. |
| align | `"start" \| "center" \| "end"` | `"center"` | Popover alignment. |

### countDays

Inclusive number of days in a range, safe across daylight-saving changes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| range | `DateRange` | – | The range to count. |

### formatRange

Compact label like 'Oct 1 – 7, 2026'. Locale-independent, so server and client agree.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| range | `DateRange` | – | The range to format. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Previous or next day |
| ↑ / ↓ | Previous or next week |
| Enter / Space | Pick the focused day |
| Esc | Close |

## Accessibility

- Each day is a labelled button (e.g. 'October 10, 2026') inside a role="grid".
- The month heading is a polite live region, so paging is announced.
- Selected days are marked with aria-pressed.

## Motion

- Months slide in the direction you page.
- While picking the end, the range band previews under the pointer.

## Responsive behavior

- The calendar is 280px wide; presets hide below 640px to fit phones.
- The popover centers under the trigger by default.

## Performance

- The grid is 42 buttons computed from plain Date math; no date library.

## Notes for AI

- Dates are local calendar dates; convert to UTC at your API boundary.
- Use formatRange for labels to avoid hydration mismatches from toLocaleDateString.

## Related

- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.


---

# Command palette

> Type to filter, arrow to move, Enter to run. Inline or as a ⌘K dialog.

Component · Pro · https://lodeui.com/components/command-palette

## When to use

- Power-user actions and site search behind ⌘K.
- Long action lists that benefit from type-to-filter.

## When not to use

- As the only way to reach an action: keep visible controls too.
- Choosing a form value: use a combobox.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { useRouter } from "next/navigation";
import { CommandDialog, useCommandShortcut } from "@/components/ui/command-palette";

export function GlobalSearch() {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  useCommandShortcut(() => setOpen((o) => !o));
  return (
    <CommandDialog
      open={open}
      onOpenChange={setOpen}
      groups={[{ heading: "Pages", items: [{ id: "/settings", label: "Settings", keywords: ["account"] }] }]}
      onSelect={(item) => router.push(item.id)}
    />
  );
}
```

## API reference

### CommandPalette

Input plus grouped results with fuzzy matching. Render inline, or use CommandDialog for a modal.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| groups | `{ heading: string; items: CommandItem[] }[]` | – | Items have id, label, description, icon, shortcut, keywords and onSelect. |
| onSelect | `(item: CommandItem) => void` | – | Called on Enter or click, after the item's own onSelect. |
| placeholder / emptyMessage | `string` | – | Input placeholder and no-results text. |
| toolbar | `ReactNode` | – | Controls under the input, e.g. filter chips. |
| emptyQueryGroups | `CommandGroup[]` | – | Shown first while the query is empty, e.g. recent items. |
| maxHeight | `number` | `340` | List height before it scrolls. |

### CommandDialog

The palette in a modal with scroll lock, Escape to close and focus return.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open / onOpenChange | `boolean / (open: boolean) => void` | – | Controlled visibility. Accepts every CommandPalette prop too. |

### useCommandShortcut

Calls a function on ⌘K or Ctrl+K.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onTrigger | `() => void` | – | Usually toggles the dialog. |
| key | `string` | `"k"` | Letter to listen for with ⌘ or Ctrl. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move the highlight |
| Ctrl+P / Ctrl+N | Same as up and down |
| Home / End | First or last result |
| Enter | Run the highlighted item |
| ⌘K / Ctrl+K | Toggle (with useCommandShortcut) |
| Esc | Close the dialog |

## Accessibility

- The input is a combobox controlling a listbox through aria-activedescendant.
- Matched text is underlined, not just colored.
- The dialog is aria-modal and returns focus to where it was opened from.

## Motion

- The highlight glides between rows (spring, 220ms).
- The list height animates as results filter.
- The dialog scales in from 96%.

## Responsive behavior

- The dialog is full-width with 16px gutters on phones, 576px max on desktop.
- The ⌘K hint hides below 640px.

## Performance

- Scoring runs on every keystroke over label, description and keywords; fine up to a few thousand items.
- Scrolling keeps the active row visible by moving only the list, never the page.

## Notes for AI

- Put synonyms in keywords instead of the label.
- Item ids must be unique across groups.

## Related

- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.


---

# Animated number

> A number that springs to its new value instead of jumping.

Component · Free · https://lodeui.com/components/animated-number

## When to use

- Totals and KPIs that change in response to input, like a price as seats change.

## When not to use

- Values read precisely while changing quickly, like timers.
- When each digit should roll on its own: use the number ticker.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/animated-number.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AnimatedNumber } from "@/components/ui/animated-number";

export function Total({ amount }: { amount: number }) {
  return <AnimatedNumber value={amount} format={(n) => `$${Math.round(n).toLocaleString("en-US")}`} className="text-3xl font-semibold" />;
}
```

## API reference

### AnimatedNumber

Springs from the previous value to the new one, formatting every frame.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number` | – | Target value. |
| format | `(n: number) => string` | `en-US integer` | Runs every frame, so keep it cheap. |
| stiffness / damping | `number` | `140 / 24` | Spring tuning. |

## Accessibility

- Screen readers get the settled value from a visually hidden span; the animating text is aria-hidden.

## Motion

- A spring drives the value; tabular numerals stop the width from jittering.

## Responsive behavior

- Inline text; inherits size from its parent.

## Performance

- Updates bypass React rendering: the motion value writes text directly.

## Notes for AI

- Round inside format; the spring passes fractional values.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.


---

# Donut chart

> Proportions as arcs that morph when the data changes.

Component · Pro · https://lodeui.com/components/donut-chart

## When to use

- Up to six parts of a whole, like traffic sources or plan mix.

## When not to use

- Comparing many similar values: use a bar chart.
- Change over time: use an area or line chart.

## Installation

```bash
npx shadcn@latest add @lode/donut-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { DonutChart } from "@/components/ui/donut-chart";

export function Sources() {
  return (
    <DonutChart
      centerLabel="Visits"
      data={[
        { label: "Search", value: 16840, color: "var(--chart-1)" },
        { label: "Direct", value: 8120, color: "var(--chart-2)" },
        { label: "Referrals", value: 6430, color: "var(--chart-4)" },
      ]}
    />
  );
}
```

Built from: Animated number

## API reference

### DonutChart

Proportional arcs with a total in the middle. Hover a segment to see its own value.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label: string; value: number; color: string }[]` | – | Segments in drawing order, clockwise from 12 o'clock. |
| size / thickness | `number` | `240 / 30` | Max diameter and ring width in px. Shrinks to fit narrower containers. |
| gap | `number` | `2.5` | Gap between segments in degrees. |
| centerLabel / format | `string / (n) => string` | `"Total"` | Center caption and number format. |
| activeIndex / onActiveIndexChange | `number \| null` | – | Control the highlight, e.g. from a legend list. |

## Accessibility

- The SVG has role="img" labelled with the total.
- Always pair it with a legend that lists exact values; color is not enough on its own.

## Motion

- Arcs sweep in from 12 o'clock, then interpolate start and end angles when data changes (800ms).
- Hover thickens a segment and dims the others.

## Responsive behavior

- Square, fills its container up to size.

## Performance

- Arc paths are computed per frame only during the 800ms transition.

## Notes for AI

- Use var(--chart-1) to var(--chart-6) so colors follow the theme.
- Keep labels unique; they're used as keys.

## Related

- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Animated number](https://lodeui.com/components/animated-number) — A number that springs to its new value instead of jumping.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.


---

# Area chart

> A smooth trend line with a comparison period and an inspectable crosshair.

Component · Pro · https://lodeui.com/components/area-chart

## When to use

- One metric over time, optionally against the previous period.

## When not to use

- Several series: use a line chart with a legend.
- Part-to-whole: use a donut chart.

## Installation

```bash
npx shadcn@latest add @lode/area-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AreaChart } from "@/components/ui/area-chart";

const data = [
  { label: "Sep 1", value: 1210, previous: 1080 },
  { label: "Sep 2", value: 1340, previous: 1150 },
  { label: "Sep 3", value: 1290, previous: 1190 },
];

export function Visitors() {
  return <AreaChart data={data} height={240} />;
}
```

## API reference

### AreaChart

A smooth monotone line with a gradient fill, a dashed comparison line and a hover crosshair.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label: string; value: number; previous?: number }[]` | – | Points in order. |
| height | `number` | `260` | Height in px; width fills the container. |
| showPrevious | `boolean` | `true` | Draw the dashed comparison line. |
| yTicks / xTicks | `number` | `3 / 5` | How many axis labels to show. |
| formatValue | `(n: number) => string` | – | Tooltip number format. |

## Accessibility

- Summarize the trend in nearby text; the chart is visual support.
- The tooltip shows both values with line samples, not just colors.

## Motion

- Rises from the baseline on mount, then morphs between datasets.
- Datasets of different lengths are resampled so the line reshapes instead of redrawing.
- The y-axis scale eases with the data.

## Responsive behavior

- Measures its own width with ResizeObserver; tooltips clamp inside the chart.

## Performance

- Monotone cubic paths are recomputed per frame only during the 700ms morph.
- Comfortable up to a few hundred points; aggregate beyond that.

## Notes for AI

- Labels are shown as-is; pre-format dates.
- Set showPrevious={false} when you have no comparison data.

## Related

- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Stacked area chart](https://lodeui.com/components/stacked-area-chart) — Stacked series above and below zero, morphing as the range changes.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.


---

# Switch

> A toggle whose thumb stretches as you press it.

Component · Free · https://lodeui.com/components/switch

## When to use

- Settings that take effect immediately, like enabling notifications.

## When not to use

- Choices that apply on Save: use a checkbox.
- More than two states: use a segmented control or select.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Switch } from "@/components/ui/switch";

export function DigestSetting() {
  const [on, setOn] = React.useState(true);
  return (
    <label className="flex items-center justify-between gap-4">
      <span>Weekly digest</span>
      <Switch checked={on} onCheckedChange={setOn} aria-label="Weekly digest" />
    </label>
  );
}
```

## API reference

### Switch

A toggle button whose thumb stretches while pressed.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked | `boolean` | – | Controlled or uncontrolled state. |
| onCheckedChange | `(checked: boolean) => void` | – | Called on toggle. |
| size | `"sm" \| "md"` | `"md"` | 36×20 or 46×26 px. |
| disabled | `boolean` | – | Dims and blocks interaction. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Space / Enter | Toggle |

## Accessibility

- Native button with role="switch" and aria-checked.
- Pair with visible text or an aria-label.

## Motion

- The thumb widens 6px toward its destination while pressed, then springs across (stiffness 600).

## Responsive behavior

- Fixed size; aligns to the baseline of a row of text.

## Performance

- One animated element.

## Notes for AI

- Don't use for form fields that submit later; use Checkbox.

## Related

- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.


---

# Slider

> Drag, click or use the keys. The value rides above the thumb while you drag.

Component · Free · https://lodeui.com/components/slider

## When to use

- Picking a value from a continuous range where approximate is fine: volume, budget, rollout percentage.

## When not to use

- Exact values: use a number field or input.
- Small counts like seats: use a number field.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/slider.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Slider } from "@/components/ui/slider";

export function Budget() {
  const [budget, setBudget] = React.useState(4500);
  return <Slider aria-label="Budget" value={budget} onValueChange={setBudget} min={500} max={10000} step={250} format={(n) => `$${n}`} />;
}
```

## API reference

### Slider

Drag the thumb or click the track. A value bubble rides above the thumb while dragging.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue | `number` | `50` | Controlled or uncontrolled value. |
| onValueChange | `(n: number) => void` | – | Called while dragging. |
| onValueCommit | `(n: number) => void` | – | Called once when the drag ends or a key is released. |
| min / max / step | `number` | `0 / 100 / 1` | Range and snapping. |
| format | `(n: number) => string` | – | Shows the bubble and sets aria-valuetext. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / ↓ | Decrease by step |
| → / ↑ | Increase by step |
| Page Up / Page Down | Change by 10% of the range |
| Home / End | Min or max |

## Accessibility

- The thumb is role="slider" with min, max, now and valuetext.
- Use onValueCommit for expensive work so screen-reader users don't trigger it on every step.

## Motion

- The thumb grows on hover (1.08) and press (1.2).
- The bubble pops in above the thumb while dragging.

## Responsive behavior

- Fills its container width; touch dragging uses pointer capture.

## Performance

- Only the fill width and thumb position change while dragging.

## Notes for AI

- Save to the server in onValueCommit, not onValueChange.

## Related

- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.


---

# Dropdown menu

> Actions, checkboxes and radio options in a springy menu with full keyboard support.

Component · Free · https://lodeui.com/components/dropdown-menu

## When to use

- A list of actions on an object: rename, duplicate, delete.
- View options with radio or checkbox items, like Sort by.

## When not to use

- Setting a form value: use a select.
- Navigation: use links or a navigation menu.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/dropdown-menu.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { MoreHorizontal } from "lucide-react";
import { DropdownMenu } from "@/components/ui/dropdown-menu";

export function RowMenu({ onDelete }: { onDelete: () => void }) {
  return (
    <DropdownMenu
      align="end"
      trigger={<button type="button" aria-label="More actions"><MoreHorizontal /></button>}
      items={[
        { id: "rename", label: "Rename", shortcut: "R" },
        { type: "separator", id: "s" },
        { id: "delete", label: "Delete", destructive: true, onSelect: onDelete },
      ]}
    />
  );
}
```

## API reference

### DropdownMenu

A trigger and a menu of items, radio items, checkbox items, labels and separators.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `MenuEntry[]` | – | { id, label, icon?, shortcut?, destructive?, disabled?, onSelect? } or radio/checkbox items with checked, or label/separator. |
| label | `ReactNode` | – | Text for the default trigger button. |
| trigger | `ReactElement` | – | Your own trigger; ARIA and handlers are added to it. |
| align | `"start" \| "end"` | `"start"` | Menu alignment. |
| closeOnSelect | `boolean` | `true` | Set false to keep it open while toggling checkbox items. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space / ↓ | Open and focus the first item |
| ↑ / ↓ | Move between items |
| Home / End | First or last item |
| Enter / Space | Select |
| Esc | Close and return focus |
| Tab | Close |

## Accessibility

- role="menu" with menuitem, menuitemradio and menuitemcheckbox.
- The trigger has aria-haspopup and aria-expanded.
- Disabled items are skipped by the keyboard.

## Motion

- Scales in from its anchor corner; the highlight glides between items.

## Responsive behavior

- At least 192px wide; aligns to the trigger edge.

## Performance

- Items render only while open.

## Notes for AI

- Ids must be unique.
- Use destructive for irreversible actions and confirm them in a dialog.

## Related

- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Command palette](https://lodeui.com/components/command-palette) — Type to filter, arrow to move, Enter to run. Inline or as a ⌘K dialog.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.


---

# Action button

> A button that morphs through saving, saved and failed, right where you clicked.

Component · Free · https://lodeui.com/components/action-button

## When to use

- Save, publish, retry or pay actions where people should see the outcome where they clicked.

## When not to use

- Actions that navigate away immediately.
- Long jobs (over ~10s): show progress elsewhere.

## Installation

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

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ActionButton } from "@/components/ui/action-button";

export function Publish({ publish }: { publish: () => Promise<void> }) {
  return (
    <ActionButton onAction={publish} pendingLabel="Publishing" successLabel="Published" errorLabel="Try again">
      Publish
    </ActionButton>
  );
}
```

## API reference

### ActionButton

Runs a promise and morphs through pending, success and error, then returns to idle.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onAction | `() => Promise<unknown>` | – | Resolve for success, throw or reject for error. |
| children | `ReactNode` | – | Idle label. |
| pendingLabel / successLabel / errorLabel | `ReactNode` | `"Saving" / "Saved" / "Try again"` | Labels for each state. |
| resetAfter | `number` | `1800` | ms before returning to idle. |
| variant | `"primary" \| "secondary"` | `"primary"` | Visual weight. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Run the action |

## Accessibility

- aria-busy while pending and aria-live so state changes are announced.
- Clicks are ignored while pending, so actions never double-fire.

## Motion

- Width springs to fit each label; labels swap with a short blur and slide (300ms).
- Presses scale to 97%.

## Responsive behavior

- Width follows the label; add w-full on phones.

## Performance

- One timer per button, cleared on unmount.

## Notes for AI

- Throw from onAction to show the error state; don't catch silently.

## Related

- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.


---

# Number ticker

> Every digit rolls on its own wheel, odometer style.

Component · Free · https://lodeui.com/components/number-ticker

## When to use

- KPIs and counters where digits rolling makes the change legible, like live visitors or prices.

## When not to use

- Values that change many times a second.
- Very long numbers in tight spaces.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/number-ticker.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { NumberTicker } from "@/components/ui/number-ticker";

export function Mrr({ value }: { value: number }) {
  return <NumberTicker value={value} format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} className="text-3xl font-semibold" />;
}
```

## API reference

### NumberTicker

Formats with Intl.NumberFormat and gives each digit its own rolling column.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number` | – | The number to show. |
| format | `Intl.NumberFormatOptions` | – | Currency, percent, decimals, compact notation. |
| locale | `string` | `"en-US"` | Formatting locale. |

## Accessibility

- The formatted value is in a visually hidden span; the digit wheels are aria-hidden.

## Motion

- Each digit springs to its new position (stiffness 140, damping 20).
- Columns are keyed from the right, so growing from 999 to 1,000 doesn't shuffle digits.

## Responsive behavior

- Inline text; inherits size from its parent.

## Performance

- Ten spans per digit; fine for dashboards with dozens of tickers.

## Notes for AI

- Pass rounded values; decimals are shown as formatted.

## Related

- [Animated number](https://lodeui.com/components/animated-number) — A number that springs to its new value instead of jumping.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.


---

# Tabs

> Underline or pill tabs with an indicator that glides between them.

Component · Free · https://lodeui.com/components/tabs

## When to use

- Switching between sections of the same page or panel.

## When not to use

- Setting a value in a form: use a segmented control.
- Site navigation: use links.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Tabs } from "@/components/ui/tabs";

export function ProjectTabs() {
  const [tab, setTab] = React.useState("overview");
  return (
    <>
      <Tabs aria-label="Project" value={tab} onValueChange={setTab} items={[{ value: "overview", label: "Overview" }, { value: "activity", label: "Activity" }]} />
      {tab === "overview" ? <p>Overview</p> : <p>Activity</p>}
    </>
  );
}
```

## API reference

### Tabs

A tablist with an animated indicator. You render the panel for the active value.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `readonly { value: T; label: ReactNode; disabled?: boolean }[]` | – | The tabs. |
| value / defaultValue / onValueChange | `T` | – | Controlled or uncontrolled. |
| variant | `"underline" \| "pill"` | `"underline"` | Indicator style. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Move and select |
| Home / End | First or last tab |

## Accessibility

- role="tablist" with role="tab", aria-selected and roving tabindex.
- Disabled tabs are skipped.

## Motion

- The indicator springs between tabs (bounce 0.15, 400ms).

## Responsive behavior

- Wrap in overflow-x-auto for many tabs on phones.

## Performance

- One animated element.

## Notes for AI

- Give the panel role="tabpanel" if it's a distinct region.

## Related

- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.


---

# Tooltip

> A small label on hover or focus, with a delay that respects intent.

Component · Free · https://lodeui.com/components/tooltip

## When to use

- Naming icon-only buttons and showing their shortcuts.

## When not to use

- Essential information: put it in the UI.
- Interactive content: use a popover.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Bold } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export function BoldButton() {
  return (
    <Tooltip content="Bold ⌘B">
      <Button size="icon" variant="ghost" aria-label="Bold"><Bold /></Button>
    </Tooltip>
  );
}
```

## API reference

### Tooltip

Wraps one element; shows on hover after a delay and immediately on keyboard focus.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | `ReactNode` | – | Tooltip text. |
| children | `ReactElement` | – | The trigger; handlers and aria-describedby are added to it. |
| side | `"top" \| "bottom"` | `"top"` | Placement. |
| delay | `number` | `350` | Hover delay in ms. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focus shows the tooltip |
| Esc | Hide it |

## Accessibility

- role="tooltip" linked to the trigger with aria-describedby.
- The trigger still needs its own aria-label; the tooltip describes, it doesn't name.

## Motion

- Scales in from the side it points to (stiffness 600).

## Responsive behavior

- Touch devices don't hover, so don't hide anything important in a tooltip.

## Performance

- Rendered only while open.

## Notes for AI

- Never wrap disabled buttons; they don't fire pointer events.

## Related

- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.


---

# Checkbox

> A checkbox whose tick draws itself, with an indeterminate state.

Component · Free · https://lodeui.com/components/checkbox

## When to use

- Independent on/off choices in a form that apply on submit.
- Selecting rows, with an indeterminate 'select all'.

## When not to use

- Settings that apply instantly: use a switch.
- One choice from several: use a radio group.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";

export function Terms() {
  const [ok, setOk] = React.useState(false);
  return (
    <label className="flex items-center gap-2 text-sm">
      <Checkbox checked={ok} onCheckedChange={setOk} aria-label="Accept terms" /> I accept the terms
    </label>
  );
}
```

## API reference

### Checkbox

A checkbox whose tick draws itself, with a mixed state.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked | `boolean \| "indeterminate"` | – | Controlled state; indeterminate shows a dash. |
| onCheckedChange | `(checked: boolean) => void` | – | Called on toggle. |
| disabled | `boolean` | – | Dims and blocks interaction. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Space | Toggle |

## Accessibility

- role="checkbox" with aria-checked true, false or mixed.

## Motion

- The check path draws in with pathLength (220ms).

## Responsive behavior

- 18px square; place it in a label for a larger tap target.

## Performance

- One SVG path.

## Notes for AI

- Wrap in <label> so clicking the text toggles it.

## Related

- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.
- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.


---

# Progress

> Linear bar, ring and segmented meter, all spring-driven.

Component · Free · https://lodeui.com/components/progress

## When to use

- Showing how much of a task, quota or upload is done.

## When not to use

- Unknown duration: use a spinner or skeleton.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Meter, Progress, ProgressRing } from "@/components/ui/progress";

export function Quota() {
  return (
    <div className="space-y-3">
      <Progress value={812} max={1000} warnAt={0.8} aria-label="API calls" />
      <ProgressRing value={64} aria-label="Storage">64%</ProgressRing>
      <Meter value={3} segments={5} aria-label="Password strength" />
    </div>
  );
}
```

## API reference

### Progress

A linear bar.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / max | `number` | `— / 100` | Amount done. |
| warnAt | `number` | – | Fraction (0–1) where the bar turns destructive. |

### ProgressRing

A circular indicator with optional center content.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / max | `number` | – | Amount done. |
| size / thickness | `number` | `56 / 5` | Dimensions in px. |

### Meter

Segmented meter for discrete levels like password strength.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `number` | – | Filled segments. |
| segments | `number` | `5` | Total segments. |

## Accessibility

- role="progressbar" or role="meter" with min, max and now.
- Pass aria-label so the measure is named.

## Motion

- Springs to each new value; meter segments fill in sequence.

## Responsive behavior

- Linear bars fill their container; rings are fixed size.

## Performance

- Transform and width animations only.

## Notes for AI

- Use warnAt for quotas so 'near limit' is visible.

## Related

- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.
- [Skeleton](https://lodeui.com/components/skeleton) — Shimmering placeholders for loading content.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.


---

# Toast

> Stacked notifications that fan out on hover, swipe to dismiss, and track promises.

Component · Free · https://lodeui.com/components/toast

## When to use

- Brief confirmation after an action: saved, sent, copied.
- Async results with toast.promise.

## When not to use

- Errors that block progress: show them inline.
- Anything people must act on later: use a notification center.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/toast.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/layout.tsx: render once
import { Toaster } from "@/components/ui/toast";
// <body>{children}<Toaster /></body>

// anywhere
import { toast } from "@/components/ui/toast";

toast.success("Invite sent");
toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Couldn't save" });
```

## API reference

### Toaster

Renders the stack. Place once near the root.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| position | `"bottom-right" \| "bottom-center" \| "top-center"` | `"bottom-right"` | Where toasts appear. |

### toast

Shows a toast from anywhere. Returns its id.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| toast(title, opts?) | `function` | – | Neutral toast. Also toast.success, toast.error and toast.promise. |
| opts | `{ description?, duration?, action?: { label, onClick } }` | – | Body text, timeout (ms) and an action button. |

### dismiss

Removes a toast by id.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| id | `number` | – | Returned by toast(). |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the action and close buttons |

## Accessibility

- Each toast is role="status" with aria-live="polite".
- Timers pause while hovered so people can read and act.

## Motion

- Toasts stack with scale offsets and fan out on hover.
- Drag sideways more than 80px to dismiss.

## Responsive behavior

- Width is min(352px, 100vw − 32px).

## Performance

- A tiny module store; at most six toasts kept.

## Notes for AI

- Render <Toaster /> once in the root layout, not per page.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.


---

# Dialog

> A modal or side sheet with focus trap, scroll lock and focus return.

Component · Free · https://lodeui.com/components/dialog

## When to use

- Confirming destructive actions, short forms, and focused tasks.
- Side sheets for editing a record without leaving the list.

## When not to use

- Long flows: use a page.
- Non-blocking info: use a popover or toast.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/dialog.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";

export function DeleteProject({ onDelete }: { onDelete: () => void }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>Delete</Button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        title="Delete project?"
        description="This can't be undone."
        footer={<><Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button><Button variant="destructive" onClick={onDelete}>Delete</Button></>}
      />
    </>
  );
}
```

## API reference

### Dialog

A modal or sheet rendered in a portal, with focus trap, scroll lock and focus return.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open / onOpenChange | `boolean / (open: boolean) => void` | – | Controlled visibility. |
| title / description | `ReactNode` | – | Linked to the dialog for screen readers. |
| children / footer | `ReactNode` | – | Body and action row. |
| side | `"center" \| "right" \| "bottom"` | `"center"` | Modal, right sheet or bottom sheet. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Esc | Close |
| Tab / Shift+Tab | Cycle focus inside the dialog |

## Accessibility

- aria-modal with aria-labelledby and aria-describedby.
- Focus moves to the first control on open and returns to the trigger on close.

## Motion

- The modal scales up from 96%; sheets slide from their edge.

## Responsive behavior

- The modal is full width minus 32px on phones; use side="bottom" for phone-friendly sheets.

## Performance

- Nothing renders while closed.

## Notes for AI

- Put the destructive button last in the footer.

## Related

- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.


---

# Accordion

> Expandable sections with smooth height and a turning plus.

Component · Free · https://lodeui.com/components/accordion

## When to use

- FAQs and long settings pages where people scan headings first.

## When not to use

- Content everyone needs: show it.
- Switching views: use tabs.

## Installation

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

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Accordion } from "@/components/ui/accordion";

export function Faq() {
  return <Accordion items={[{ value: "refunds", title: "Can I get a refund?", content: "Yes, within 14 days." }]} />;
}
```

## API reference

### Accordion

Expandable sections.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ value; title; content }[]` | – | Sections. |
| type | `"single" \| "multiple"` | `"single"` | Whether opening one closes the others. |
| defaultValue | `string[]` | – | Open on first render. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Toggle the focused section |
| Tab | Move between headers |

## Accessibility

- Headers are buttons with aria-expanded controlling labelled regions.

## Motion

- Height animates to auto; the plus rotates into a cross.

## Responsive behavior

- Full width; titles wrap.

## Performance

- Closed panels are unmounted.

## Notes for AI

- Values must be unique.

## Related

- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.


---

# OTP input

> One-time code boxes that handle paste and autofill, and shake on a wrong code.

Component · Free · https://lodeui.com/components/otp-input

## When to use

- Email or SMS verification codes and 2FA.

## When not to use

- Passwords or anything longer than ~8 characters.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { OtpInput } from "@/components/ui/otp-input";

export function Verify({ onCode, error }: { onCode: (code: string) => void; error: boolean }) {
  return <OtpInput onComplete={onCode} error={error} />;
}
```

## API reference

### OtpInput

Code boxes backed by one real input, so paste and SMS autofill work.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| length | `number` | `6` | Number of boxes. |
| value / onValueChange | `string` | – | Controlled value; non-digits are stripped. |
| onComplete | `(code) => void` | – | Called when every box is filled. |
| error | `boolean` | – | Shakes and marks invalid. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| 0–9 | Type a digit |
| Backspace | Delete |
| ⌘V / Ctrl+V | Paste a whole code |

## Accessibility

- One input with inputMode="numeric" and autocomplete="one-time-code".
- aria-invalid on error.

## Motion

- The row shakes on error (400ms).

## Responsive behavior

- Boxes are 40px; six fit at 320px.

## Performance

- No timers.

## Notes for AI

- Change the key to reset after an error.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.


---

# Avatar group

> Overlapping avatars that spread apart on hover.

Component · Free · https://lodeui.com/components/avatar-group

## When to use

- Showing who is on a team, document or thread.

## When not to use

- A full member list: use a table.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/avatar-group.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AvatarGroup } from "@/components/ui/avatar-group";

export function Viewers() {
  return <AvatarGroup people={[{ name: "Ada Lovelace" }, { name: "Grace Hopper" }, { name: "Alan Turing" }]} max={4} />;
}
```

## API reference

### AvatarGroup

Overlapping avatars with a +N chip.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| people | `{ name; src?; hue? }[]` | – | People to show. |
| max | `number` | `4` | Shown before +N. |
| size | `number` | `32` | Diameter in px. |

### Avatar

One avatar: image or initials on a hue generated from the name.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name / src / hue / size | `string / string / number / number` | – | Identity and size. |

## Accessibility

- Initials avatars include the full name for screen readers; images use the name as alt.

## Motion

- Overlap springs open on hover.

## Responsive behavior

- Fixed size; reduce max on phones.

## Performance

- Images load lazily by browser default.

## Notes for AI

- Pass hue to keep a person's color stable.

## Related

- [Profile card](https://lodeui.com/components/profile-card) — A portrait whose details rise into a glass panel on hover.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.


---

# Sparkline

> A tiny trend line that draws itself in.

Component · Free · https://lodeui.com/components/sparkline

## When to use

- A tiny trend next to a number in a table or KPI card.

## When not to use

- When people need to read values: use an area or line chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/sparkline.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Sparkline } from "@/components/ui/sparkline";

export function Trend() {
  return <Sparkline data={[3, 5, 4, 7, 9]} width={96} height={28} />;
}
```

## API reference

### Sparkline

An SVG line with optional area fill.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `number[]` | – | Values in order. |
| width / height | `number` | `96 / 28` | Size in px. |
| color | `string` | – | Defaults to green when the line ends higher than it starts, red otherwise. |
| area | `boolean` | `true` | Gradient fill. |

## Accessibility

- Decorative (aria-hidden): put the value and change in text next to it.

## Motion

- The line draws in on mount (900ms).

## Responsive behavior

- Fixed size.

## Performance

- One path; cheap enough for hundreds per page.

## Notes for AI

- Use color='var(--destructive)' for metrics where up is bad.

## Related

- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.


---

# Bar chart

> Bars that grow in and morph between datasets, with a hover readout.

Component · Pro · https://lodeui.com/components/bar-chart

## When to use

- Comparing one measure across categories or periods.

## When not to use

- Trends over many points: use a line or area chart.

## Installation

```bash
npx shadcn@latest add @lode/bar-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { BarChart } from "@/components/ui/bar-chart";

export function Orders() {
  return <BarChart data={[{ label: "Mon", value: 420 }, { label: "Tue", value: 512 }]} height={220} />;
}
```

## API reference

### BarChart

Vertical bars with a y-axis and hover readout.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label; value; color? }[]` | – | Bars in order. |
| height | `number` | `240` | Height in px. |
| yTicks | `number` | `3` | Axis labels. |
| formatValue / color | `(n) => string / string` | – | Tooltip format and default bar color. |

## Accessibility

- role="img"; summarize the key comparison in text.

## Motion

- Bars grow from the baseline with a small stagger and morph between datasets.

## Responsive behavior

- Measures its width; labels thin out above 12 bars.

## Performance

- One rect per bar.

## Notes for AI

- Keep labels short; they sit under each bar.

## Related

- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Funnel chart](https://lodeui.com/components/funnel-chart) — Conversion funnel with overall and step-to-step rates.
- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.


---

# Candlestick chart

> OHLC candles with volume, moving averages and a price crosshair.

Component · Pro · https://lodeui.com/components/candlestick-chart

## When to use

- Price history for stocks, crypto or any open/high/low/close data.

## When not to use

- Single-value series: use a line chart.

## Installation

```bash
npx shadcn@latest add @lode/candlestick-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { CandlestickChart, type Candle } from "@/components/ui/candlestick-chart";

export function Price({ candles }: { candles: Candle[] }) {
  return <CandlestickChart data={candles} averages={[{ period: 20, color: "var(--chart-1)" }]} />;
}
```

## API reference

### CandlestickChart

Candles, volume bars, moving averages and a crosshair with a price tag.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label; open; high; low; close; volume? }[]` | – | Candles in time order. |
| averages | `{ period; color }[]` | – | Simple moving averages. |
| showVolume | `boolean` | `true` | Volume bars at the bottom. |
| height / formatPrice | `number / (n) => string` | – | Size and price format. |

## Accessibility

- role="img"; the OHLC readout shows the hovered or latest candle as text.

## Motion

- Crosshair and price tag follow the pointer.

## Responsive behavior

- Fills its width; candle width scales with count.

## Performance

- Up to a few hundred candles; aggregate longer ranges.

## Notes for AI

- Up candles are green, down red; keep that convention.

## Related

- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.


---

# Heatmap

> A color-scaled grid with row and column tracking, for cohorts and schedules.

Component · Pro · https://lodeui.com/components/heatmap

## When to use

- Cohort retention, activity by hour and day, any grid of magnitudes.

## When not to use

- A single row: use a bar chart.

## Installation

```bash
npx shadcn@latest add @lode/heatmap
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Heatmap } from "@/components/ui/heatmap";

export function Retention({ rows }: { rows: { label: string; values: (number | null)[] }[] }) {
  return <Heatmap rows={rows} columns={["M0", "M1", "M2"]} max={100} />;
}
```

## API reference

### Heatmap

A table of color-scaled cells.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rows | `{ label; values: (number\|null)[]; meta? }[]` | – | null leaves a cell empty. |
| columns | `string[]` | – | Column headers. |
| max / format / color | `number / (n) => string / string` | – | Scale top, cell text and color. |
| metaLabel | `string` | – | Header for the meta column, e.g. cohort size. |

## Accessibility

- A real <table>; each cell's value is printed, so color isn't the only signal.

## Motion

- Cells pop in along the diagonal; hover highlights the row and column.

## Responsive behavior

- Scrolls horizontally inside its container on narrow screens.

## Performance

- One cell per value; fine up to a few hundred cells.

## Notes for AI

- Use null, not 0, for periods that haven't happened yet.

## Related

- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Stacked area chart](https://lodeui.com/components/stacked-area-chart) — Stacked series above and below zero, morphing as the range changes.


---

# Stacked area chart

> Stacked series above and below zero, morphing as the range changes.

Component · Pro · https://lodeui.com/components/stacked-area-chart

## When to use

- Components of a total over time, with losses below zero (new, expansion, churn).

## When not to use

- Independent series: use a line chart.

## Installation

```bash
npx shadcn@latest add @lode/stacked-area-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { StackedAreaChart } from "@/components/ui/stacked-area-chart";

export function Mrr({ months, newMrr, churn }: { months: string[]; newMrr: number[]; churn: number[] }) {
  return (
    <StackedAreaChart
      labels={months}
      series={[
        { key: "new", label: "New", color: "var(--chart-1)", values: newMrr },
        { key: "churn", label: "Churn", color: "#ef4444", values: churn, negative: true },
      ]}
    />
  );
}
```

## API reference

### StackedAreaChart

Stacked bands above and below zero with a tooltip showing each series and the net.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| labels | `string[]` | – | X-axis labels. |
| series | `{ key; label; color; values; negative? }[]` | – | negative draws below zero. |
| height / formatValue | `number / (n) => string` | – | Size and number format. |
| showTotal | `boolean` | `true` | Net row in the tooltip. |

## Accessibility

- role="img"; the tooltip lists every series as text.

## Motion

- Morphs when the range changes, even when the number of points changes.

## Responsive behavior

- Measures its width; labels thin out to about seven.

## Performance

- Paths recomputed per frame only during the 600ms morph.

## Notes for AI

- Values for negative series are positive numbers; the chart flips them.

## Related

- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.


---

# Folder stack

> A folder that fans its files out on hover and opens them in a lightbox.

Component · Pro · https://lodeui.com/components/folder-stack

## When to use

- Collections of images or files where the cover matters: moodboards, galleries, attachments.

## When not to use

- Long file lists: use a table or grid.

## Installation

```bash
npx shadcn@latest add @lode/folder-stack
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FolderStack } from "@/components/ui/folder-stack";

export function Moodboard() {
  return <FolderStack name="Moodboard" files={[{ name: "linen.jpg", src: "/linen.jpg" }, { name: "dusk.jpg", src: "/dusk.jpg" }]} />;
}
```

## API reference

### FolderStack

A folder that fans out its first five files and opens any of them in a lightbox.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | `string` | – | Folder label. |
| files | `{ name; src?; colors? }[]` | – | Image URL, or two colors for a generated cover. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focus a file (the folder opens) |
| Enter | Open in the lightbox |
| ← / → | Previous or next in the lightbox |
| Esc | Close |

## Accessibility

- Files are labelled buttons; the lightbox is aria-modal.

## Motion

- Files fan into an arc on hover or focus; the clicked file morphs into the lightbox.

## Responsive behavior

- 224px wide; the lightbox scales to 80vw on phones.

## Performance

- Only five files are drawn in the fan.

## Notes for AI

- Provide src for real images; colors are a placeholder.

## Related

- [Profile card](https://lodeui.com/components/profile-card) — A portrait whose details rise into a glass panel on hover.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.


---

# Profile card

> A portrait whose details rise into a glass panel on hover.

Component · Pro · https://lodeui.com/components/profile-card

## When to use

- Showcasing a person: mentors, speakers, team pages.

## When not to use

- Dense member lists: use a table or avatar group.

## Installation

```bash
npx shadcn@latest add @lode/profile-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProfileCard } from "@/components/ui/profile-card";

export function Mentor() {
  return <ProfileCard name="Jasmine Brooks" role="Design lead" bio="Leads design systems at Meridian." stats={[{ label: "Sessions", value: "128" }]} />;
}
```

## API reference

### ProfileCard

A portrait card whose details rise into a glass panel on hover or focus.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name / role / bio | `string` | – | Identity. |
| stats | `{ label; value }[]` | – | Up to three figures. |
| rating | `number` | – | Optional star score. |
| src / hue | `string / number` | – | Portrait image, or a generated portrait. |
| primaryAction / secondaryAction | `string` | `"Follow" / "Book a session"` | Button labels. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focusing the card reveals the details |

## Accessibility

- The card is focusable so keyboard users get the same reveal.

## Motion

- The panel grows with layout animation; the card lifts 4px on hover.

## Responsive behavior

- 288px wide.

## Performance

- Portrait is a plain <img>; use an optimized source.

## Notes for AI

- Wire primaryAction to your follow API.

## Related

- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.
- [Folder stack](https://lodeui.com/components/folder-stack) — A folder that fans its files out on hover and opens them in a lightbox.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.


---

# Input

> Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.

Component · Free · https://lodeui.com/components/input

## When to use

- Single-line text, email, URL, numbers with units and search fields.
- Fields that need an icon, unit, clear button or show/hide password toggle inside.

## When not to use

- Multi-line text: use a textarea.
- Choosing from known values: use a select or combobox.
- Small counts: use a number field.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/input.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { Field, Input, PasswordInput, SearchInput } from "@/components/ui/input";

export function SignUpFields({ emailError }: { emailError?: string }) {
  return (
    <div className="space-y-4">
      <Field label="Work email" htmlFor="email" error={emailError} required>
        <Input id="email" type="email" autoComplete="email" invalid={!!emailError} />
      </Field>
      <Field label="Password" htmlFor="password" description="At least 12 characters.">
        <PasswordInput id="password" autoComplete="new-password" />
      </Field>
      <SearchInput placeholder="Search projects" aria-label="Search projects" />
    </div>
  );
}
```

## API reference

### Input

A styled text input with slots inside the border. All native input attributes pass through, and the ref reaches the <input>.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| leading / trailing | `ReactNode` | – | Icon, prefix, unit or action shown inside the field. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Field height. |
| invalid | `boolean` | – | Red border and aria-invalid. |
| clearable | `boolean` | – | Shows a clear button when there's a value. Needs value and onValueChange. |
| onValueChange | `(value: string) => void` | – | Called with the new string; onChange still works too. |

### SearchInput

An Input with a search icon. Takes every Input prop except leading and type.

No props.

### PasswordInput

An Input with a show/hide toggle. The toggle uses aria-pressed.

No props.

### Field

Label, description and error wrapper that links them to the control with aria-describedby.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | – | Visible label. |
| htmlFor | `string` | – | The id of the control. |
| description / error | `ReactNode` | – | Help text and an error, announced with role="alert". |
| required | `boolean` | – | Adds a required marker. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move into and out of the field |
| Esc | Native clear in search fields |

## Accessibility

- Always label the field: Field, a <label>, or aria-label.
- Errors are linked with aria-describedby and announced with role="alert".
- The password toggle is a labelled button with aria-pressed.

## Motion

- Border and ring colors transition on focus (150ms).

## Responsive behavior

- Fills its container width.
- Use type, inputMode and autoComplete so phones show the right keyboard.

## Performance

- Plain input; no extra renders unless clearable is used.

## Notes for AI

- Use Field for labelled form controls instead of hand-writing label markup.
- Set autoComplete on auth fields.

## Related

- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.
- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.


---

# Textarea

> A textarea that grows with its content, with an optional character counter.

Component · Free · https://lodeui.com/components/textarea

## When to use

- Comments, descriptions and messages that span more than one line.

## When not to use

- Chat composers with attachments: use the prompt input.
- Single-line values: use an input.

## Installation

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

## Usage

```tsx title="example.tsx"
import { Textarea } from "@/components/ui/textarea";

export function Feedback() {
  return <Textarea aria-label="Feedback" placeholder="What could be better?" maxLength={500} showCount maxRows={8} />;
}
```

## API reference

### Textarea

A textarea that grows with its content up to a limit, with an optional character counter.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rows | `number` | `3` | Starting height. |
| maxRows | `number` | `10` | Stops growing here and scrolls. |
| showCount | `boolean` | – | Shows used / maxLength. |
| invalid | `boolean` | – | Red border and aria-invalid. |
| ...props | `TextareaHTMLAttributes` | – | value, onChange, maxLength and the rest. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | New line |
| Tab | Leave the field |

## Accessibility

- Label it with Field, a <label> or aria-label.
- The counter is plain text next to the field.

## Motion

- Height changes instantly as you type, so the caret never lags.

## Responsive behavior

- Fills its container width.

## Performance

- Resizes by measuring scrollHeight on input only.

## Notes for AI

- Use maxLength with showCount rather than validating length afterwards.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.


---

# Badge

> Tone badges and status dots for states like paid, pending, live and degraded.

Component · Free · https://lodeui.com/components/badge

## When to use

- Short status or category labels: Paid, Draft, Beta.
- Service health with a live dot (StatusBadge).

## When not to use

- Clickable filters: use buttons or a segmented control.
- Long text: use an alert or plain text.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/badge.json
```

## Usage

```tsx title="example.tsx"
import { Badge, StatusBadge } from "@/components/ui/badge";

export function InvoiceStatus() {
  return (
    <div className="flex gap-2">
      <Badge tone="success">Paid</Badge>
      <StatusBadge status="online" live>Operational</StatusBadge>
    </div>
  );
}
```

## API reference

### Badge

A small label. Accepts any span attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tone | `"default" \| "outline" \| "success" \| "warning" \| "danger" \| "info" \| "solid"` | `"default"` | Color. |
| size | `"sm" \| "md"` | `"sm"` | Text and padding size. |

### StatusBadge

A badge with a colored dot for system states.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| status | `"online" \| "degraded" \| "offline" \| "pending" \| "info"` | – | Sets the dot color. |
| live | `boolean` | – | Pulses the dot. |

## Accessibility

- The text carries the meaning; the color and dot only support it.
- Tones keep text contrast at AA on both themes.

## Motion

- Only the live dot pulses.

## Responsive behavior

- Inline; never wraps.

## Performance

- Static markup.

## Notes for AI

- Write the status as text ("Failed"), don't rely on tone alone.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Uptime bar](https://lodeui.com/components/uptime-bar) — Daily status bars with uptime percentage and incident tooltips.


---

# Alert

> Inline alerts and page banners in four tones, with actions and dismiss.

Component · Free · https://lodeui.com/components/alert

## When to use

- Messages about a page or section: trial ending, failed payment, maintenance.
- Full-width banners at the top of an app.

## When not to use

- Short-lived confirmations: use a toast.
- Field errors: use Field's error.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/alert.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export function PaymentFailed() {
  return (
    <Alert tone="danger" title="Your last payment failed" action={<Button size="sm">Update card</Button>} dismissible>
      We'll retry in 3 days. Update your card to avoid interruption.
    </Alert>
  );
}
```

## API reference

### Alert

An icon, title, body and optional action, inline or as a banner.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tone | `"info" \| "success" \| "warning" \| "danger" \| "neutral"` | `"info"` | Color and icon. |
| title | `ReactNode` | – | One-line summary. |
| children | `ReactNode` | – | Details. |
| action | `ReactNode` | – | A button or link. |
| dismissible / onDismiss | `boolean / () => void` | – | Close button; the alert animates out. |
| variant | `"inline" \| "banner"` | `"inline"` | Card or full-width strip. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the action and close button |

## Accessibility

- The icon is decorative; the title states the message.
- The close button is labelled.

## Motion

- Dismissing collapses the height and fades out.

## Responsive behavior

- The action moves under the text on narrow screens.

## Performance

- Static until dismissed.

## Notes for AI

- Use tone="danger" only when something is broken or blocked.

## Related

- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.
- [Empty state](https://lodeui.com/components/empty-state) — Empty, no-results, error, offline, maintenance and rate-limit states with one API.


---

# Skeleton

> Shimmering placeholders for loading content.

Component · Free · https://lodeui.com/components/skeleton

## When to use

- Loading states where you know the layout, so content doesn't jump in.

## When not to use

- Actions in progress: use a loading button.
- Unknown layout: use a spinner.

## Installation

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

## Usage

```tsx title="example.tsx"
import { Skeleton, SkeletonText } from "@/components/ui/skeleton";

export function CardLoading() {
  return (
    <div role="status" aria-label="Loading" className="space-y-3">
      <Skeleton className="h-40 w-full" />
      <SkeletonText lines={2} />
    </div>
  );
}
```

## API reference

### Skeleton

A shimmering block. Size it with classes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| className | `string` | – | Width, height and radius. |

### SkeletonText

Lines of text placeholder; the last one is shorter.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lines | `number` | `3` | Number of lines. |

## Accessibility

- Skeletons are aria-hidden. Put role="status" with a label on the wrapper.

## Motion

- A soft shimmer sweeps across.

## Responsive behavior

- Size with responsive classes to match the real content.

## Performance

- A CSS animation; no JavaScript.

## Notes for AI

- Match skeleton sizes to the final content to avoid layout shift.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Empty state](https://lodeui.com/components/empty-state) — Empty, no-results, error, offline, maintenance and rate-limit states with one API.


---

# Empty state

> Empty, no-results, error, offline, maintenance and rate-limit states with one API.

Component · Free · https://lodeui.com/components/empty-state

## When to use

- Empty lists, no search results, errors, offline, no access and maintenance.

## When not to use

- Loading: use a skeleton.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/empty-state.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { EmptyState } from "@/components/ui/empty-state";
import { Button } from "@/components/ui/button";

export function NoProjects() {
  return <EmptyState bordered title="No projects yet" description="Create one to start deploying." action={<Button>New project</Button>} />;
}
```

## API reference

### EmptyState

Icon, title, description and action, with presets for common cases.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"empty" \| "search" \| "error" \| "offline" \| "forbidden" \| "maintenance"` | `"empty"` | Sets a default icon and title. |
| icon / title / description / action | `ReactNode` | – | Override any part. |
| bordered | `boolean` | – | Dashed border for empty panels. |

## Accessibility

- The title is a heading-sized paragraph; the icon is decorative.

## Responsive behavior

- Centered with a narrow text column.

## Performance

- Static.

## Notes for AI

- Always give people a next step in action.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Skeleton](https://lodeui.com/components/skeleton) — Shimmering placeholders for loading content.


---

# Breadcrumb

> Hierarchy trail that collapses long paths and works with any router link.

Component · Free · https://lodeui.com/components/breadcrumb

## When to use

- Showing where a page sits in a hierarchy.

## When not to use

- Flat sites with one level.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/breadcrumb.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import Link from "next/link";
import { Breadcrumb } from "@/components/ui/breadcrumb";

export function Trail() {
  return <Breadcrumb linkAs={Link} items={[{ label: "Projects", href: "/projects" }, { label: "Atlas", href: "/projects/atlas" }, { label: "Settings" }]} />;
}
```

## API reference

### Breadcrumb

A nav of links; middle items collapse into an ellipsis menu when there are too many.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ label; href?; icon? }[]` | – | The last item is the current page. |
| maxItems | `number` | `5` | Collapse beyond this. |
| linkAs | `ElementType` | `"a"` | Your router's link, e.g. Next.js Link. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between links |

## Accessibility

- nav with aria-label="Breadcrumb"; the current page has aria-current="page".
- Separators are aria-hidden.

## Responsive behavior

- Lower maxItems on phones to keep it on one line.

## Performance

- Static links.

## Notes for AI

- Pass Next.js Link as linkAs for client navigation.

## Related

- [Pagination](https://lodeui.com/components/pagination) — Page numbers with ellipses and a gliding current-page indicator.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.


---

# Pagination

> Page numbers with ellipses and a gliding current-page indicator.

Component · Free · https://lodeui.com/components/pagination

## When to use

- Paging through tables and lists with a known number of pages.

## When not to use

- Feeds: use infinite scroll or Load more.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/pagination.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Pagination } from "@/components/ui/pagination";

export function Pages() {
  const [page, setPage] = React.useState(1);
  return <Pagination page={page} pageCount={24} onPageChange={setPage} />;
}
```

## API reference

### Pagination

Previous, next and page numbers with ellipses.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| page | `number` | – | Current page, 1-based. |
| pageCount | `number` | – | Total pages. |
| onPageChange | `(page: number) => void` | – | Called with the new page. |
| siblings | `number` | `1` | Pages shown each side of the current one. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between page buttons |
| Enter / Space | Go to the page |

## Accessibility

- nav with aria-label; the current page has aria-current="page".
- Previous and next are labelled.

## Motion

- The current-page highlight slides between numbers.

## Responsive behavior

- Use siblings={0} on phones.

## Performance

- Renders at most about nine buttons.

## Notes for AI

- Pages are 1-based.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.
- [Breadcrumb](https://lodeui.com/components/breadcrumb) — Hierarchy trail that collapses long paths and works with any router link.


---

# Stepper

> Horizontal or vertical steps with animated progress and back-navigation.

Component · Free · https://lodeui.com/components/stepper

## When to use

- Multi-step forms: checkout, onboarding, setup wizards.

## When not to use

- Tasks people can do in any order: use a checklist.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/stepper.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Stepper } from "@/components/ui/stepper";

export function Checkout({ step, setStep }: { step: number; setStep: (n: number) => void }) {
  return <Stepper current={step} onStepClick={setStep} steps={[{ title: "Cart" }, { title: "Shipping" }, { title: "Payment" }]} />;
}
```

## API reference

### Stepper

Numbered steps with done, current and upcoming states.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `{ title; description? }[]` | – | The steps. |
| current | `number` | – | Zero-based index of the current step. |
| orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Layout. |
| onStepClick | `(index: number) => void` | – | Lets people go back to finished steps. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between finished steps (when clickable) |
| Enter | Go back to that step |

## Accessibility

- An ordered list; the current step has aria-current="step".

## Motion

- Connectors fill and check marks pop as steps complete.

## Responsive behavior

- Use vertical on phones when titles are long.

## Performance

- Static apart from the connector fill.

## Notes for AI

- current is zero-based.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.


---

# Radio group

> Radios as a list or as choice cards, with arrow-key navigation.

Component · Free · https://lodeui.com/components/radio-group

## When to use

- One choice from a few options that need descriptions, like plans or shipping speed.

## When not to use

- Short labels: a segmented control is more compact.
- Long lists: use a select.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/radio-group.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { RadioGroup } from "@/components/ui/radio-group";

export function Shipping() {
  return (
    <RadioGroup
      aria-label="Shipping"
      variant="cards"
      defaultValue="standard"
      options={[
        { value: "standard", label: "Standard", description: "3–5 days · Free" },
        { value: "express", label: "Express", description: "1–2 days · $12" },
      ]}
    />
  );
}
```

## API reference

### RadioGroup

Radios as a list or as choice cards.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `readonly { value: T; label; description?; disabled? }[]` | – | Choices. |
| value / defaultValue / onValueChange | `T` | – | Controlled or uncontrolled. |
| variant | `"list" \| "cards"` | `"list"` | Plain radios or bordered cards. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ / ← / → | Move and select |
| Tab | Enter or leave the group |

## Accessibility

- role="radiogroup" with role="radio" items and roving tabindex.
- Disabled options are skipped.

## Motion

- The dot scales in on select.

## Responsive behavior

- Cards stack; put them in a grid for wider screens.

## Performance

- Static markup.

## Notes for AI

- Always pass aria-label or a visible group label.

## Related

- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.


---

# Tag input

> Type, paste or pick suggestions to add tags; validates each one.

Component · Free · https://lodeui.com/components/tag-input

## When to use

- Lists of short values: emails to invite, labels, allowed domains.

## When not to use

- Picking from a fixed list: use a multi combobox.

## Installation

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

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { TagInput } from "@/components/ui/tag-input";

export function Invite() {
  const [emails, setEmails] = React.useState<string[]>([]);
  return (
    <TagInput
      aria-label="Emails"
      value={emails}
      onValueChange={setEmails}
      placeholder="name@company.com"
      validate={(t) => (/^\S+@\S+$/.test(t) ? null : "Enter a valid email")}
      max={10}
    />
  );
}
```

## API reference

### TagInput

Type and press Enter or comma to add a tag. Paste splits on commas.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / onValueChange | `string[]` | – | Controlled tags. |
| validate | `(tag) => string \| null` | – | Return an error message to reject a tag. |
| max | `number` | – | Most tags allowed. |
| suggestions | `string[]` | `[]` | Up to five matches shown as a listbox while typing. |
| placeholder | `string` | `"Add…"` | Input placeholder. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / , | Add the tag |
| Backspace | Remove the last tag when empty |
| Tab | Reach suggestions and remove buttons |

## Accessibility

- Each tag's remove button is labelled "Remove <tag>".
- Errors are announced with role="alert" and aria-invalid.

## Motion

- Tags spring in and out (stiffness 500).

## Responsive behavior

- Tags wrap onto new lines.

## Performance

- Duplicates are ignored without re-rendering.

## Notes for AI

- Normalize case in validate if tags are case-insensitive.

## Related

- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.


---

# Combobox

> Searchable select for one or many values, fully keyboard driven.

Component · Free · https://lodeui.com/components/combobox

## When to use

- Searchable choice from many options: country, assignee, repository.
- Choosing several values (multiple).

## When not to use

- Under ~8 options: use a select.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/combobox.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Combobox } from "@/components/ui/combobox";

const people = [
  { value: "ada", label: "Ada Lovelace", description: "Engineering" },
  { value: "grace", label: "Grace Hopper", description: "Platform" },
];

export function Assignees() {
  const [value, setValue] = React.useState<string[]>([]);
  return <Combobox multiple aria-label="Assignees" options={people} value={value} onValueChange={setValue} />;
}
```

## API reference

### Combobox

A trigger with a searchable listbox. Single mode returns string | null; multiple mode returns string[].

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `{ value; label; description?; icon? }[]` | – | Choices; search matches label and description. |
| multiple | `boolean` | `false` | Switches value to string[]. |
| value / onValueChange | `string \| null  /  string[]` | – | Controlled value. Choosing the selected option again clears it in single mode. |
| placeholder / searchPlaceholder / emptyMessage | `string` | `"Select…" / "Search…" / "No matches"` | Text. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move the highlight |
| Enter | Choose |
| Esc | Close |

## Accessibility

- The search field is a combobox controlling a listbox with aria-activedescendant.
- Multiple mode sets aria-multiselectable.

## Motion

- The menu scales in; chosen chips animate in the trigger.

## Responsive behavior

- Fills its container width.

## Performance

- Filtering is a substring match; fine for a few thousand options.

## Notes for AI

- Use the multiple prop and string[] state together, or TypeScript will complain.

## Related

- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.
- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.
- [Command palette](https://lodeui.com/components/command-palette) — Type to filter, arrow to move, Enter to run. Inline or as a ⌘K dialog.


---

# Popover

> An anchored panel for filters, forms and details.

Component · Free · https://lodeui.com/components/popover

## When to use

- Small interactive panels anchored to a button: filters, share, quick edit.

## When not to use

- Lists of actions: use a dropdown menu.
- Plain hints: use a tooltip.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/popover.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Popover } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

export function Share() {
  return (
    <Popover trigger={<Button variant="outline">Share</Button>} align="end">
      {(close) => (
        <div className="space-y-2 p-3">
          <p className="text-sm">Anyone with the link can view.</p>
          <Button size="sm" onClick={close}>Done</Button>
        </div>
      )}
    </Popover>
  );
}
```

## API reference

### Popover

A dialog panel anchored to its trigger. Children can be a function that receives close().

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| trigger | `ReactElement` | – | A button; ARIA and handlers are added. |
| children | `ReactNode \| (close) => ReactNode` | – | Panel content. |
| align | `"start" \| "center" \| "end"` | `"start"` | Horizontal alignment. |
| side | `"bottom" \| "top"` | `"bottom"` | Placement. |
| open / onOpenChange | `boolean` | – | Optional control. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open from the trigger |
| Esc | Close and return focus |

## Accessibility

- The panel is role="dialog"; the trigger has aria-expanded and aria-controls.

## Motion

- Scales in from the trigger side.

## Responsive behavior

- Keep panels under 320px wide for phones.

## Performance

- Content renders only while open.

## Notes for AI

- Use the close() render prop to close after an action.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Tooltip](https://lodeui.com/components/tooltip) — A small label on hover or focus, with a delay that respects intent.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.


---

# KPI card

> A metric with delta, hint and an optional sparkline.

Component · Free · https://lodeui.com/components/kpi-card

## When to use

- A headline metric with its change and a small trend.

## When not to use

- Detailed analysis: use a chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/kpi-card.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { KpiCard } from "@/components/ui/kpi-card";
import { Sparkline } from "@/components/ui/sparkline";

export function Churn() {
  return <KpiCard label="Churn" value="2.1%" delta={-0.4} deltaSuffix="pts" invert chart={<Sparkline data={[3, 2.8, 2.5, 2.1]} />} />;
}
```

## API reference

### KpiCard

Label, value, colored delta, hint and optional chart.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label / value | `string / ReactNode` | – | Pass a NumberTicker as value for animation. |
| delta / deltaSuffix | `number / string` | `— / "%"` | Change vs the comparison period. |
| invert | `boolean` | – | Lower is better (churn, latency): flips green and red. |
| hint / chart / icon | `ReactNode` | – | Extras. |

## Accessibility

- The delta includes an arrow and sign, not just color.

## Motion

- Inherits motion from what you pass as value or chart.

## Responsive behavior

- Fills its grid cell; use a 2-column grid on phones.

## Performance

- Static.

## Notes for AI

- Set invert for metrics where going down is good.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.


---

# Timeline

> Vertical activity timeline with toned icons that stagger in.

Component · Free · https://lodeui.com/components/timeline

## When to use

- Activity feeds, audit trails, incident updates and order history.

## When not to use

- Steps people must complete: use a stepper.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/timeline.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Timeline } from "@/components/ui/timeline";

export function Activity() {
  return <Timeline items={[{ id: "1", title: "Deployed v2.4", time: "2m ago", tone: "success" }, { id: "2", title: "Build started", time: "6m ago" }]} />;
}
```

## API reference

### Timeline

A vertical list of events with tone-colored markers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ id; title; description?; time; icon?; tone? }[]` | – | tone: default, success, warning, danger or info. |

## Accessibility

- An ordered list; markers are decorative and the title carries the meaning.

## Motion

- Items stagger in on mount.

## Responsive behavior

- Single column; time sits under the title on narrow screens.

## Performance

- Paginate long histories.

## Notes for AI

- Newest first is the usual order for activity feeds.

## Related

- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.


---

# Data table

> Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.

Component · Pro · https://lodeui.com/components/data-table

## When to use

- Records people sort, filter, select and act on: users, invoices, orders.

## When not to use

- A few rows with no actions: a plain table is enough.
- Spreadsheet editing.

## Installation

```bash
npx shadcn@latest add @lode/data-table
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { DataTable, type Column } from "@/components/ui/data-table";

type Invoice = { id: string; customer: string; amount: number; status: string };

const columns: Column<Invoice>[] = [
  { key: "customer", header: "Customer", accessor: (r) => r.customer, sortable: true, primary: true },
  { key: "status", header: "Status", accessor: (r) => r.status, filterable: true },
  { key: "amount", header: "Amount", accessor: (r) => r.amount, sortable: true, align: "right", cell: (r) => `$${r.amount}` },
];

export function Invoices({ data }: { data: Invoice[] }) {
  return <DataTable data={data} columns={columns} getRowId={(r) => r.id} selectable exportName="invoices" />;
}
```

## API reference

### DataTable

Sorting, search, filters, selection with bulk actions, column visibility, pagination, expandable rows, CSV export and keyboard navigation. Becomes cards below 640px.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data / columns / getRowId | `T[] / Column<T>[] / (row) => string` | – | Rows, column definitions and a stable id. |
| pageSize | `number` | `10` | Rows per page. |
| selectable / bulkActions | `boolean / { label; icon?; destructive?; onRun(rows) }[]` | – | Row checkboxes and actions on the selection. |
| rowActions / renderDetail / onRowClick | `(row) => ReactNode \| void` | – | Last-column actions, expandable detail and row click. |
| exportName | `string` | – | File name for CSV export. Omit to hide the button. |
| searchPlaceholder / empty / loading | `string / ReactNode / boolean` | – | Toolbar text, empty state and skeleton rows. |

### Column<T>

Describes one column.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| key / header / accessor | `string / string / (row) => string \| number \| null` | – | accessor feeds sorting, search and export. |
| cell | `(row) => ReactNode` | – | Custom rendering. |
| sortable / filterable / hidden / primary | `boolean` | – | primary is the card title on phones. |
| align / width | `"left" \| "right" / string` | – | Layout. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move between rows |
| Space | Select the focused row |
| Enter | Expand or open the focused row |
| Tab | Reach toolbar and row controls |

## Accessibility

- A real <table>; sortable headers set aria-sort.
- Every checkbox and filter is labelled.
- Expandable rows set aria-expanded.

## Motion

- Expanded rows animate height; the bulk bar slides up when rows are selected.

## Responsive behavior

- Below 640px rows become cards titled by the primary column.

## Performance

- Sorting and filtering run in memory; for more than ~5,000 rows, page on the server.

## Notes for AI

- accessor must return a primitive; use cell for formatting.
- Keep getRowId stable or selection resets.

## Related

- [Pagination](https://lodeui.com/components/pagination) — Page numbers with ellipses and a gliding current-page indicator.
- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Empty state](https://lodeui.com/components/empty-state) — Empty, no-results, error, offline, maintenance and rate-limit states with one API.


---

# Code viewer

> File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.

Component · Free · https://lodeui.com/components/code-viewer

## When to use

- Showing code samples with file tabs, highlighted lines and copy.

## When not to use

- Editing code: use an editor.
- Comparing versions: use the diff viewer.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/code-viewer.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CodeViewer } from "@/components/ui/code-viewer";

export function Snippet() {
  return <CodeViewer files={[{ name: "client.ts", language: "ts", code: "export const api = createClient();" }]} highlight={[1]} />;
}
```

## API reference

### CodeViewer

Code with file tabs, line numbers, highlighted lines, copy and expand. No highlighter dependency.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| files | `{ name; code; language?: "tsx" \| "ts" \| "js" \| "json" \| "bash" \| "css" \| "text" }[]` | – | One tab per file. |
| lineNumbers | `boolean` | `true` | Gutter numbers. |
| highlight | `number[]` | `[]` | 1-based lines to highlight in the first file. |
| maxHeight | `number` | – | Collapse to this height with an expand button. |

### tokenize

The tokenizer used inside, for your own renderers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| code / language | `string / CodeLanguage` | – | Returns tokens per line. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach file tabs, copy and expand |
| Enter / Space | Switch tab or copy |

## Accessibility

- File tabs are a tablist; copy announces success.

## Motion

- The tab indicator slides; expand animates height.

## Responsive behavior

- Lines scroll horizontally; they never wrap.

## Performance

- Tokenizing is linear; fine for files of a few thousand lines.

## Notes for AI

- For full syntax accuracy on the server, use shiki instead.

## Related

- [Diff viewer](https://lodeui.com/components/diff-viewer) — Line diff in unified or split view with added/removed counts.
- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.


---

# Terminal

> A terminal window that types commands and streams output, with replay and copy.

Component · Free · https://lodeui.com/components/terminal

## When to use

- Install instructions and CLI demos that type themselves out.

## When not to use

- A real shell: use xterm.js.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/terminal.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Terminal } from "@/components/ui/terminal";

export function Install() {
  return (
    <Terminal
      lines={[
        { type: "command", text: "npx shadcn@latest add @lode/button" },
        { type: "progress", text: "Installing", ms: 900 },
        { type: "output", text: "✓ Done", tone: "success" },
      ]}
    />
  );
}
```

## API reference

### Terminal

A terminal window that types commands, runs progress lines and streams output.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lines | `TerminalLine[]` | – | command, output (with tone) or progress (with ms) lines. |
| title | `string` | `"zsh"` | Window title. |
| animate | `boolean` | `true` | Type and reveal over time. |
| typingSpeed | `number` | `28` | ms per character. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Replay and Copy |

## Accessibility

- The output is role="log" with aria-live="polite", so lines are announced as they appear.
- Copy copies only the commands.

## Motion

- Characters type in; a cursor blinks; progress lines fill.

## Responsive behavior

- Long lines scroll horizontally.

## Performance

- One timer drives the whole sequence.

## Notes for AI

- Use type="progress" for waits rather than fake output lines.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.


---

# JSON viewer

> Collapsible, syntax-colored JSON tree.

Component · Free · https://lodeui.com/components/json-viewer

## When to use

- Inspecting API responses, webhook payloads and config.

## When not to use

- Editing JSON: use a code editor.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/json-viewer.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { JsonViewer } from "@/components/ui/json-viewer";

export function Payload({ event }: { event: unknown }) {
  return <JsonViewer data={event as never} defaultExpandDepth={1} />;
}
```

## API reference

### JsonViewer

A collapsible JSON tree with type colors and item counts.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `Json` | – | Any JSON value. |
| defaultExpandDepth | `number` | `2` | Levels open on first render. |
| rootName | `string` | – | Label for the root. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between expandable nodes |
| Enter / Space | Expand or collapse |

## Accessibility

- role="tree"; toggles use aria-expanded.

## Motion

- Chevrons rotate as nodes open.

## Responsive behavior

- Scrolls horizontally for deep nesting.

## Performance

- Collapsed nodes don't render their children.

## Notes for AI

- Lower defaultExpandDepth for large payloads.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.


---

# Diff viewer

> Line diff in unified or split view with added/removed counts.

Component · Pro · https://lodeui.com/components/diff-viewer

## When to use

- Showing what changed between two versions of a file or config.

## When not to use

- Very large files (over a few thousand lines).

## Installation

```bash
npx shadcn@latest add @lode/diff-viewer
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { DiffViewer } from "@/components/ui/diff-viewer";

export function ConfigChange({ before, after }: { before: string; after: string }) {
  return <DiffViewer fileName="config.json" oldCode={before} newCode={after} />;
}
```

Built from: Segmented control

## API reference

### DiffViewer

A line diff in unified or split view.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| oldCode / newCode | `string` | – | Versions to compare. |
| fileName | `string` | – | Shown in the header. |
| defaultView | `"unified" \| "split"` | `"unified"` | Starting view; people can switch. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the view switch |

## Accessibility

- Added and removed lines have + and − signs, not only colors.
- The view switch is labelled.

## Responsive behavior

- Use unified on phones; split needs about 720px.

## Performance

- Longest common subsequence: O(n·m). Fine for a few thousand lines.

## Notes for AI

- Normalize line endings before diffing.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.


---

# Log viewer

> Live log stream with level filters, search and follow mode.

Component · Pro · https://lodeui.com/components/log-viewer

## When to use

- Streaming build, function or request logs.

## When not to use

- Millions of lines: virtualize or page on the server.

## Installation

```bash
npx shadcn@latest add @lode/log-viewer
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { LogViewer } from "@/components/ui/log-viewer";

export function BuildLogs({ entries }: { entries: { id: string; time: string; level: "info" | "warn" | "error" | "debug"; message: string }[] }) {
  return <LogViewer entries={entries} live height={400} />;
}
```

## API reference

### LogViewer

Searchable, level-filtered log stream with follow mode.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| entries | `{ id; time; level; message; source? }[]` | – | level: debug, info, warn or error. |
| live | `boolean` | – | New entries scroll into view unless paused. |
| height | `number` | `360` | Viewport height in px. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach search, level filters and Follow |

## Accessibility

- role="log" with aria-live.
- Level filters are toggle buttons with aria-pressed.

## Motion

- No entry animation, so fast streams stay readable.
- Follow mode keeps the newest line in view.

## Responsive behavior

- Lines wrap on phones; the toolbar wraps.

## Performance

- Filtering is in memory; cap the buffer to a few thousand entries.

## Notes for AI

- Append new entries to the end of the array.

## Related

- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.


---

# Uptime bar

> Daily status bars with uptime percentage and incident tooltips.

Component · Pro · https://lodeui.com/components/uptime-bar

## When to use

- Status pages and service health over 30–90 days.

## When not to use

- Live latency: use a line chart.

## Installation

```bash
npx shadcn@latest add @lode/uptime-bar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { UptimeBar } from "@/components/ui/uptime-bar";

export function Api({ days }: { days: { date: string; status: "up" | "degraded" | "down" | "none" }[] }) {
  return <UptimeBar name="API" days={days} />;
}
```

## API reference

### UptimeBar

One bar per day with an uptime percentage.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | `string` | – | Service name. |
| days | `{ date; status; note? }[]` | – | status: up, degraded, down or none. |

## Accessibility

- role="img" with a summary; each bar has a label with date, status and note.

## Motion

- Hovering a bar dims the others.

## Responsive behavior

- Bars shrink to fit; show fewer days on phones.

## Performance

- One element per day.

## Notes for AI

- Use none for days before monitoring started.

## Related

- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.


---

# Environment editor

> Masked env vars with per-environment scope, validation and .env paste.

Component · Pro · https://lodeui.com/components/env-editor

## When to use

- Editing environment variables or secrets per environment.

## When not to use

- Non-secret settings: use regular inputs.

## Installation

```bash
npx shadcn@latest add @lode/env-editor
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { EnvEditor, type EnvVar } from "@/components/ui/env-editor";

export function Env() {
  const [vars, setVars] = React.useState<EnvVar[]>([]);
  return <EnvEditor value={vars} onValueChange={setVars} />;
}
```

## API reference

### EnvEditor

Rows of key, masked value and environment scope. Pasting a .env file adds every line.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / onValueChange | `EnvVar[]` | – | { id, key, value, environments }. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between key, value and scope |
| ⌘V / Ctrl+V | Paste a .env block into a key field |

## Accessibility

- Every field and button is labelled with the variable name.
- Invalid and duplicate keys set aria-invalid with a message.

## Motion

- Rows animate in and out.

## Responsive behavior

- Rows stack below 768px; the column header hides.

## Performance

- Validation runs on change only.

## Notes for AI

- Encrypt values server-side; the editor only masks them.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.


---

# Spotlight card

> A card lit by a spotlight that follows the pointer, border included.

Component · Free · https://lodeui.com/components/spotlight-card

## When to use

- Feature grids and pricing cards on marketing pages.

## When not to use

- Dense app UI where hover effects distract.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/spotlight-card.json
```

## Usage

```tsx title="example.tsx"
import { SpotlightCard } from "@/components/ui/spotlight-card";

export function Feature() {
  return <SpotlightCard className="p-6"><h3>Fast by default</h3></SpotlightCard>;
}
```

## API reference

### SpotlightCard

A card lit by a soft light that follows the pointer, including on its border.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| color | `string` | `10% foreground` | Light color. |
| size | `number` | `360` | Light radius in px. |

## Accessibility

- The light layers are aria-hidden and hidden under reduced motion.

## Motion

- Follows the pointer; fades in on hover.

## Responsive behavior

- Touch screens just see the card.

## Performance

- Updates CSS variables, not React state.

## Notes for AI

- Put interactive content inside as normal.

## Related

- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.
- [Border beam](https://lodeui.com/components/border-beam) — A light that travels around an element's border.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.


---

# Magnetic

> Makes any element lean toward the pointer and spring back.

Component · Free · https://lodeui.com/components/magnetic

## When to use

- A primary call to action on a landing page.

## When not to use

- Forms and dense UI.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/magnetic.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Magnetic } from "@/components/ui/magnetic";
import { Button } from "@/components/ui/button";

export function Cta() {
  return <Magnetic><Button size="lg">Start free</Button></Magnetic>;
}
```

## API reference

### Magnetic

Leans its child toward the pointer, then springs back.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| strength | `number` | `0.35` | 0–1. |

## Accessibility

- Off under reduced motion and for touch and pen input.

## Motion

- Spring-follows the pointer; returns on leave.

## Responsive behavior

- Mouse only.

## Performance

- Motion values; no re-renders.

## Notes for AI

- Use on one element per view.

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.


---

# Text reveal

> Text that rises out of a blur, word by word, as it scrolls into view.

Component · Free · https://lodeui.com/components/text-reveal

## When to use

- Hero headings and section titles.

## When not to use

- Body copy and anything people need to read immediately.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TextReveal } from "@/components/ui/text-reveal";

export function Hero() {
  return <TextReveal as="h1" text="Ship product UI at platform speed." className="text-5xl font-semibold" />;
}
```

## API reference

### TextReveal

Words or characters rise and unblur when scrolled into view.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | – | The text. |
| as | `"h1" \| "h2" \| "h3" \| "p" \| "span"` | `"p"` | Element. |
| by | `"word" \| "char"` | `"word"` | Unit. |
| delay | `number` | `0` | Seconds. |
| repeat | `boolean` | – | Replay on every entry. |

## Accessibility

- The element has aria-label with the full text; pieces are aria-hidden.
- Shown at once under reduced motion.

## Motion

- Each unit fades up from 0.35em with a blur.

## Responsive behavior

- Wraps naturally.

## Performance

- One span per unit; prefer by="word" for long text.

## Notes for AI

- Use as="h1" for hero headings so the outline stays right.

## Related

- [Text scramble](https://lodeui.com/components/text-scramble) — Characters cycle through glyphs and settle into the final text.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.
- [Reveal](https://lodeui.com/components/reveal) — Scroll-triggered fade-and-slide, plus a Stagger for groups.


---

# Text scramble

> Characters cycle through glyphs and settle into the final text.

Component · Free · https://lodeui.com/components/text-scramble

## When to use

- Short technical labels and headings that decode on load or hover.

## When not to use

- Sentences and body text.

## Installation

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

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TextScramble } from "@/components/ui/text-scramble";

export function Label() {
  return <TextScramble text="DEPLOY_READY" className="font-mono" />;
}
```

## API reference

### TextScramble

Characters cycle through glyphs and settle left to right.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | – | Final text. |
| duration | `number` | `900` | ms for the decode. |
| trigger | `"mount" \| "hover" \| "both"` | `"both"` | When it plays. |

## Accessibility

- aria-label holds the real text; glyphs are aria-hidden.
- Static under reduced motion.

## Motion

- Decodes over the duration.

## Responsive behavior

- Use a monospace font so the width doesn't jump.

## Performance

- requestAnimationFrame only while playing.

## Notes for AI

- Keep text under ~24 characters.

## Related

- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.


---

# Border beam

> A light that travels around an element's border.

Component · Pro · https://lodeui.com/components/border-beam

## When to use

- Drawing the eye to one card: the recommended plan, a new feature.

## When not to use

- More than one element per view.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { BorderBeam } from "@/components/ui/border-beam";

export function Highlight() {
  return <BorderBeam className="rounded-xl p-6">Pro</BorderBeam>;
}
```

## API reference

### BorderBeam

A light that travels around the border.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| duration | `number` | `6` | Seconds per lap. |
| color | `string` | `var(--brand)` | Beam color. |

## Accessibility

- Decorative and aria-hidden; static under reduced motion.

## Motion

- A conic gradient rotates around the border.

## Responsive behavior

- Follows the element's radius.

## Performance

- Pure CSS with an animated custom property.

## Notes for AI

- Give it a border radius class.

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.


---

# Shimmer text

> Text with a light sweep, for thinking and loading states.

Component · Free · https://lodeui.com/components/shimmer-text

## When to use

- Pending states like Thinking… or Generating…

## When not to use

- Static headings.

## Installation

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

## Usage

```tsx title="example.tsx"
import { ShimmerText } from "@/components/ui/shimmer-text";

export function Thinking() {
  return <ShimmerText>Thinking…</ShimmerText>;
}
```

## API reference

### ShimmerText

Text with a light sweeping across it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `ReactNode` | – | The text. |

## Accessibility

- Plain text; stops animating under reduced motion.

## Motion

- A gradient sweeps every 2.2s.

## Responsive behavior

- Inline.

## Performance

- CSS animation.

## Notes for AI

- Pair with aria-live on the container when status changes.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Text scramble](https://lodeui.com/components/text-scramble) — Characters cycle through glyphs and settle into the final text.


---

# Reveal

> Scroll-triggered fade-and-slide, plus a Stagger for groups.

Component · Free · https://lodeui.com/components/reveal

## When to use

- Sections that fade in as you scroll a landing page.

## When not to use

- App UI people use every day.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/reveal.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Reveal, Stagger } from "@/components/ui/reveal";

export function Features() {
  return (
    <Reveal>
      <Stagger className="grid gap-4 sm:grid-cols-3">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </Stagger>
    </Reveal>
  );
}
```

## API reference

### Reveal

Fades its children in when they scroll into view.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| from | `"bottom" \| "left" \| "right" \| "none"` | `"bottom"` | Direction. |
| delay | `number` | `0` | Seconds. |

### Stagger

Reveals direct children one after another.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| gap | `number` | `0.06` | Seconds between children. |

## Accessibility

- Content is shown at once under reduced motion.

## Motion

- Fades and slides 16px once per page view.

## Responsive behavior

- Works in any layout.

## Performance

- IntersectionObserver; animates once.

## Notes for AI

- Don't wrap above-the-fold content; it delays first paint.

## Related

- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.


---

# Sortable list

> Drag to reorder, or use arrow keys on the handle; announces moves.

Component · Pro · https://lodeui.com/components/sortable-list

## When to use

- Reordering short lists: priorities, navigation items, steps.

## When not to use

- Moving items between columns: use the kanban board block.

## Installation

```bash
npx shadcn@latest add @lode/sortable-list
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { SortableList } from "@/components/ui/sortable-list";

export function Priorities() {
  const [items, setItems] = React.useState([{ id: "a", name: "Billing" }, { id: "b", name: "Search" }]);
  return <SortableList aria-label="Priorities" items={items} onReorder={setItems} getId={(i) => i.id} renderItem={(i) => i.name} />;
}
```

## API reference

### SortableList

Drag a handle or use the keyboard to reorder.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items / onReorder | `T[] / (items: T[]) => void` | – | Controlled order. |
| getId | `(item) => string` | – | Stable id. |
| renderItem | `(item) => ReactNode` | – | Row content. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move the focused item (on its handle) |
| Tab | Move between handles |

## Accessibility

- Each handle states its position and how to move it.
- Moves are announced in a live region.

## Motion

- Items slide into place with layout animation.

## Responsive behavior

- Touch drag works on the handle.

## Performance

- Fine up to ~100 items.

## Notes for AI

- Persist order in onReorder.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.


---

# Tilt card

> A card that tilts in 3D toward the pointer with a moving glare.

Component · Pro · https://lodeui.com/components/tilt-card

## When to use

- Product shots, cards and credit-card visuals on marketing pages.

## When not to use

- Cards containing forms.

## Installation

```bash
npx shadcn@latest add @lode/tilt-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TiltCard } from "@/components/ui/tilt-card";

export function Card() {
  return <TiltCard className="rounded-2xl p-8">Lode Pro</TiltCard>;
}
```

## API reference

### TiltCard

Tilts toward the pointer in 3D with a moving glare.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| max | `number` | `10` | Max tilt in degrees. |

## Accessibility

- Flat under reduced motion; the glare is aria-hidden.

## Motion

- Spring tilt and glare follow the pointer; reset on leave.

## Responsive behavior

- Static on touch.

## Performance

- Motion values; no re-renders.

## Notes for AI

- Keep max under 15.

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.


---

# Line chart

> Multi-series lines with legend toggles, crosshair and shared tooltip.

Component · Free · https://lodeui.com/components/line-chart

## When to use

- Comparing several series over time.

## When not to use

- Parts of a total: use a stacked area chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/line-chart.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { LineChart } from "@/components/ui/line-chart";

export function Latency() {
  return (
    <LineChart
      labels={["Mon", "Tue", "Wed"]}
      series={[
        { key: "p50", label: "p50", color: "var(--chart-1)", values: [120, 118, 125] },
        { key: "p95", label: "p95", color: "var(--chart-3)", values: [310, 290, 330], dashed: true },
      ]}
    />
  );
}
```

## API reference

### LineChart

Multiple lines with a toggleable legend and shared tooltip.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| labels / series | `string[] / { key; label; color; values; dashed? }[]` | – | Data. |
| height | `number` | `260` | Height. |
| legend | `boolean` | `true` | Clickable legend. |
| loading / formatValue | `boolean / (n) => string` | – | Skeleton and number format. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach legend toggles |
| Enter / Space | Show or hide a series |

## Accessibility

- role="img"; legend items are toggle buttons with aria-pressed.
- Dashed lines help tell series apart without color.

## Motion

- Lines draw in and morph between datasets.

## Responsive behavior

- Measures its width; labels thin out.

## Performance

- One path per series.

## Notes for AI

- All series must have labels.length values.

## Related

- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Stacked area chart](https://lodeui.com/components/stacked-area-chart) — Stacked series above and below zero, morphing as the range changes.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.


---

# Funnel chart

> Conversion funnel with overall and step-to-step rates.

Component · Pro · https://lodeui.com/components/funnel-chart

## When to use

- Conversion through ordered steps: visit → sign up → pay.

## When not to use

- Unordered categories: use a bar chart.

## Installation

```bash
npx shadcn@latest add @lode/funnel-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { FunnelChart } from "@/components/ui/funnel-chart";

export function Signup() {
  return <FunnelChart steps={[{ label: "Visited", value: 12000 }, { label: "Signed up", value: 1800 }, { label: "Paid", value: 240 }]} />;
}
```

## API reference

### FunnelChart

Bars sized to the first step, with step-to-step drop-off.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `{ label; value }[]` | – | Steps in order. |
| color | `string` | `var(--chart-1)` | Bar color. |

## Accessibility

- Every step prints its value and conversion as text.

## Motion

- Bars grow in sequence.

## Responsive behavior

- Labels stack above bars on phones.

## Performance

- Static after mount.

## Notes for AI

- Values should decrease; the chart doesn't sort.

## Related

- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.


---

# Gauge

> Half-circle gauge with warning and danger thresholds.

Component · Free · https://lodeui.com/components/gauge

## When to use

- Scores, capacity and SLA targets against a maximum.

## When not to use

- Trends: use a chart.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/gauge.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Gauge } from "@/components/ui/gauge";

export function Cpu() {
  return <Gauge value={72} label="CPU" thresholds={[0.7, 0.9]} format={(v) => `${v}%`} />;
}
```

## API reference

### Gauge

A half-circle gauge that turns amber, then red, past thresholds.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / max | `number` | `— / 100` | Reading. |
| label / format | `string / (v) => string` | – | Caption and number. |
| thresholds | `[warn, danger]` | – | Fractions of max. |
| size | `number` | `200` | Width in px. |

## Accessibility

- role="meter" with min, max and now.

## Motion

- The arc sweeps to its value.

## Responsive behavior

- Shrinks to fit narrow containers.

## Performance

- One SVG.

## Notes for AI

- thresholds are fractions (0.7), not values (70).

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.


---

# Prompt input

> Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.

Component · Pro · https://lodeui.com/components/prompt-input

## When to use

- Chat and AI composers with attachments and a stop button.

## When not to use

- Plain comments: use a textarea.

## Installation

```bash
npx shadcn@latest add @lode/prompt-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PromptInput } from "@/components/ui/prompt-input";

export function Composer({ send, generating, stop }: { send: (t: string, f: File[]) => void; generating: boolean; stop: () => void }) {
  return <PromptInput onSubmit={send} generating={generating} onStop={stop} />;
}
```

## API reference

### PromptInput

Grows with text, takes files by picker, paste or drop, Enter to send.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onSubmit | `(text, files) => void` | – | Called on send. |
| generating / onStop | `boolean / () => void` | – | Turns send into stop. |
| toolbar | `ReactNode` | – | Model picker or other controls. |
| placeholder / maxLength | `string / number` | `"Ask anything…" / 8000` | Text limits. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Send |
| Shift+Enter | New line |
| ⌘V / Ctrl+V | Paste files |

## Accessibility

- All buttons labelled; attachments have labelled remove buttons.
- Enter is ignored while composing with an IME.

## Motion

- Attachments pop in; send morphs into stop.

## Responsive behavior

- Full width; toolbar wraps.

## Performance

- Auto-resize on input only.

## Notes for AI

- Clear your own state after onSubmit; the input clears itself.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Citation list](https://lodeui.com/components/citation-list) — Numbered sources and inline citation marks for AI answers.
- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.


---

# AI reasoning

> A collapsible thinking trace that folds into a summary when done.

Component · Pro · https://lodeui.com/components/ai-reasoning

## When to use

- Showing a model's steps while it works, then folding them away.

## When not to use

- The final answer itself.

## Installation

```bash
npx shadcn@latest add @lode/ai-reasoning
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiReasoning } from "@/components/ui/ai-reasoning";

export function Trace({ steps, thinking }: { steps: string[]; thinking: boolean }) {
  return <AiReasoning steps={steps} thinking={thinking} seconds={4} />;
}
```

Built from: Shimmer text

## API reference

### AiReasoning

Open while streaming; folds into a summary when done.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `string[]` | – | Steps as they arrive. |
| thinking | `boolean` | – | True while working. |
| seconds | `number` | – | Shown when done. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Expand or collapse |

## Accessibility

- The toggle uses aria-expanded.

## Motion

- Steps slide in; the header shimmers while thinking; folds on completion.

## Responsive behavior

- Full width.

## Performance

- Append steps; don't replace the array each token.

## Notes for AI

- Set thinking=false when the answer starts streaming.

## Related

- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.
- [Citation list](https://lodeui.com/components/citation-list) — Numbered sources and inline citation marks for AI answers.


---

# Citation list

> Numbered sources and inline citation marks for AI answers.

Component · Free · https://lodeui.com/components/citation-list

## When to use

- Sources for AI answers or research summaries.

## When not to use

- General link lists.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/citation-list.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { CitationList, CitationMark } from "@/components/ui/citation-list";

export function Answer() {
  return (
    <>
      <p>Revenue grew 18%<CitationMark id={1} /></p>
      <CitationList sources={[{ id: 1, title: "Q3 report", url: "https://example.com/q3" }]} />
    </>
  );
}
```

## API reference

### CitationList

Numbered source cards showing each site's hostname.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| sources | `{ id; title; url; snippet? }[]` | – | Sources. |

### CitationMark

An inline number linking to its source.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| id | `number` | – | Source id. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between marks and sources |

## Accessibility

- Marks are labelled "Source N"; external links say they open sources.

## Responsive behavior

- Two columns from 640px.

## Performance

- Static.

## Notes for AI

- Ids must match between marks and sources.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.


---

# Rating

> Interactive or read-only star rating with half stars.

Component · Free · https://lodeui.com/components/rating

## When to use

- Collecting or showing star ratings.

## When not to use

- Precise satisfaction scores: use a radio group with labels.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/rating.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Rating } from "@/components/ui/rating";

export function Review() {
  const [stars, setStars] = React.useState(0);
  return <Rating aria-label="Rating" value={stars} onValueChange={setStars} />;
}
```

## API reference

### Rating

Interactive stars, or read-only with half stars.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / onValueChange | `number` | – | Current rating. |
| max | `number` | `5` | Stars. |
| size | `number` | `18` | Star size in px. |
| readOnly | `boolean` | – | Display only; supports halves. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Change rating |

## Accessibility

- Interactive stars are a radiogroup; each star is labelled.

## Motion

- Stars pop on hover and select.

## Responsive behavior

- Fixed size; use 24px+ for touch.

## Performance

- Static markup.

## Notes for AI

- Use readOnly for averages like 4.6.

## Related

- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.


---

# Product card

> Product tile with swatches, wishlist, sale price and add-to-cart.

Component · Pro · https://lodeui.com/components/product-card

## When to use

- Product grids in stores and catalogs.

## When not to use

- Product detail pages: use the product detail block.

## Installation

```bash
npx shadcn@latest add @lode/product-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProductCard } from "@/components/ui/product-card";

export function Item() {
  return <ProductCard name="Linen Overshirt" price={89} compareAt={120} rating={4.6} reviews={212} swatches={[{ name: "Sand", color: "#d6c7a1" }]} onAddToCart={(s) => console.log(s)} />;
}
```

Built from: Rating

## API reference

### ProductCard

Image, swatches, wishlist, sale price and an add-to-cart that confirms in place.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name / price / compareAt / currency | `string / number / number / string` | `— / — / — / "USD"` | compareAt shows a sale price. |
| rating / reviews | `number` | – | Stars and count. |
| image / colors | `string / [string, string]` | – | Image, or a generated placeholder. |
| swatches | `{ name; color }[]` | – | Color choices. |
| badge | `string` | – | Corner label. |
| onAddToCart | `(swatch?) => void` | – | Called with the chosen swatch. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach swatches, wishlist and add to cart |
| Enter / Space | Pick a swatch or press a button |

## Accessibility

- Swatches are a labelled radiogroup; wishlist is a toggle with aria-pressed.

## Motion

- Add to cart morphs into a check; image zooms on hover.

## Responsive behavior

- Fills its grid cell.

## Performance

- Use optimized images.

## Notes for AI

- Prices are numbers; formatting uses currency.

## Related

- [Rating](https://lodeui.com/components/rating) — Interactive or read-only star rating with half stars.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.


---

# Dock

> macOS-style dock whose icons magnify under the pointer, with tooltips, badges and active dots.

Component · Pro · https://lodeui.com/components/dock

## When to use

- A launcher of 4–10 top-level destinations or tools, like an app switcher.
- Playful navigation on marketing pages and portfolios.

## When not to use

- Primary navigation of a dense app: use a sidebar or tabs.
- Touch-first screens: magnification needs a mouse (the dock still works, just without the effect).

## Installation

```bash
npx shadcn@latest add @lode/dock
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Home, Mail, Settings } from "lucide-react";
import { Dock } from "@/components/ui/dock";

export function AppDock() {
  return (
    <Dock
      aria-label="Apps"
      items={[
        { id: "home", label: "Home", icon: <Home />, href: "/", active: true },
        { id: "mail", label: "Mail", icon: <Mail />, href: "/mail", badge: 3 },
        { type: "separator", id: "sep" },
        { id: "settings", label: "Settings", icon: <Settings />, onSelect: () => openSettings() },
      ]}
    />
  );
}
```

## API reference

### Dock

A nav of icon buttons or links that magnify near the pointer.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `(DockItem \| { type: "separator"; id })[]` | – | DockItem: { id, label, icon, href?, onSelect?, active?, badge? }. |
| size | `number` | `44` | Resting icon tile size in px. |
| magnification | `number` | `68` | Tile size directly under the pointer. |
| distance | `number` | `140` | How far the effect reaches either side, in px. |
| aria-label | `string` | `"Dock"` | Names the navigation landmark. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between icons; the label appears on focus |
| Enter | Open the focused item |

## Accessibility

- A nav landmark of real links or buttons, each named by its label (and badge count).
- Active links set aria-current="page"; active buttons set aria-pressed.
- Labels show as tooltips on hover and on keyboard focus.

## Motion

- Each tile springs between its size and the magnified size based on pointer distance (stiffness 170, damping 12).
- Tooltips fade up in 150ms.
- No magnification under reduced motion.

## Responsive behavior

- Shrinks its icons (down to 28px) so every item fits narrow containers like a 375px phone.
- Touch input skips magnification, so taps land where expected.

## Performance

- Pointer position is a motion value; tiles update without React re-renders.

## Notes for AI

- Give every item a label; it is the accessible name and the tooltip.
- Use href for navigation and onSelect for actions, not both.

## Related

- [Expandable tabs](https://lodeui.com/components/expandable-tabs) — Icon tabs where the selected one grows to reveal its label.
- [Tooltip](https://lodeui.com/components/tooltip) — A small label on hover or focus, with a delay that respects intent.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.


---

# Marquee

> Endless, seamless scroller for logos and testimonials that glides to a stop on hover.

Component · Pro · https://lodeui.com/components/marquee

## When to use

- Logo walls, testimonials and tag clouds on landing pages.

## When not to use

- Content people must read or act on: moving text is hard to read.
- More than two marquees in one view.

## Installation

```bash
npx shadcn@latest add @lode/marquee
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Marquee } from "@/components/ui/marquee";

export function Logos({ names }: { names: string[] }) {
  return (
    <Marquee aria-label="Customers" speed={36}>
      {names.map((n) => <span key={n} className="text-lg font-semibold">{n}</span>)}
    </Marquee>
  );
}
```

## API reference

### Marquee

Duplicates its children and scrolls them endlessly. The duplicate is hidden from screen readers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `ReactNode` | – | The items, rendered in a row or column. |
| speed | `number` | `40` | Pixels per second. |
| direction | `"left" \| "right" \| "up" \| "down"` | `"left"` | Scroll direction. |
| pauseOnHover | `boolean` | `true` | Glide to a stop while hovered or focused. |
| fade | `boolean` | `true` | Fade content out at the edges. |
| gap | `number` | `16` | Space between items in px. |
| controls | `boolean` | `true` | A pause / play button, shown on hover and focus. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focus an item or the pause button; scrolling slows to a stop |
| Enter / Space | Pause or play (on the button) |

## Accessibility

- A labelled region; only the first copy is read.
- Pauses on hover and focus, and has a pause button, so moving content can always be stopped.
- Under reduced motion it becomes a static row you can scroll.

## Motion

- Speed eases to zero and back instead of stopping abruptly.
- The loop wraps at exactly one copy's length, so there is no visible jump.

## Responsive behavior

- Fills its container; items keep their natural size.
- Vertical marquees need a height on the container.

## Performance

- One requestAnimationFrame loop writes a transform; no React renders while moving.
- Width is measured with ResizeObserver, so font loading never breaks the loop.

## Notes for AI

- Always pass aria-label.
- Keep items short and visual; put long copy elsewhere.

## Related

- [Orbiting circles](https://lodeui.com/components/orbiting-circles) — Icons orbiting a center on rings, staying upright as they travel.
- [Carousel](https://lodeui.com/components/carousel) — Swipeable slides with arrows, animated dots, keys and pausable autoplay.
- [Animated list](https://lodeui.com/components/animated-list) — A feed where new entries spring in at the top and older ones make room.


---

# Flip card

> A two-sided card that flips in 3D on click, Enter or hover.

Component · Pro · https://lodeui.com/components/flip-card

## When to use

- Reveal details on demand: plan features, flashcards, contact cards.

## When not to use

- Content that must be compared side by side: show both faces.
- Faces containing form fields or buttons: use a dialog.

## Installation

```bash
npx shadcn@latest add @lode/flip-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { FlipCard } from "@/components/ui/flip-card";

export function PlanCard() {
  return (
    <FlipCard
      label="Pro plan"
      className="h-72 w-60"
      front={<div className="p-5">Pro · $12/mo</div>}
      back={<ul className="p-5">…features</ul>}
    />
  );
}
```

## API reference

### FlipCard

Two absolutely positioned faces in a 3D container. Size it with className.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| front / back | `ReactNode` | – | The two faces; keep them non-interactive. |
| label | `string` | – | Names the card; the current face is appended. |
| trigger | `"click" \| "hover"` | `"click"` | Click (and Enter or Space) or hover and focus. |
| axis | `"x" \| "y"` | `"y"` | Flip around the vertical or horizontal axis. |
| flipped / defaultFlipped / onFlippedChange | `boolean` | – | Controlled or uncontrolled state. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Flip (click trigger) |
| Tab | Focus flips it over (hover trigger) |

## Accessibility

- Click mode is a toggle button with aria-pressed.
- The hidden face is aria-hidden, so only the visible side is read.
- Under reduced motion the faces cross-fade instead of rotating.

## Motion

- A spring rotation (stiffness 140, damping 18) with backface hiding.

## Responsive behavior

- Give it explicit dimensions; faces fill the card.

## Performance

- One transformed element; both faces stay mounted.

## Notes for AI

- Always set a height: faces are absolutely positioned.
- Use trigger="hover" only for decorative reveals.

## Related

- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.
- [Morphing dialog](https://lodeui.com/components/morphing-dialog) — A card that morphs into a dialog: cover, title and frame fly to their new places.
- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.


---

# Swipe deck

> Tinder-style card stack: drag, tap or use arrow keys to pass or like, with undo.

Component · Pro · https://lodeui.com/components/swipe-deck

## When to use

- Fast yes / no decisions over a queue: candidates, stays, products, flashcards.

## When not to use

- Choices people need to compare: use a grid.
- Irreversible actions without undo.

## Installation

```bash
npx shadcn@latest add @lode/swipe-deck
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SwipeDeck } from "@/components/ui/swipe-deck";

export function Stays({ homes }: { homes: Home[] }) {
  return (
    <SwipeDeck
      aria-label="Stays"
      items={homes}
      getId={(h) => h.id}
      onSwipe={(home, dir) => dir === "right" && save(home)}
      renderCard={(home) => <HomeCard home={home} />}
    />
  );
}
```

## API reference

### SwipeDeck

A stack of cards with drag, buttons, arrow keys and undo. Generic over the item type.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items / getId / renderCard | `T[] / (item) => string / (item) => ReactNode` | – | Data, a stable id and the card content. |
| onSwipe | `(item, "left" \| "right") => void` | – | Called after a card leaves. |
| empty | `ReactNode` | – | Shown when the deck is empty. |
| leftLabel / rightLabel | `string` | `"Pass" / "Like"` | Button names and the stamps on the card. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Pass or like the top card |
| Backspace or ⌘Z | Undo |
| Tab | Reach the buttons |

## Accessibility

- Every swipe has a button and a key, so dragging is never required.
- Results and remaining count are announced politely.
- Cards behind the top one are aria-hidden.

## Motion

- The top card rotates with the drag and shows the like / pass stamp as you cross the threshold.
- Released past 110px or with enough velocity, it flies off; otherwise it springs back.
- Cards underneath scale up into place.

## Responsive behavior

- Up to 288px wide with a 3:4 card; fits at 320px.

## Performance

- Only three cards render at a time.

## Notes for AI

- onSwipe fires immediately; undo does not call it again, so handle reversals yourself if you persist swipes.

## Related

- [Carousel](https://lodeui.com/components/carousel) — Swipeable slides with arrows, animated dots, keys and pausable autoplay.
- [Like button](https://lodeui.com/components/like-button) — Heart toggle that bursts into particles and rolls its count.
- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.


---

# Like button

> Heart toggle that bursts into particles and rolls its count.

Component · Pro · https://lodeui.com/components/like-button

## When to use

- Likes, favorites and reactions on posts, comments and products.

## When not to use

- Settings: use a switch.

## Installation

```bash
npx shadcn@latest add @lode/like-button
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { LikeButton } from "@/components/ui/like-button";

export function PostActions({ post }: { post: Post }) {
  return <LikeButton count={post.likes} defaultLiked={post.likedByMe} onLikedChange={(liked) => setLike(post.id, liked)} label="Like this post" />;
}
```

## API reference

### LikeButton

A toggle button with a heart, a particle burst and an optional rolling count.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| liked / defaultLiked / onLikedChange | `boolean` | – | Controlled or uncontrolled state. |
| count | `number` | – | Total likes. Uncontrolled, it adjusts by one as you toggle. |
| label | `string` | `"Like"` | What is being liked; the count is appended for screen readers. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Height and icon size. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Toggle |

## Accessibility

- A button with aria-pressed, named with what is liked and the count.
- Color is backed by a filled heart.

## Motion

- The heart springs in from 20%; a ring and ten particles burst outward (600ms).
- The count rolls up or down.
- No burst under reduced motion.

## Responsive behavior

- Inline; three sizes for dense lists and hero actions.

## Performance

- Particles exist only during the burst.

## Notes for AI

- When controlled, pass the already-updated count yourself.

## Related

- [Rating](https://lodeui.com/components/rating) — Interactive or read-only star rating with half stars.
- [Confetti](https://lodeui.com/components/confetti) — Fire a confetti burst from any point, or use the button that bursts from itself.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.


---

# Hold to confirm

> Press and hold to confirm destructive or important actions; letting go cancels.

Component · Pro · https://lodeui.com/components/hold-to-confirm

## When to use

- Destructive or expensive actions that shouldn't fire on a stray click: delete, release, wipe.

## When not to use

- Frequent actions: holding every time is slow.
- Actions that need explanation: use a confirm dialog.

## Installation

```bash
npx shadcn@latest add @lode/hold-to-confirm
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { HoldToConfirm } from "@/components/ui/hold-to-confirm";

export function DeleteProject({ id }: { id: string }) {
  return (
    <HoldToConfirm tone="destructive" onConfirm={() => deleteProject(id)} doneLabel="Deleted">
      Hold to delete
    </HoldToConfirm>
  );
}
```

## API reference

### HoldToConfirm

A button that fills while held and confirms when full; releasing early drains it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onConfirm | `() => void \| Promise<void>` | – | Runs once the hold completes. |
| duration | `number` | `1400` | Hold time in ms. |
| holdingLabel / doneLabel | `ReactNode` | `"Keep holding…" / "Done"` | Labels while held and after. |
| resetAfter | `number` | `2200` | ms before returning to idle; 0 keeps the done state. |
| tone | `"default" \| "destructive"` | `"default"` | Color. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Hold Space or Enter | Fill and confirm |
| Release | Cancel before it fills |

## Accessibility

- Described by a hidden hint: "Press and hold to confirm."
- Confirmation is announced politely.
- Works with keyboard holds, not just pointers.

## Motion

- The fill grows linearly over the duration; releasing drains it in 350ms.
- Labels swap with a short blur and slide; the button presses in slightly while held.

## Responsive behavior

- At least 176px wide; touch holds work and long-press menus are suppressed.

## Performance

- The fill is a motion value; nothing re-renders per frame.

## Notes for AI

- Use for one action at a time; don't put several in a row.

## Related

- [Slide to confirm](https://lodeui.com/components/slide-to-confirm) — Drag the handle to the end to confirm a payment or action; Enter works too.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.


---

# Slide to confirm

> Drag the handle to the end to confirm a payment or action; Enter works too.

Component · Pro · https://lodeui.com/components/slide-to-confirm

## When to use

- Payments, transfers and launches on touch screens, where a deliberate gesture builds trust.

## When not to use

- Desktop-first forms: a button is faster.
- Anything that needs a review step: confirm first.

## Installation

```bash
npx shadcn@latest add @lode/slide-to-confirm
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SlideToConfirm } from "@/components/ui/slide-to-confirm";

export function Pay({ amount }: { amount: string }) {
  return <SlideToConfirm label={`Slide to pay ${amount}`} doneLabel="Payment sent" onConfirm={submitPayment} />;
}
```

## API reference

### SlideToConfirm

A track with a draggable handle; reaching the end confirms.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onConfirm | `() => void \| Promise<void>` | – | Runs when the handle reaches the end or Enter is pressed. |
| label / doneLabel | `string` | `"Slide to confirm" / "Confirmed"` | Track text before and after. |
| resetAfter | `number` | `2400` | ms before resetting; 0 keeps the done state. |
| disabled | `boolean` | – | Dims and locks the handle. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Confirm (on the handle) |

## Accessibility

- The handle is a button that tells keyboard users to press Enter.
- The result is announced politely.

## Motion

- The track text shimmers and fades as you drag; the fill follows the handle.
- Releasing short of 85% springs it back; reaching the end snaps it over and turns it green.

## Responsive behavior

- Fills up to 384px; the drag range is measured, so any width works.

## Performance

- Handle position is a motion value; layout is measured once per resize.

## Notes for AI

- Put the amount in the label so the gesture confirms something specific.

## Related

- [Hold to confirm](https://lodeui.com/components/hold-to-confirm) — Press and hold to confirm destructive or important actions; letting go cancels.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.


---

# Typewriter

> Types phrases out, deletes them and moves on, with a blinking caret.

Component · Pro · https://lodeui.com/components/typewriter

## When to use

- Hero headlines that cycle through use cases.
- Terminal-style install hints.

## When not to use

- Anything people need to read quickly or copy.

## Installation

```bash
npx shadcn@latest add @lode/typewriter
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Typewriter } from "@/components/ui/typewriter";

<h1>
  Build <Typewriter words={["dashboards", "onboarding", "pricing pages"]} /> fast.
</h1>
```

## API reference

### Typewriter

An inline span that types, pauses, deletes and moves to the next phrase.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | – | Phrases in order. |
| typingSpeed / deletingSpeed | `number` | `60 / 32` | ms per character. |
| pause | `number` | `1500` | ms to hold a finished phrase. |
| loop | `boolean` | `true` | Start over after the last phrase; otherwise stop on it. |
| caret | `boolean` | `true` | Blinking caret. |

## Accessibility

- Screen readers get every phrase once, from a hidden list; the typing is aria-hidden.
- Under reduced motion it shows the first phrase, without typing.

## Motion

- Characters appear on a timer; the caret blinks once per second.

## Responsive behavior

- Inline text that wraps with its sentence.

## Performance

- One timeout at a time, cleared on unmount.

## Notes for AI

- Keep phrases a similar length so the layout doesn't jump much.

## Related

- [Word rotate](https://lodeui.com/components/word-rotate) — Cycles words in place with a blur-slide while the width springs to fit.
- [Text scramble](https://lodeui.com/components/text-scramble) — Characters cycle through glyphs and settle into the final text.
- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.


---

# Word rotate

> Cycles words in place with a blur-slide while the width springs to fit.

Component · Pro · https://lodeui.com/components/word-rotate

## When to use

- Rotating one word in a headline: audiences, benefits, product names.

## When not to use

- Whole sentences: use a typewriter or a carousel.

## Installation

```bash
npx shadcn@latest add @lode/word-rotate
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { WordRotate } from "@/components/ui/word-rotate";

<h1>
  Interfaces that feel <WordRotate className="text-brand-text" words={["fast", "alive", "premium"]} />
</h1>
```

## API reference

### WordRotate

An inline span that swaps words on an interval; its width springs to fit each word.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | – | Words in order. |
| interval | `number` | `2200` | ms each word stays. |
| className | `string` | – | Style the rotating word, e.g. a brand color. |

## Accessibility

- Screen readers hear the full list once; the animated word is aria-hidden.
- Pauses while hovered.
- Under reduced motion words cross-fade without moving.

## Motion

- Words slide up and unblur in, slide up and blur out (spring 260 / 26).
- The width animates with layout, so surrounding text glides.

## Responsive behavior

- Inline; wraps with the sentence.

## Performance

- One interval; only the word re-renders.

## Notes for AI

- Words must be unique; they are used as keys.

## Related

- [Typewriter](https://lodeui.com/components/typewriter) — Types phrases out, deletes them and moves on, with a blinking caret.
- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.


---

# Aurora background

> Slow drifting northern-lights glow behind any section.

Component · Pro · https://lodeui.com/components/aurora-background

## When to use

- Hero sections, pricing headers and empty states that need atmosphere.

## When not to use

- Behind dense data or long text: it lowers contrast.
- More than one per page.

## Installation

```bash
npx shadcn@latest add @lode/aurora-background
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AuroraBackground } from "@/components/ui/aurora-background";

export function Hero() {
  return (
    <AuroraBackground className="rounded-3xl">
      <div className="px-6 py-24 text-center">…</div>
    </AuroraBackground>
  );
}
```

## API reference

### AuroraBackground

A container with drifting blurred color fields behind its children. Accepts any div attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | `lime, cyan, violet, pink` | Up to four colors. |
| intensity | `number` | `0.55` | Overall opacity, 0–1. |
| speed | `number` | `18` | Seconds per drift cycle; larger is calmer. |
| fadeBottom | `boolean` | `true` | Fade the glow toward the bottom edge. |

## Accessibility

- The glow is aria-hidden and sits behind content.
- Static under reduced motion.
- Check text contrast over the brightest color.

## Motion

- Each field drifts and breathes on its own mirrored loop, offset by 3 seconds.

## Responsive behavior

- Fills its container at any size.

## Performance

- Four blurred, transform-only layers; GPU composited.

## Notes for AI

- Use theme-friendly colors; the glow sits on var(--background).

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Border beam](https://lodeui.com/components/border-beam) — A light that travels around an element's border.
- [Orbiting circles](https://lodeui.com/components/orbiting-circles) — Icons orbiting a center on rings, staying upright as they travel.


---

# Morphing dialog

> A card that morphs into a dialog: cover, title and frame fly to their new places.

Component · Pro · https://lodeui.com/components/morphing-dialog

## When to use

- Galleries, collections and feature cards where the detail view should feel connected to the card.

## When not to use

- Forms and confirmations: use a dialog.
- Lists of dozens of cards on low-end devices.

## Installation

```bash
npx shadcn@latest add @lode/morphing-dialog
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { MorphingDialog } from "@/components/ui/morphing-dialog";

export function Collection() {
  return (
    <MorphingDialog title="Aurora" subtitle="24 pieces" image="/covers/aurora.jpg">
      <p>Soft gradients and glass surfaces…</p>
    </MorphingDialog>
  );
}
```

## API reference

### MorphingDialog

A card button that expands into a modal dialog with shared-element transitions.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title / subtitle | `string` | – | Shown on the card and in the dialog. |
| image | `string` | – | Cover image URL. |
| colors | `[string, string]` | – | Gradient cover when there's no image. |
| children | `ReactNode` | – | Content shown only when open. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open |
| Esc | Close |
| Tab / Shift+Tab | Cycle focus inside the dialog |

## Accessibility

- A real modal: aria-modal, labelled by the title, focus trapped and returned to the card.
- Page scroll is locked while open.

## Motion

- Frame, cover, title and subtitle share layout IDs and fly between card and dialog (spring, 500ms).
- Body text fades up after the morph.
- Instant under reduced motion.

## Responsive behavior

- Cards up to 272px; the dialog is up to 512px and scrolls inside on short screens.

## Performance

- Dialog content mounts only when open.

## Notes for AI

- Each instance gets its own layout IDs, so many can share a page.

## Related

- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Drawer](https://lodeui.com/components/drawer) — A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.
- [Flip card](https://lodeui.com/components/flip-card) — A two-sided card that flips in 3D on click, Enter or hover.


---

# Animated list

> A feed where new entries spring in at the top and older ones make room.

Component · Pro · https://lodeui.com/components/animated-list

## When to use

- Live feeds: notifications, activity, payments, logs at human speed.

## When not to use

- Long scrollable history: use a timeline or table.

## Installation

```bash
npx shadcn@latest add @lode/animated-list
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AnimatedList } from "@/components/ui/animated-list";

export function Feed({ events }: { events: Event[] }) {
  return <AnimatedList aria-label="Activity" items={events} getId={(e) => e.id} max={5} renderItem={(e) => <EventRow event={e} />} />;
}
```

## API reference

### AnimatedList

A list that animates additions at the top and removals at the bottom.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `T[]` | – | Newest first. |
| getId / renderItem | `(item) => string / (item) => ReactNode` | – | Stable id and row content. |
| max | `number` | `5` | Rows kept on screen. |
| live | `boolean` | `true` | aria-live="polite" so additions are announced. |

## Accessibility

- A list that announces new items politely; turn live off for very chatty feeds.
- Fades only under reduced motion.

## Motion

- New rows drop in with a spring, scale and blur; others glide down via layout animation.
- Old rows shrink out.

## Responsive behavior

- Fills its container; rows are your own markup.

## Performance

- Only max rows render; prepend rather than rebuilding the array.

## Notes for AI

- Keep ids stable or rows will re-animate.

## Related

- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.


---

# Image compare

> Before and after slider with drag, hover and keyboard control.

Component · Pro · https://lodeui.com/components/image-compare

## When to use

- Before / after: photo edits, redesigns, filters, upscaling.

## When not to use

- Images of different sizes or framing: the comparison misleads.

## Installation

```bash
npx shadcn@latest add @lode/image-compare
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ImageCompare } from "@/components/ui/image-compare";

<ImageCompare before="/raw.jpg" after="/graded.jpg" beforeLabel="Raw" afterLabel="Graded" />
```

## API reference

### ImageCompare

Two layers with a draggable divider; the after layer is clipped.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| before / after | `string \| ReactNode` | – | Image URLs or any elements. |
| beforeLabel / afterLabel | `string` | `"Before" / "After"` | Corner labels and image alt text. |
| defaultPosition | `number` | `50` | Starting split, 0–100. |
| aspectRatio | `string` | `"16 / 10"` | CSS aspect ratio. |
| hover | `boolean` | `false` | Follow the mouse without dragging. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Move the divider 2% |
| Shift + ← / → | Move 10% |
| Home / End | All before or all after |

## Accessibility

- The handle is a slider with the split as its value.
- Labels double as alt text for URL images.

## Motion

- The divider follows a spring for a smooth, weighted feel; the handle grows while dragging.

## Responsive behavior

- Fills its container at the given ratio; touch drags work.

## Performance

- A clip-path on one layer; no image redraws.

## Notes for AI

- Use images with identical dimensions and framing.

## Related

- [Carousel](https://lodeui.com/components/carousel) — Swipeable slides with arrows, animated dots, keys and pausable autoplay.
- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Resizable panels](https://lodeui.com/components/resizable-panels) — Panels with draggable, keyboard-resizable dividers and double-click reset.


---

# Carousel

> Swipeable slides with arrows, animated dots, keys and pausable autoplay.

Component · Pro · https://lodeui.com/components/carousel

## When to use

- Featured content, product galleries and onboarding slides.

## When not to use

- Critical content: most people never see slide 3.
- Comparing items: use a grid.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Carousel } from "@/components/ui/carousel";

<Carousel aria-label="Highlights" autoPlay={5000} slides={features.map((f) => <FeatureSlide key={f.id} feature={f} />)} />
```

## API reference

### Carousel

Full-width slides with drag, arrows, dots, keys and optional autoplay.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| slides | `ReactNode[]` | – | One element per slide. |
| loop | `boolean` | `true` | Wrap around at the ends. |
| autoPlay | `number` | `0` | ms between slides; 0 is off. Pauses on hover and focus. |
| aspectRatio | `string` | `"16 / 9"` | Viewport ratio. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Previous or next slide |
| Tab | Reach arrows, dots and pause |

## Accessibility

- Follows the WAI carousel pattern: labelled region, slides announced as "n of m".
- Off-screen slides are inert and hidden.
- Autoplay pauses on hover and focus and has a pause button.

## Motion

- Slides glide with a spring; drags settle by distance plus velocity.
- The active dot stretches into a pill.
- Instant under reduced motion.

## Responsive behavior

- Measures its width, so slides always fill the viewport.

## Performance

- One transformed track; slides stay mounted for instant swipes.

## Notes for AI

- Keep autoplay at 4 seconds or slower.

## Related

- [Swipe deck](https://lodeui.com/components/swipe-deck) — Tinder-style card stack: drag, tap or use arrow keys to pass or like, with undo.
- [Image compare](https://lodeui.com/components/image-compare) — Before and after slider with drag, hover and keyboard control.
- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.


---

# Color picker

> Saturation and hue pickers, hex field, swatches, eyedropper and copy.

Component · Pro · https://lodeui.com/components/color-picker

## When to use

- Brand colors, theme editors, labels and design tools.

## When not to use

- A handful of fixed choices: use swatches in a radio group.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { ColorPicker } from "@/components/ui/color-picker";

export function BrandColor() {
  const [color, setColor] = React.useState("#c6f432");
  return <ColorPicker value={color} onValueChange={setColor} />;
}
```

## API reference

### ColorPicker

Saturation / brightness area, hue slider, hex field, swatches, eyedropper (where supported) and copy.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string (hex)` | – | Controlled or uncontrolled. |
| swatches | `string[]` | – | Preset colors; pass [] to hide. |

### hexToHsv / hsvToHex

Conversion helpers used inside, exported for your own tools.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Saturation (area) or hue (slider) |
| ↑ / ↓ | Brightness (area) or hue (slider) |
| Shift + arrows | Bigger steps |

## Accessibility

- Both pickers are labelled sliders with readable values.
- The hex field is labelled and marks invalid input.
- Swatches are a radio group named by their hex.

## Motion

- Thumbs follow with a light spring; the preview pops when the color changes; swatches scale on hover.

## Responsive behavior

- Up to 272px wide; pointer drags work with touch and continue outside the area.

## Performance

- Conversions are tiny pure functions; no canvas.

## Notes for AI

- Values are lowercase 6-digit hex.

## Related

- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Range slider](https://lodeui.com/components/range-slider) — Two-thumb range with value bubbles and an optional live histogram.


---

# File dropzone

> Drag-and-drop upload with type, size and count checks and per-file progress.

Component · Pro · https://lodeui.com/components/file-dropzone

## When to use

- Uploading attachments, imports, avatars and documents.

## When not to use

- A single small file in a dense form: a plain file input is enough.

## Installation

```bash
npx shadcn@latest add @lode/file-dropzone
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FileDropzone } from "@/components/ui/file-dropzone";

export function Attachments() {
  return (
    <FileDropzone
      accept="image/*,.pdf"
      maxSize={5 * 1024 * 1024}
      upload={(file, onProgress) => uploadWithProgress("/api/upload", file, onProgress)}
    />
  );
}
```

## API reference

### FileDropzone

A drop target and browse button that validates files and lists them with progress.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| accept | `string` | – | Like the input accept attribute: "image/*,.pdf". |
| maxSize / maxFiles / multiple | `number / number / boolean` | `10 MB / 10 / true` | Limits. |
| upload | `(file, onProgress) => Promise<void>` | – | Upload each file and report 0–1. Throw to mark it failed. |
| onFilesChange | `(files: File[]) => void` | – | Accepted files whenever the list changes. |
| hint | `string` | – | Replaces the generated limits line. |

### formatBytes

Formats a byte count as B, KB or MB.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open the file browser |
| Tab | Reach each file's remove button |

## Accessibility

- The drop area is a button described by the limits.
- Rejections are announced with role="alert".
- Each upload is a labelled progressbar; remove buttons name the file.

## Motion

- The cloud bobs and the area glows while dragging over.
- Files slide in, progress springs, a check pops on success, removed rows slide out.

## Responsive behavior

- Up to 448px; long names truncate.

## Performance

- Validation happens before any upload starts.

## Notes for AI

- Validate on the server too; accept is only a hint to browsers.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Empty state](https://lodeui.com/components/empty-state) — Empty, no-results, error, offline, maintenance and rate-limit states with one API.


---

# Scroll progress

> A reading progress bar that springs with the page or any scroll container.

Component · Pro · https://lodeui.com/components/scroll-progress

## When to use

- Long articles, docs and changelogs.
- Scrollable panels where position matters.

## When not to use

- Short pages: it adds noise.

## Installation

```bash
npx shadcn@latest add @lode/scroll-progress
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { ScrollProgress } from "@/components/ui/scroll-progress";

// Whole page
<ScrollProgress className="fixed inset-x-0 top-0 z-50" />

// A scrollable panel
const ref = React.useRef<HTMLDivElement>(null);
<ScrollProgress container={ref} showValue />
<div ref={ref} className="h-96 overflow-y-auto">…</div>
```

## API reference

### ScrollProgress

A bar that scales with scroll position.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| container | `RefObject<HTMLElement>` | – | Element to track; omit for the page. |
| showValue | `boolean` | `false` | Percentage pill that rides the bar. |
| color | `string` | `var(--brand)` | Bar and glow color. |

## Accessibility

- Decorative and aria-hidden: scroll position is already conveyed by the scrollbar.

## Motion

- Springs toward the scroll position (stiffness 220, damping 32).

## Responsive behavior

- Full width of its container; position it fixed for page progress.

## Performance

- A single scaleX transform driven by a motion value.

## Notes for AI

- For page progress, place it fixed at the top with a high z-index.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Reveal](https://lodeui.com/components/reveal) — Scroll-triggered fade-and-slide, plus a Stagger for groups.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.


---

# Dynamic island

> A black pill that morphs its size and shape to fit live activity.

Component · Pro · https://lodeui.com/components/dynamic-island

## When to use

- Showing one live activity compactly: calls, timers, uploads, recording, now playing.

## When not to use

- Several simultaneous notifications: use toasts or an animated list.

## Installation

```bash
npx shadcn@latest add @lode/dynamic-island
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { DynamicIsland } from "@/components/ui/dynamic-island";

<DynamicIsland view={state} announcement={state === "call" ? "Incoming call" : undefined}>
  {state === "call" ? <CallView /> : <IdleView />}
</DynamicIsland>
```

## API reference

### DynamicIsland

A black pill whose size and radius morph to fit the content of the current view.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| view | `string` | – | Key for the current view; changing it triggers the morph. |
| children | `ReactNode` | – | Content for that view. |
| announcement | `string` | – | Spoken politely when the view changes. |

## Accessibility

- Changes are announced through a polite live region when you pass announcement.
- Content inside keeps its own semantics (buttons stay buttons).

## Motion

- The pill animates its size with a bouncy spring (0.28, 600ms).
- Content swaps with scale and blur.
- Instant under reduced motion.

## Responsive behavior

- Sized by its content; keep views under 340px wide for phones.

## Performance

- One layout animation per change.

## Notes for AI

- Give each view a fixed width so the morph has a clear target.

## Related

- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Animated list](https://lodeui.com/components/animated-list) — A feed where new entries spring in at the top and older ones make room.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.


---

# Expandable tabs

> Icon tabs where the selected one grows to reveal its label.

Component · Pro · https://lodeui.com/components/expandable-tabs

## When to use

- Compact toolbars and mobile nav where icons save space but labels prevent guessing.

## When not to use

- Tabs with long labels or more than about 8 options.

## Installation

```bash
npx shadcn@latest add @lode/expandable-tabs
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Bell, Home, User } from "lucide-react";
import { ExpandableTabs } from "@/components/ui/expandable-tabs";

<ExpandableTabs
  aria-label="Account"
  defaultValue="home"
  tabs={[
    { value: "home", label: "Home", icon: <Home /> },
    { value: "alerts", label: "Alerts", icon: <Bell /> },
    { type: "separator" },
    { value: "profile", label: "Profile", icon: <User /> },
  ]}
/>
```

## API reference

### ExpandableTabs

A tablist of icons; the selected tab expands to show its label.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| tabs | `readonly (ExpandableTab<T> \| { type: "separator" })[]` | – | ExpandableTab: { value, label, icon }. |
| value / defaultValue / onValueChange | `T` | – | Controlled or uncontrolled. |
| aria-label | `string` | – | Names the tablist. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Move and select |
| Home / End | First or last tab |

## Accessibility

- role="tablist" with aria-selected and roving tabindex.
- Every tab is named by its label even when collapsed.

## Motion

- The pill slides between tabs and the label unfolds with a spring; neighbours glide aside.

## Responsive behavior

- Hugs its content; collapsed tabs keep it compact on phones.

## Performance

- Layout animation on a handful of buttons.

## Notes for AI

- Use as const on the tabs array to type value as a literal union.

## Related

- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Dock](https://lodeui.com/components/dock) — macOS-style dock whose icons magnify under the pointer, with tooltips, badges and active dots.


---

# Tree view

> Folders and files with animated expand, indent guides and full tree keyboard support.

Component · Pro · https://lodeui.com/components/tree-view

## When to use

- File explorers, nested navigation, org charts and category pickers.

## When not to use

- Flat lists: use a list.
- Very large trees (thousands of nodes): virtualize.

## Installation

```bash
npx shadcn@latest add @lode/tree-view
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TreeView, type TreeNode } from "@/components/ui/tree-view";

const files: TreeNode[] = [{ id: "src", name: "src", children: [{ id: "app", name: "app.tsx" }] }];

<TreeView aria-label="Project files" data={files} defaultExpanded={["src"]} onSelect={(node) => open(node.id)} />
```

## API reference

### TreeView

A tree of nodes with expand and select. Folders toggle; leaves select.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `TreeNode[]` | – | { id, name, icon?, children?, meta? }. |
| defaultExpanded | `string[]` | – | Ids open at first render. |
| selected / onSelect | `string \| null / (node) => void` | – | Controlled selection. |
| aria-label | `string` | `"Files"` | Names the tree. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Previous or next visible item |
| → | Open a folder, or move into it |
| ← | Close a folder, or move to its parent |
| Home / End | First or last item |
| Enter / Space | Toggle a folder or select a file |

## Accessibility

- Follows the WAI tree pattern: tree, treeitem and group roles with aria-level, aria-expanded and aria-selected.
- Roving tabindex: Tab enters the tree once.

## Motion

- Folders open by animating height; chevrons rotate; the selection bar glides between items.

## Responsive behavior

- Up to 320px by default; set className to fill a sidebar.

## Performance

- Closed folders don't render their children.

## Notes for AI

- Ids must be unique across the whole tree.

## Related

- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.
- [Context menu](https://lodeui.com/components/context-menu) — Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.


---

# Context menu

> Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.

Component · Pro · https://lodeui.com/components/context-menu

## When to use

- Secondary actions on files, rows, canvas objects and messages.

## When not to use

- The only way to reach an action: also offer a visible button or menu.

## Installation

```bash
npx shadcn@latest add @lode/context-menu
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Copy, Trash2 } from "lucide-react";
import { ContextMenu } from "@/components/ui/context-menu";

<ContextMenu
  aria-label="report.pdf"
  items={[
    { id: "copy", label: "Duplicate", icon: <Copy />, shortcut: "⌘D", onSelect: duplicate },
    { type: "separator", id: "s" },
    { id: "delete", label: "Move to trash", icon: <Trash2 />, destructive: true, onSelect: trash },
  ]}
>
  <FileTile />
</ContextMenu>
```

## API reference

### ContextMenu

Wraps an area; opens a menu at the pointer on right-click or long-press, or at the area on Shift+F10.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `ContextMenuEntry[]` | – | Actions { id, label, icon?, shortcut?, destructive?, disabled?, onSelect? }, separators and labels. |
| children | `ReactNode` | – | The area that responds. |
| aria-label | `string` | – | Names the area, e.g. the file name. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Shift+F10 or Menu key | Open from the focused area |
| ↑ / ↓ | Move between actions |
| Home / End | First or last action |
| Letters | Jump to an action |
| Enter / Space | Run |
| Esc or Tab | Close |

## Accessibility

- The area is focusable, has aria-haspopup="menu" and a hint about how to open it.
- The menu is role="menu" with menuitem rows; disabled items are skipped.
- Focus returns to the area after closing.

## Motion

- Scales in from the click point; the highlight glides between rows.

## Responsive behavior

- Kept inside the viewport near edges; long-press opens it on touch.

## Performance

- Rendered in a portal only while open; closes on scroll and resize.

## Notes for AI

- Put the most destructive action last.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Tree view](https://lodeui.com/components/tree-view) — Folders and files with animated expand, indent guides and full tree keyboard support.


---

# Hover card

> A rich preview that appears on hover or focus and stays while you move into it.

Component · Pro · https://lodeui.com/components/hover-card

## When to use

- Previews behind links and mentions: people, repos, products, citations.

## When not to use

- Essential information or actions: touch users never hover.
- Plain labels: use a tooltip.

## Installation

```bash
npx shadcn@latest add @lode/hover-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { HoverCard } from "@/components/ui/hover-card";

<HoverCard trigger={<a href="/u/ada">@ada</a>}>
  <ProfilePreview user={ada} />
</HoverCard>
```

## API reference

### HoverCard

Opens after a delay on hover or focus and stays open while the pointer is inside it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| trigger | `ReactNode` | – | Usually a link; it keeps working as a link. |
| children | `ReactNode` | – | The preview. |
| side / align | `"top" \| "bottom" / "start" \| "center" \| "end"` | `"bottom" / "center"` | Placement. |
| openDelay / closeDelay | `number` | `350 / 180` | ms. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Focusing the trigger opens the card |
| Esc | Close |

## Accessibility

- The card describes the trigger via aria-describedby while open.
- Opens on keyboard focus as well as hover.
- Treat it as a bonus: the link should still make sense without it.

## Motion

- Scales and slides in from its side (spring 420 / 30).

## Responsive behavior

- 288px wide; touch taps follow the link instead of opening the card.

## Performance

- Content renders only while open.

## Notes for AI

- Don't put buttons people need inside a hover card.

## Related

- [Tooltip](https://lodeui.com/components/tooltip) — A small label on hover or focus, with a delay that respects intent.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Profile card](https://lodeui.com/components/profile-card) — A portrait whose details rise into a glass panel on hover.


---

# Orbiting circles

> Icons orbiting a center on rings, staying upright as they travel.

Component · Pro · https://lodeui.com/components/orbiting-circles

## When to use

- Showing integrations, a platform's ecosystem or connected tools on a landing page.

## When not to use

- Data people need to read: the icons move.

## Installation

```bash
npx shadcn@latest add @lode/orbiting-circles
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { GitBranch, Mail, Zap } from "lucide-react";
import { OrbitingCircles } from "@/components/ui/orbiting-circles";

<OrbitingCircles
  label="Integrations: Git and email"
  center={<Zap />}
  rings={[{ radius: 80, items: [<GitBranch key="g" />, <Mail key="m" />] }]}
/>
```

## API reference

### OrbitingCircles

Concentric rings of items rotating around a center; each item counter-rotates to stay upright.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rings | `OrbitRing[]` | – | { radius, items, duration?, reverse?, itemSize? }. |
| center | `ReactNode` | – | Middle content, e.g. your logo. |
| paths | `boolean` | `true` | Dashed orbit lines. |
| label | `string` | – | What the picture shows; read as one image. |

## Accessibility

- Exposed as one image with your label; the moving parts are hidden.
- Static under reduced motion.

## Motion

- Each ring spins linearly at its own speed; reverse rings counter-rotate.

## Responsive behavior

- Sized from the largest ring; never wider than its container.

## Performance

- One rotation per ring and per item, all transforms.

## Notes for AI

- List the integrations in label so screen-reader users get the same information.

## Related

- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Aurora background](https://lodeui.com/components/aurora-background) — Slow drifting northern-lights glow behind any section.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.


---

# Flip clock

> Split-flap countdown where every digit flips like a departures board.

Component · Pro · https://lodeui.com/components/flip-clock

## When to use

- Launch countdowns, sales ending, event starts and short timers.

## When not to use

- Precise timing in tools: use plain text.

## Installation

```bash
npx shadcn@latest add @lode/flip-clock
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { FlipClock } from "@/components/ui/flip-clock";

// To a moment
<FlipClock to="2026-11-01T17:00:00Z" />

// A duration from mount
<FlipClock seconds={15 * 60} units={["minutes", "seconds"]} onComplete={expire} />
```

## API reference

### FlipClock

A split-flap countdown. Renders dashes until the browser has the time, so server and client agree.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| to | `Date \| string` | – | Count down to this moment. |
| seconds | `number` | – | Or count down this many seconds from mount. |
| units | `("days" \| "hours" \| "minutes" \| "seconds")[]` | `all four` | Units shown, largest first. |
| onComplete | `() => void` | – | Called once at zero. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Digit size. |

## Accessibility

- role="timer" with a readable label like "02 days, 07 hours … remaining".
- Digits are aria-hidden; the label carries the value.
- Flaps are skipped under reduced motion.

## Motion

- The top flap folds down (250ms), then the bottom flap falls into place (250ms).

## Responsive behavior

- Wraps on very narrow screens; use size="sm" on phones.

## Performance

- Ticks four times a second; only changed digits animate.

## Notes for AI

- Change the key to restart a duration timer.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Date range picker](https://lodeui.com/components/date-range-picker) — Pick a start and an end on a calendar that previews the range as you move.


---

# Contribution graph

> A year of activity as a grid of days with tooltips and keyboard exploring.

Component · Pro · https://lodeui.com/components/contribution-graph

## When to use

- Activity over a year: commits, workouts, streaks, usage.

## When not to use

- Short ranges: use a bar chart.

## Installation

```bash
npx shadcn@latest add @lode/contribution-graph
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ContributionGraph } from "@/components/ui/contribution-graph";

<ContributionGraph data={days} unit="commits" />  // days: { date: "2026-03-04", count: 7 }[]
```

## API reference

### ContributionGraph

Weeks as columns and days as rows, shaded by count, with a live caption.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ date: string; count: number }[]` | – | One entry per day (YYYY-MM-DD), oldest first; missing days count as 0. |
| thresholds | `[number, number, number, number]` | `[1, 4, 8, 12]` | Counts where the shade steps up. |
| color | `string` | `"#22c55e"` | Base color; shades are mixed toward var(--muted). |
| unit | `string` | `"contributions"` | Word used in labels. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Enter the grid |
| ← / → | Previous or next week |
| ↑ / ↓ | Previous or next day |

## Accessibility

- A grid of cells, each labelled like "7 commits on Mar 4, 2026".
- The caption reads the focused or hovered day politely.
- Shades are backed by numbers, never color alone.

## Motion

- Cells pop in column by column; hovered cells grow; the caption swaps with a short slide.

## Responsive behavior

- Scrolls horizontally on narrow screens.

## Performance

- Weeks are computed once per data change; dates use UTC so time zones never shift days.

## Notes for AI

- Pass dates as YYYY-MM-DD strings.

## Related

- [Heatmap](https://lodeui.com/components/heatmap) — A color-scaled grid with row and column tracking, for cohorts and schedules.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.


---

# Resizable panels

> Panels with draggable, keyboard-resizable dividers and double-click reset.

Component · Pro · https://lodeui.com/components/resizable-panels

## When to use

- Editors, inboxes, IDE-like layouts and side-by-side comparisons.

## When not to use

- Phone layouts: stack panels instead.

## Installation

```bash
npx shadcn@latest add @lode/resizable-panels
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ResizablePanels } from "@/components/ui/resizable-panels";

<div className="h-[600px]">
  <ResizablePanels
    panels={[
      { id: "nav", label: "Sidebar", defaultSize: 22, minSize: 15, content: <Sidebar /> },
      { id: "main", label: "Editor", content: <Editor /> },
    ]}
    onResize={(sizes) => save("layout", sizes)}
  />
</div>
```

## API reference

### ResizablePanels

A row or column of panels separated by draggable dividers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| panels | `ResizablePanel[]` | – | { id, label, content, defaultSize?, minSize? } in percent. |
| direction | `"horizontal" \| "vertical"` | `"horizontal"` | Layout axis. |
| onResize | `(sizes: number[]) => void` | – | Final sizes after a drag or key press, for saving. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → (or ↑ / ↓) | Move the focused divider 2% |
| Shift + arrows | Move 10% |
| Home / End | Collapse to a minimum |
| Enter | Reset to the default sizes |

## Accessibility

- Dividers are focusable separators with value, min and max, named after the panels they resize.
- Double-click or Enter resets.

## Motion

- Keyboard and reset changes spring into place; drags track the pointer exactly.

## Responsive behavior

- Needs a height on its parent; consider stacking below 768px.

## Performance

- Sizes are percentages on flex-basis; only the two neighbours change per drag.

## Notes for AI

- Persist sizes from onResize and pass them back as defaultSize.

## Related

- [Image compare](https://lodeui.com/components/image-compare) — Before and after slider with drag, hover and keyboard control.
- [Drawer](https://lodeui.com/components/drawer) — A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.
- [Tree view](https://lodeui.com/components/tree-view) — Folders and files with animated expand, indent guides and full tree keyboard support.


---

# Drawer

> A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.

Component · Pro · https://lodeui.com/components/drawer

## When to use

- Mobile-first sheets: filters, options, quick edits and confirmations.

## When not to use

- Desktop forms with many fields: use a dialog or side sheet.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Drawer } from "@/components/ui/drawer";

export function SizePicker() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Choose a size</Button>
      <Drawer open={open} onOpenChange={setOpen} title="Choose a size" footer={<Button onClick={() => setOpen(false)}>Done</Button>}>
        …
      </Drawer>
    </>
  );
}
```

## API reference

### Drawer

A modal bottom sheet in a portal; drag the handle or header down to close.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open / onOpenChange | `boolean / (open) => void` | – | Controlled visibility. |
| title / description | `ReactNode` | – | Label and describe the dialog. |
| children / footer | `ReactNode` | – | Scrolling body and a pinned action row. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Esc | Close |
| Tab / Shift+Tab | Cycle focus inside |

## Accessibility

- A modal dialog, labelled and described, with a focus trap and focus return.
- Dragging is optional: Esc, the overlay and your buttons all close it.

## Motion

- Slides up with a spring; drag down past 120px or flick to dismiss; it resists dragging upward.

## Responsive behavior

- Full width on phones, 512px centered on larger screens; respects the home-indicator safe area.

## Performance

- Nothing renders while closed.

## Notes for AI

- Only the handle and header start drags, so the body can scroll normally.

## Related

- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Morphing dialog](https://lodeui.com/components/morphing-dialog) — A card that morphs into a dialog: cover, title and frame fly to their new places.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.


---

# Confetti

> Fire a confetti burst from any point, or use the button that bursts from itself.

Component · Pro · https://lodeui.com/components/confetti

## When to use

- Celebrating real milestones: first project, payment, launch, streaks.

## When not to use

- Routine actions: it loses meaning fast.

## Installation

```bash
npx shadcn@latest add @lode/confetti
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { confetti, ConfettiButton } from "@/components/ui/confetti";

<ConfettiButton onClick={publish}>Publish</ConfettiButton>

// Anywhere, e.g. after a successful payment
confetti({ x: window.innerWidth / 2, y: 200, count: 160 });
```

## API reference

### confetti

Fires a burst on a temporary full-screen canvas that removes itself when done.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| x / y | `number` | `screen center` | Origin in viewport pixels. |
| count | `number` | `120` | Pieces. |
| angle / spread | `number` | `-90 / 70` | Direction and fan in degrees (-90 is up). |
| velocity | `number` | `14` | Starting speed. |
| colors | `string[]` | – | Piece colors. |

### ConfettiButton

A button that bursts from its own center, then calls your onClick. Accepts button attributes plus options.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `ConfettiOptions` | – | Passed to confetti(). |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Press the button |

## Accessibility

- The canvas is aria-hidden and ignores the pointer.
- Does nothing when the person prefers reduced motion.

## Motion

- Pieces tumble with gravity and drag, then fade as they fall.

## Responsive behavior

- Covers the viewport at device pixel ratio up to 2.

## Performance

- Plain canvas with one animation frame loop; no dependencies; cleaned up automatically.

## Notes for AI

- Call confetti() only from user actions or real successes, not on page load.

## Related

- [Like button](https://lodeui.com/components/like-button) — Heart toggle that bursts into particles and rolls its count.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.


---

# Range slider

> Two-thumb range with value bubbles and an optional live histogram.

Component · Pro · https://lodeui.com/components/range-slider

## When to use

- Filtering by a range: price, dates as numbers, sizes, scores.

## When not to use

- One value: use a slider.
- Exact numbers: add inputs beside it.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { RangeSlider } from "@/components/ui/range-slider";

export function PriceFilter() {
  const [range, setRange] = React.useState<[number, number]>([100, 400]);
  return <RangeSlider aria-label="Price" min={0} max={600} step={10} value={range} onValueChange={setRange} format={(n) => `$${n}`} histogram={counts} />;
}
```

## API reference

### RangeSlider

Two thumbs on one track, with bubbles while active and an optional histogram.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `[number, number]` | – | Controlled or uncontrolled. |
| onValueCommit | `([number, number]) => void` | – | Once per drag end or key press. |
| min / max / step / minGap | `number` | `0 / 100 / 1 / 0` | Range, snapping and minimum distance between thumbs. |
| format | `(n) => string` | `String` | Labels and aria-valuetext. |
| histogram | `number[]` | – | Bars spread evenly across the range; bars inside the selection highlight. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / ↓ | Decrease the focused thumb |
| → / ↑ | Increase |
| Page Up / Page Down | 10% steps |
| Home / End | Min or max |

## Accessibility

- Each thumb is a labelled slider ("Price minimum", "Price maximum") whose limits respect the other thumb.
- Clicking the track moves the nearest thumb and focuses it.

## Motion

- Histogram bars grow in a wave and change color as the range moves; thumbs grow while active; bubbles pop above them.

## Responsive behavior

- Fills its container; touch drags work anywhere on the track.

## Performance

- Drags use window listeners and only update the two values.

## Notes for AI

- Fetch results in onValueCommit, not onValueChange.

## Related

- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.


---

# Wheel picker

> iOS-style scroll wheel with 3D rows, snapping and keyboard support.

Component · Pro · https://lodeui.com/components/wheel-picker

## When to use

- Picking times, dates and quantities on touch screens.
- Short ordered lists where scrolling feels natural.

## When not to use

- Long lists people search: use a combobox.
- Desktop forms where typing is faster.

## Installation

```bash
npx shadcn@latest add @lode/wheel-picker
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { WheelPicker } from "@/components/ui/wheel-picker";

const hours = Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: String(i + 1) }));

export function HourPicker() {
  const [hour, setHour] = React.useState("9");
  return <WheelPicker aria-label="Hour" options={hours} value={hour} onValueChange={setHour} />;
}
```

## API reference

### WheelPicker

A snapping scroll list drawn as a 3D wheel; the centered row is the value.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `readonly { value: T; label: string }[]` | – | Rows in order. |
| value / defaultValue / onValueChange | `T` | – | Controlled or uncontrolled; fires after scrolling settles. |
| itemHeight / visibleCount | `number` | `36 / 5` | Row height and rows shown (odd). |
| aria-label | `string` | – | Required: names the wheel. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Previous or next option |
| Page Up / Page Down | Five at a time |
| Home / End | First or last |

## Accessibility

- A listbox using aria-activedescendant; the centered option is aria-selected.
- Each wheel needs its own label (Hour, Minute…).

## Motion

- Rows tilt and fade with distance from the center; scroll snapping settles each flick; keys scroll smoothly.

## Responsive behavior

- Native scrolling, so flicks feel right on touch; combine several wheels in a flex row.

## Performance

- Transforms are recalculated from scroll position; fine for lists up to a few hundred rows.

## Notes for AI

- onValueChange fires after scrolling stops (110ms), not on every row passed.

## Related

- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.
- [Date range picker](https://lodeui.com/components/date-range-picker) — Pick a start and an end on a calendar that previews the range as you move.


---

# Toggle group

> A row of toggle buttons for one choice (alignment) or several (bold, italic), with a sliding pill.

Component · Pro · https://lodeui.com/components/toggle-group

## When to use

- Formatting toolbars: bold / italic (many) or alignment (one).
- View switches with icons where a segmented control feels too heavy.

## When not to use

- Form choices with descriptions: use a radio group.
- Navigation: use tabs.

## Installation

```bash
npx shadcn@latest add @lode/toggle-group
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AlignCenter, AlignLeft, Bold, Italic } from "lucide-react";
import { ToggleGroup } from "@/components/ui/toggle-group";

<ToggleGroup aria-label="Alignment" defaultValue="left" items={[
  { value: "left", label: "Left", icon: <AlignLeft />, iconOnly: true },
  { value: "center", label: "Center", icon: <AlignCenter />, iconOnly: true },
]} />

<ToggleGroup aria-label="Style" type="multiple" defaultValue={["bold"]} items={[
  { value: "bold", label: "Bold", icon: <Bold />, iconOnly: true },
  { value: "italic", label: "Italic", icon: <Italic />, iconOnly: true },
]} />
```

## API reference

### ToggleGroup

A group of toggle buttons. Single mode allows none or one; multiple mode any number.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `readonly { value; label; icon?; iconOnly?; disabled? }[]` | – | iconOnly hides the text but keeps it as the accessible name. |
| type | `"single" \| "multiple"` | `"single"` | Changes value to T \| null or T[]. |
| value / defaultValue / onValueChange | `T \| null  /  T[]` | – | Controlled or uncontrolled. |
| size | `"sm" \| "md"` | `"md"` | Button height. |
| aria-label | `string` | – | Required: names the group. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move into and out of the group |
| ← / → | Move between buttons |
| Home / End | First or last button |
| Enter / Space | Toggle |

## Accessibility

- A labelled group of toggle buttons with aria-pressed.
- Icon-only buttons are named and show a tooltip.

## Motion

- Single mode: the pill slides to the new choice. Multiple mode: each pill pops in.

## Responsive behavior

- Hugs its content.

## Performance

- Plain buttons; one animated pill.

## Notes for AI

- Pass type="multiple" with an array value, or leave it single with a string.

## Related

- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.


---

# Mention input

> A textarea that suggests people as you type @ and inserts their handle.

Component · Pro · https://lodeui.com/components/mention-input

## When to use

- Comments, chat and task descriptions where people tag teammates.

## When not to use

- Rich text editing with formatting: use an editor.

## Installation

```bash
npx shadcn@latest add @lode/mention-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { MentionInput } from "@/components/ui/mention-input";

<MentionInput users={members} onSubmit={(text) => postComment(text)} />
```

## API reference

### MentionInput

A textarea with an @-triggered people list. Inserts @handle followed by a space.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| users | `{ id; name; handle; hue? }[]` | – | People to suggest; matched on name and handle. |
| value / defaultValue / onValueChange | `string` | – | Controlled or uncontrolled text. |
| onSubmit | `(value) => void` | – | Called on ⌘/Ctrl+Enter. |
| placeholder / rows | `string / number` | `— / 3` | Textarea options. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| @ | Start a mention |
| ↑ / ↓ | Move through people |
| Enter or Tab | Insert the highlighted person |
| Esc | Close the list |
| ⌘Enter / Ctrl+Enter | Submit |

## Accessibility

- The textarea is a combobox controlling a listbox with aria-activedescendant.
- Focus never leaves the textarea while picking.

## Motion

- The list springs in under the field; the highlight glides between people.

## Responsive behavior

- Fills its container; the list is 256px wide.

## Performance

- Shows at most six matches; filtering is a substring match.

## Notes for AI

- Parse mentions on the server with /@([\\w.-]+)/ and map handles to user ids.

## Related

- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.
- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.


---

# Password strength

> New-password field with show / hide, a four-step meter and a live rules checklist.

Component · Pro · https://lodeui.com/components/password-strength

## When to use

- Sign-up and change-password forms.

## When not to use

- Sign-in forms: don't hint at rules when people enter an existing password.

## Installation

```bash
npx shadcn@latest add @lode/password-strength
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PasswordStrength } from "@/components/ui/password-strength";

<PasswordStrength name="password" onValueChange={setPassword} />
```

## API reference

### PasswordStrength

A labelled new-password field with reveal, meter and checklist.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `string` | – | Controlled or uncontrolled. |
| rules | `{ label; test(password) }[]` | `defaultRules` | Your policy; the meter counts passed rules (up to four). |
| label / id / name | `string` | `"Password"` | Field attributes. |

### defaultRules

12+ characters, mixed case, a number, a symbol.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the show / hide button |

## Accessibility

- autocomplete="new-password" so password managers offer to generate one.
- The strength word is announced politely; each rule reads as met or not met.
- Reveal is a toggle button with aria-pressed.

## Motion

- Meter segments fill in sequence; each met rule pops its check.

## Responsive behavior

- Up to 384px wide.

## Performance

- Rules run on each keystroke; keep tests simple.

## Notes for AI

- Enforce the same rules on the server; the meter is guidance only.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Sign in](https://lodeui.com/blocks/sign-in) — Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.


---

# Phone input

> Phone field with a searchable country picker that formats numbers as you type.

Component · Pro · https://lodeui.com/components/phone-input

## When to use

- Collecting phone numbers for sign-up, 2FA and delivery.

## When not to use

- Countries not in the list: extend the exported countries array first.

## Installation

```bash
npx shadcn@latest add @lode/phone-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PhoneInput } from "@/components/ui/phone-input";

<PhoneInput defaultCountry="GB" onValueChange={(e164, country) => setPhone(e164)} />
```

## API reference

### PhoneInput

Country picker plus a national number field formatted with the country's grouping.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultCountry | `string` | `"US"` | ISO country code. |
| onValueChange | `(e164: string, country: Country) => void` | – | Called with +<dial><digits> on every change. |
| label | `string` | `"Phone number"` | Field label. |

### countries / formatNational

The country list (code, name, dial, flag, digit groups) and the formatter, exported so you can extend them.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open the country list |
| ↑ / ↓ | Move through countries |
| Enter | Pick |
| Esc | Close |

## Accessibility

- The country button names the current country and code.
- The search box is a combobox for the country listbox.
- The number uses inputMode="tel" and autocomplete="tel-national".

## Motion

- The list springs open; a check pops in when the number is complete.

## Responsive behavior

- Up to 384px; the list is 288px and scrolls.

## Performance

- Formatting is a tiny pure function.

## Notes for AI

- Store the E.164 string; validate with your SMS provider before trusting it.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Two-factor verification](https://lodeui.com/blocks/two-factor) — Authenticator code with resend timer, backup-code fallback and success state.


---

# Credit card input

> Card fields with brand detection, Luhn validation and a live card that flips for the CVC.

Component · Pro · https://lodeui.com/components/credit-card-input

## When to use

- Custom checkout forms where you collect card details yourself through a PCI-compliant tokenizer.

## When not to use

- If your payment provider offers hosted fields (Stripe Elements, Dodo checkout), use those: raw card numbers shouldn't touch your servers.

## Installation

```bash
npx shadcn@latest add @lode/credit-card-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CreditCardInput } from "@/components/ui/credit-card-input";

<CreditCardInput onChange={(card) => setCanPay(card.valid)} />
```

## API reference

### CreditCardInput

Number, name, expiry and CVC fields with a live card preview.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onChange | `(details: CardDetails) => void` | – | { number, name, expiry, cvc, brand, valid } on every change. |

### detectBrand / luhn

Brand detection from the first digits and the Luhn checksum, exported for reuse.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between fields |

## Accessibility

- Every field has a label and the right autocomplete (cc-number, cc-name, cc-exp, cc-csc).
- Errors appear after leaving a field, with aria-invalid and a message.

## Motion

- The card's colors change with the brand; it flips to the back while the CVC is focused.

## Responsive behavior

- The preview scales to the field width (max 320px).

## Performance

- No network calls; formatting and validation are local.

## Notes for AI

- Never log or store card details. Pass them straight to your provider's tokenization API.

## Related

- [Payment card](https://lodeui.com/components/payment-card) — A wallet card with a holographic sheen that follows the pointer and a number reveal.
- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Coupon input](https://lodeui.com/components/coupon-input) — Promo code field that validates, shows a removable ticket and shakes on errors.


---

# Signature pad

> Draw a signature with mouse, pen or finger; strokes thin with speed. Undo and clear.

Component · Pro · https://lodeui.com/components/signature-pad

## When to use

- Agreements, delivery confirmations and consent forms.

## When not to use

- As the only way to sign: offer a typed-name alternative for people who can't draw.

## Installation

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

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SignaturePad } from "@/components/ui/signature-pad";

<SignaturePad onChange={(png) => setSignature(png)} />
```

## API reference

### SignaturePad

A canvas you draw on with any pointer. Lines thin out as you move faster.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onChange | `(dataUrl: string \| null) => void` | – | A PNG data URL after each stroke; null when cleared. |
| color | `string` | – | Ink color; defaults to the text color. |
| height | `number` | `180` | Pad height in px. |
| label | `string` | `"Signature"` | Heading and accessible name. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Undo and Clear |

## Accessibility

- The canvas is an image labelled as empty or drawn.
- The hint tells people without a pointer to use a typed alternative.

## Motion

- The "Sign here" hint fades out with the first stroke.

## Responsive behavior

- Fills its container; redraws crisply on resize and high-DPI screens.

## Performance

- Strokes are kept as points and redrawn only on resize or undo.

## Notes for AI

- Upload the PNG data URL as a file; don't store it inline in a database row.

## Related

- [Inline edit](https://lodeui.com/components/inline-edit) — Text that becomes a field on click; Enter saves with validation, Escape cancels.
- [File dropzone](https://lodeui.com/components/file-dropzone) — Drag-and-drop upload with type, size and count checks and per-file progress.


---

# Knob

> A rotary dial like on audio gear: drag, scroll or use the arrow keys.

Component · Pro · https://lodeui.com/components/knob

## When to use

- Audio, video and creative tools; compact controls for ranges.

## When not to use

- Precise values in forms: use a number field or slider.

## Installation

```bash
npx shadcn@latest add @lode/knob
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Knob } from "@/components/ui/knob";

<Knob label="Gain" defaultValue={60} format={(n) => `${Math.round(n)}%`} />
```

## API reference

### Knob

A dial with a value arc. Drag up or right to increase.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `number` | `50` | Controlled or uncontrolled. |
| min / max / step | `number` | `0 / 100 / 1` | Range and snapping. |
| size | `number` | `96` | Diameter in px. |
| label / format | `string / (n) => string` | – | Name and value text. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / → | Increase by step |
| ↓ / ← | Decrease by step |
| Page Up / Page Down | 10% steps |
| Home / End | Min or max |

## Accessibility

- A labelled slider with min, max, now and formatted valuetext.

## Motion

- The dial and arc follow a spring; the knob presses in while dragged.

## Responsive behavior

- Fixed size; scroll-wheel works where available.

## Performance

- One spring drives rotation and arc.

## Notes for AI

- Use format for units so screen readers hear them.

## Related

- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Range slider](https://lodeui.com/components/range-slider) — Two-thumb range with value bubbles and an optional live histogram.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.


---

# Inline edit

> Text that becomes a field on click; Enter saves with validation, Escape cancels.

Component · Pro · https://lodeui.com/components/inline-edit

## When to use

- Renaming things in place: projects, files, titles, settings values.

## When not to use

- Long text or several fields at once: use a form.

## Installation

```bash
npx shadcn@latest add @lode/inline-edit
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { InlineEdit } from "@/components/ui/inline-edit";

<InlineEdit label="Project name" value={project.name} onSave={(name) => rename(project.id, name)} className="text-xl font-semibold" />
```

## API reference

### InlineEdit

Shows text as a button; clicking turns it into a field with save and cancel.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` | – | Current text. |
| onSave | `(value) => void \| Promise<void>` | – | Throw with a message to show an error and keep editing. |
| label | `string` | – | Accessible name, e.g. "Project name". |
| validate | `(value) => string \| null` | – | Return a message to block saving. |
| placeholder | `string` | `"Untitled"` | Shown when empty. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Start editing (on the text) |
| Enter | Save |
| Esc | Cancel |

## Accessibility

- The text is a button named "<label>: <value>. Edit".
- Errors use role="alert"; success is announced; focus returns to the text after saving or cancelling.

## Motion

- The text and field cross-fade; a check pops after saving; the pencil fades in on hover.

## Responsive behavior

- The field grows with the text.

## Performance

- Only one field exists at a time.

## Notes for AI

- Make onSave throw on server errors so the field stays open.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.


---

# Calendar

> Single-date calendar with month and year jumping, marked days and grid keyboard support.

Component · Pro · https://lodeui.com/components/calendar

## When to use

- Picking one date: deadlines, birthdays, bookings.

## When not to use

- Ranges: use the date range picker.
- Dates far in the past like birth years: an input is faster.

## Installation

```bash
npx shadcn@latest add @lode/calendar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Calendar } from "@/components/ui/calendar";

<Calendar value={date} onValueChange={setDate} today={today} isDisabled={(d) => d.getDay() === 0} marked={eventDays} />
```

## API reference

### Calendar

A month grid with a month/year view. Pass today so server and browser render the same.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `Date \| null` | – | Controlled or uncontrolled. |
| today | `Date` | – | Highlighted as today. |
| isDisabled | `(date) => boolean` | – | Disable days, e.g. weekends. |
| marked | `Date[]` | – | Days that get a dot. |
| defaultMonth | `Date` | – | Month shown first. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Previous or next day |
| ↑ / ↓ | Previous or next week |
| Home / End | Start or end of the week |
| Page Up / Page Down | Previous or next month |
| Enter / Space | Pick the focused day |

## Accessibility

- A grid of labelled day cells with aria-selected and aria-current="date".
- The month heading is announced when it changes.
- Disabled days are marked aria-disabled and struck through.

## Motion

- Months slide in the direction you move; the selection pill glides between days; the month picker scales in.

## Responsive behavior

- 296px wide.

## Performance

- 42 buttons per month; no date library.

## Notes for AI

- Dates are local calendar dates; convert at your API boundary.

## Related

- [Date range picker](https://lodeui.com/components/date-range-picker) — Pick a start and an end on a calendar that previews the range as you move.
- [Time slot picker](https://lodeui.com/components/time-slot-picker) — Bookable time slots where picking one slides out a confirm button.
- [Meeting scheduler](https://lodeui.com/blocks/meeting-scheduler) — Book a call: host card, calendar, time slots and confirmation.


---

# Time slot picker

> Bookable time slots where picking one slides out a confirm button.

Component · Pro · https://lodeui.com/components/time-slot-picker

## When to use

- Booking calls, demos and appointments.

## When not to use

- Free-form times: use a wheel picker or input.

## Installation

```bash
npx shadcn@latest add @lode/time-slot-picker
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TimeSlotPicker } from "@/components/ui/time-slot-picker";

<TimeSlotPicker title="Thursday, Oct 15" timezone="London (GMT+1)" slots={slots} onConfirm={(slot) => book(slot)} />
```

## API reference

### TimeSlotPicker

A list of slots; the chosen one gets a confirm button beside it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| slots | `{ value; label; unavailable? }[]` | – | Slots in order. |
| value / defaultValue / onValueChange | `string \| null` | – | Selected slot. |
| onConfirm | `(value) => void` | – | Confirm button pressed. |
| title / timezone / confirmLabel | `string` | – | Header text and button label. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move between available slots |
| Enter / Space | Choose |
| Tab | Reach the confirm button |

## Accessibility

- A labelled radio group; unavailable slots are disabled and struck through.
- Booking is announced.

## Motion

- The confirm button grows out of the chosen slot and the slot shrinks to make room.

## Responsive behavior

- Up to 320px; the list scrolls past 320px tall.

## Performance

- Layout animation on the active row only.

## Notes for AI

- Show the visitor's own time zone and convert on the server.

## Related

- [Calendar](https://lodeui.com/components/calendar) — Single-date calendar with month and year jumping, marked days and grid keyboard support.
- [Meeting scheduler](https://lodeui.com/blocks/meeting-scheduler) — Book a call: host card, calendar, time slots and confirmation.


---

# Navigation menu

> Header menu whose panels slide between triggers and morph to fit, with featured cards.

Component · Pro · https://lodeui.com/components/navigation-menu

## When to use

- Marketing site headers with grouped links.

## When not to use

- App navigation: use a sidebar.
- Phones: collapse to a menu button.

## Installation

```bash
npx shadcn@latest add @lode/navigation-menu
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { NavigationMenu } from "@/components/ui/navigation-menu";

<NavigationMenu items={[
  { label: "Product", links: [{ label: "Analytics", href: "/analytics", description: "Dashboards", icon: <BarChart3 /> }] },
  { label: "Pricing", href: "/pricing" },
]} />
```

## API reference

### NavigationMenu

Triggers open panels on hover or click; the panel slides and resizes between triggers.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `NavEntry[]` | – | Plain links { label, href } or groups { label, links, featured? }. |
| aria-label | `string` | `"Main"` | Names the navigation. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open or close a panel |
| ↓ | Open and move into the panel |
| Tab | Move through links |
| Esc | Close and return to the trigger |

## Accessibility

- Triggers are buttons with aria-expanded and aria-controls; panel items are plain links.
- Opens on click too, so it works without hover.

## Motion

- The panel slides left or right depending on which trigger you moved to, and its frame morphs to the new size.

## Responsive behavior

- Panels cap at the viewport width; the featured card hides below 640px.

## Performance

- Only the open panel renders.

## Notes for AI

- Keep panels to 3–6 links; put the most important one first.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Sidebar](https://lodeui.com/components/sidebar) — App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.


---

# Sidebar

> App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.

Component · Pro · https://lodeui.com/components/sidebar

## When to use

- The main navigation of an app or admin.

## When not to use

- Marketing sites: use a navigation menu.

## Installation

```bash
npx shadcn@latest add @lode/sidebar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Home, Users } from "lucide-react";
import { Sidebar } from "@/components/ui/sidebar";

<Sidebar active={page} onNavigate={setPage} sections={[{ items: [
  { id: "home", label: "Home", icon: <Home /> },
  { id: "team", label: "Team", icon: <Users />, badge: 3 },
] }]} />
```

## API reference

### Sidebar

A collapsible column of sections, items, nested groups and badges.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| sections | `{ title?; items: SidebarItem[] }[]` | – | SidebarItem: { id, label, icon, href?, badge?, children? }. |
| active / onNavigate | `string / (id) => void` | – | Current page; onNavigate makes links client-side. |
| header / footer | `ReactNode` | – | Slots, e.g. workspace switcher and user. |
| collapsed / defaultCollapsed / onCollapsedChange | `boolean` | – | Controlled or uncontrolled. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through items |
| Enter | Open an item or toggle a group |

## Accessibility

- A labelled nav; the current page has aria-current="page".
- Collapsed items keep their names via aria-label and show a tooltip.
- Groups are buttons with aria-expanded.

## Motion

- Width springs between 248px and 64px; groups expand by height; the active marker glides between items.

## Responsive behavior

- Full height of its parent; on phones, put it in a drawer.

## Performance

- Collapsed groups don't render their children.

## Notes for AI

- Persist the collapsed state with onCollapsedChange.

## Related

- [Navigation menu](https://lodeui.com/components/navigation-menu) — Header menu whose panels slide between triggers and morph to fit, with featured cards.
- [Bottom nav](https://lodeui.com/components/bottom-nav) — Mobile tab bar with an animated indicator, badges and safe-area padding.
- [Admin dashboard](https://lodeui.com/templates/admin-dashboard) — App shell with sidebar (drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys.


---

# Speed dial

> A floating action button that fans out labelled actions.

Component · Pro · https://lodeui.com/components/speed-dial

## When to use

- Mobile and canvas tools where several create actions share one button.

## When not to use

- More than five actions: use a menu.

## Installation

```bash
npx shadcn@latest add @lode/speed-dial
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SpeedDial } from "@/components/ui/speed-dial";

<SpeedDial actions={[{ id: "doc", label: "New document", icon: <FileText />, onSelect: createDoc }]} />
```

## API reference

### SpeedDial

A round button that opens a menu of labelled action buttons.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| actions | `{ id; label; icon; onSelect }[]` | – | Actions, nearest first. |
| label | `string` | `"Create"` | Main button name. |
| direction | `"up" \| "left"` | `"up"` | Where the actions fan out. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open or close |
| ↑ / ↓ (or ← / →) | Move between actions |
| Esc | Close |

## Accessibility

- The main button has aria-haspopup="menu" and aria-expanded; actions are named menu items.
- Focus moves into the menu and returns afterwards.

## Motion

- Actions spring out in sequence and fold back in reverse; the plus rotates into a cross.

## Responsive behavior

- Position it fixed in a corner for app-wide use.

## Performance

- Actions render only while open.

## Notes for AI

- Up direction shows labels; use left for tight vertical space.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Bottom nav](https://lodeui.com/components/bottom-nav) — Mobile tab bar with an animated indicator, badges and safe-area padding.
- [Ripple button](https://lodeui.com/components/ripple-button) — A button that ripples from wherever it's pressed.


---

# Bottom nav

> Mobile tab bar with an animated indicator, badges and safe-area padding.

Component · Pro · https://lodeui.com/components/bottom-nav

## When to use

- Mobile apps and PWAs with 3–5 top-level sections.

## When not to use

- Desktop layouts: use a sidebar.

## Installation

```bash
npx shadcn@latest add @lode/bottom-nav
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { BottomNav } from "@/components/ui/bottom-nav";

<BottomNav items={[{ value: "home", label: "Home", icon: <Home /> }, { value: "chat", label: "Chat", icon: <MessageCircle />, badge: 3 }]} value={tab} onValueChange={setTab} />
```

## API reference

### BottomNav

A tab bar for the bottom of the screen.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `readonly { value; label; icon; badge? }[]` | – | 3 to 5 items. |
| value / defaultValue / onValueChange | `T` | – | Current tab. |
| variant | `"pill" \| "line"` | `"pill"` | Indicator style. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between items |
| Enter / Space | Go |

## Accessibility

- A labelled nav with aria-current on the current item; badges are part of the name.

## Motion

- The pill or line glides between items; the active icon lifts slightly; badges pop.

## Responsive behavior

- Full width with safe-area padding for phones with a home indicator.

## Performance

- One animated indicator.

## Notes for AI

- Fix it to the bottom with position: fixed and add bottom padding to your page.

## Related

- [Sidebar](https://lodeui.com/components/sidebar) — App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Speed dial](https://lodeui.com/components/speed-dial) — A floating action button that fans out labelled actions.


---

# Table of contents

> On-this-page list that highlights the current section, with a gliding marker and progress ring.

Component · Pro · https://lodeui.com/components/table-of-contents

## When to use

- Long docs, articles and settings pages.

## When not to use

- Short pages with two or three sections.

## Installation

```bash
npx shadcn@latest add @lode/table-of-contents
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TableOfContents } from "@/components/ui/table-of-contents";

<TableOfContents items={[{ id: "install", title: "Installation" }, { id: "cli", title: "CLI", level: 3 }]} />
```

## API reference

### TableOfContents

Links to headings by id; tracks which one you're reading.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ id; title; level?: 2 \| 3 }[]` | – | Heading ids on the page. |
| container | `RefObject<HTMLElement>` | – | Scrollable element; omit for the page. |
| offset | `number` | `96` | Height of your sticky header. |
| title | `string` | `"On this page"` | Heading text. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between links |
| Enter | Jump to the section |

## Accessibility

- A labelled nav; the current link has aria-current="location".
- Jumping moves focus to the heading, so screen readers continue from there.
- Smooth scrolling is skipped under reduced motion.

## Motion

- The marker glides to the current section; the ring fills with progress.

## Responsive behavior

- Hide it below your sidebar breakpoint.

## Performance

- A passive scroll listener; no per-frame layout reads beyond heading positions.

## Notes for AI

- Give headings tabIndex={-1} so focus can land on them.

## Related

- [Scroll progress](https://lodeui.com/components/scroll-progress) — A reading progress bar that springs with the page or any scroll container.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Help center](https://lodeui.com/blocks/help-center) — Help center with instant search, topics, article reader and feedback.


---

# Loader

> Six loading indicators (spinner, dots, bars, pulse, orbit, ring) with one API.

Component · Pro · https://lodeui.com/components/loader

## When to use

- Short waits where you can't show a skeleton: buttons, overlays, small panels.

## When not to use

- Page loads with known layout: use skeletons.

## Installation

```bash
npx shadcn@latest add @lode/loader
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Loader } from "@/components/ui/loader";

<Loader variant="dots" />
<Loader variant="ring" size={32} label="Uploading" />
```

## API reference

### Loader

One component, six indicators. Uses currentColor.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"spinner" \| "dots" \| "bars" \| "pulse" \| "orbit" \| "ring"` | `"spinner"` | Style. |
| size | `number` | `24` | Size in px. |
| label | `string` | `"Loading"` | Announced to screen readers. |

## Accessibility

- role="status" with a label; the visuals are hidden.
- Reduced motion slows to gentle fades or stops spinning.

## Motion

- Each variant loops smoothly at 0.8–1.4 seconds per cycle.

## Responsive behavior

- Fixed size; inherits color from text.

## Performance

- SVG and transforms only.

## Notes for AI

- Change label to describe the wait, e.g. "Saving".

## Related

- [Skeleton](https://lodeui.com/components/skeleton) — Shimmering placeholders for loading content.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.


---

# Notification center

> A bell with unread badge opening a panel with tabs, mark-all-read and dismiss.

Component · Pro · https://lodeui.com/components/notification-center

## When to use

- In-app notifications in a header.

## When not to use

- One-off confirmations: use a toast.

## Installation

```bash
npx shadcn@latest add @lode/notification-center
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { NotificationCenter } from "@/components/ui/notification-center";

<NotificationCenter notifications={items} categories={["Mentions"]} onChange={save} />
```

## API reference

### NotificationCenter

A bell button and a panel of notifications with tabs.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| notifications | `{ id; title; body?; time; read?; icon?; category? }[]` | – | Initial list, newest first. |
| onChange | `(list) => void` | – | After read or dismiss, for syncing. |
| categories | `string[]` | – | Extra tabs besides All and Unread. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open the panel |
| Tab | Move through tabs and notifications |
| Esc | Close |

## Accessibility

- The bell is named with the unread count.
- The panel is a labelled dialog; tabs use aria-selected; dismiss buttons name the notification.

## Motion

- The bell wiggles when the count changes; the panel scales in; dismissed items slide out and the list closes the gap.

## Responsive behavior

- Up to 368px, never wider than the screen minus 32px.

## Performance

- The list scrolls past 384px.

## Notes for AI

- Mark read on the server in onChange.

## Related

- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Animated list](https://lodeui.com/components/animated-list) — A feed where new entries spring in at the top and older ones make room.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.


---

# Announcement bar

> A slim dismissible bar above the header that rotates launch messages.

Component · Pro · https://lodeui.com/components/announcement-bar

## When to use

- Launches, sales and maintenance windows above your header.

## When not to use

- Errors in the app: use an alert.

## Installation

```bash
npx shadcn@latest add @lode/announcement-bar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AnnouncementBar } from "@/components/ui/announcement-bar";

<AnnouncementBar storageKey="launch-2026" messages={[{ text: "40 new components.", href: "/changelog", cta: "See what's new" }]} />
```

## API reference

### AnnouncementBar

A dismissible strip that rotates its messages.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| messages | `{ text; href?; cta? }[]` | – | One or more messages. |
| badge | `string` | `"New"` | Label before the text. |
| storageKey | `string` | – | Remember dismissal in localStorage. |
| interval | `number` | `4500` | ms per message. |
| tone | `"brand" \| "neutral" \| "dark"` | `"dark"` | Colors. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the link and dismiss button |

## Accessibility

- A labelled region; rotation pauses on hover and focus.
- The dismiss button is labelled.

## Motion

- Messages slide up through the bar; dismissing collapses its height.

## Responsive behavior

- Text wraps and centers on phones.

## Performance

- One interval while there are several messages.

## Notes for AI

- Change storageKey for each new announcement so it shows again.

## Related

- [Alert](https://lodeui.com/components/alert) — Inline alerts and page banners in four tones, with actions and dismiss.
- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.


---

# Typing indicator

> Bouncing dots in a chat bubble with who is typing.

Component · Pro · https://lodeui.com/components/typing-indicator

## When to use

- Chats, support inboxes and AI assistants while a reply is being written.

## When not to use

- Long-running work: show progress instead.

## Installation

```bash
npx shadcn@latest add @lode/typing-indicator
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TypingIndicator } from "@/components/ui/typing-indicator";

<TypingIndicator names={typingUsers} />
```

## API reference

### TypingIndicator

Dots in a bubble plus who is typing; hidden when names is empty.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| names | `string[]` | – | People typing. |
| bubbleOnly | `boolean` | – | Hide the text visually (still read aloud). |

### typingText

Builds "Ada is typing" / "Ada and Grace are typing" / "Ada and 2 others are typing".

No props.

## Accessibility

- Changes are announced politely.

## Motion

- Dots bounce in sequence; the bubble springs in and out. Fades only under reduced motion.

## Responsive behavior

- Inline.

## Performance

- Three animated dots.

## Notes for AI

- Debounce typing events: clear a person after 3 seconds without keystrokes.

## Related

- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.
- [Team chat](https://lodeui.com/blocks/team-chat) — Team chat with channels, reactions, mentions, typing indicator and mobile drawer.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.


---

# Radar chart

> Compare series across dimensions; shapes morph and legend toggles series.

Component · Pro · https://lodeui.com/components/radar-chart

## When to use

- Comparing 2–4 items across 5–8 qualities: products, skills, plans.

## When not to use

- Precise comparisons: use a bar chart.
- More than four series: it turns into spaghetti.

## Installation

```bash
npx shadcn@latest add @lode/radar-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { RadarChart } from "@/components/ui/radar-chart";

<RadarChart axes={["Speed", "Design", "Docs"]} max={10} series={[{ key: "us", label: "Us", color: "#84cc16", values: [9, 9, 8] }]} />
```

## API reference

### RadarChart

Polygons on radial axes with toggleable legend.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| axes | `string[]` | – | Dimension names. |
| series | `{ key; label; color; values }[]` | – | One value per axis. |
| max / rings / size | `number` | `auto / 4 / 300` | Scale top, grid rings and size. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach legend toggles |
| Enter / Space | Show or hide a series |

## Accessibility

- The SVG is labelled with what it compares; hovering an axis prints every series' value as text.
- Legend items are toggle buttons.

## Motion

- Shapes grow from the center and morph when values change; hidden series shrink away.

## Responsive behavior

- Scales down to its container.

## Performance

- One polygon per series.

## Notes for AI

- Use the same max for all series so shapes are comparable.

## Related

- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Scatter chart](https://lodeui.com/components/scatter-chart) — Points or bubbles on two measures with groups, hover card and keyboard-focusable dots.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.


---

# Scatter chart

> Points or bubbles on two measures with groups, hover card and keyboard-focusable dots.

Component · Pro · https://lodeui.com/components/scatter-chart

## When to use

- Relationships between two measures: seats vs revenue, price vs rating.

## When not to use

- Time series: use a line chart.

## Installation

```bash
npx shadcn@latest add @lode/scatter-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ScatterChart } from "@/components/ui/scatter-chart";

<ScatterChart data={accounts} xLabel="Seats" yLabel="MRR" formatY={(n) => `$${n}`} />
```

## API reference

### ScatterChart

Dots or bubbles with gridlines, groups and a hover card.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ id; x; y; z?; label?; group? }[]` | – | z sizes bubbles; group colors them. |
| xLabel / yLabel | `string` | – | Axis names. |
| colors | `Record<string, string>` | – | Color per group. |
| formatX / formatY / height | `(n) => string / number` | – | Labels and size. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between points |

## Accessibility

- Each point is focusable and labelled with both values and its group.

## Motion

- Points pop in with a stagger; the hovered point grows and others dim.

## Responsive behavior

- Fills its width at a fixed height.

## Performance

- Fine up to a few hundred points; aggregate beyond that.

## Notes for AI

- Give every point a unique id.

## Related

- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Radar chart](https://lodeui.com/components/radar-chart) — Compare series across dimensions; shapes morph and legend toggles series.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.


---

# Treemap

> Squarified rectangles sized by value, for revenue mix, storage and market caps.

Component · Pro · https://lodeui.com/components/treemap

## When to use

- Parts of a whole with many parts: revenue by product, storage by folder.

## When not to use

- A few parts: use a donut chart.
- Values over time.

## Installation

```bash
npx shadcn@latest add @lode/treemap
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Treemap } from "@/components/ui/treemap";

<Treemap items={[{ id: "api", label: "API", value: 48200, change: "+18%" }]} format={(n) => `$${n}`} />
```

## API reference

### Treemap

Squarified tiles sized by value, largest first.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ id; label; value; color?; change? }[]` | – | Tiles. |
| height | `number` | `320` | Height in px. |
| format / onSelect | `(n) => string / (item) => void` | – | Value text and click handler. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between tiles |
| Enter | Select a tile |

## Accessibility

- A list of buttons, each labelled with value, share and change.

## Motion

- Tiles grow in largest first and animate to new positions when data changes; hovering dims the rest.

## Responsive behavior

- Fills its width; small tiles show only their label.

## Performance

- Layout is computed once per render.

## Notes for AI

- Use dark, saturated colors: labels are white.

## Related

- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Expense tracker](https://lodeui.com/blocks/expense-tracker) — Spending by category, budget bars that warn, quick add and recent expenses.


---

# Activity rings

> Concentric progress rings like a fitness watch, overlapping past 100%.

Component · Pro · https://lodeui.com/components/activity-rings

## When to use

- Daily goals: fitness, habits, quotas, OKRs.

## When not to use

- More than four measures: use progress bars.

## Installation

```bash
npx shadcn@latest add @lode/activity-rings
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ActivityRings } from "@/components/ui/activity-rings";

<ActivityRings rings={[{ label: "Move", value: 486, goal: 400, color: "#f43f5e", unit: "kcal" }]} />
```

## API reference

### ActivityRings

Concentric rings with an optional legend.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| rings | `{ label; value; goal; color; unit? }[]` | – | Outermost first. |
| size / thickness | `number` | `180 / 16` | Dimensions in px. |
| legend | `boolean` | `true` | Values beside the rings. |

## Accessibility

- The SVG is labelled with every ring's value and goal; the legend repeats them as text.

## Motion

- Rings sweep in one after another; past 100% a second lap overlaps with a shadow.

## Responsive behavior

- The legend wraps below on narrow screens.

## Performance

- Two circles per ring.

## Notes for AI

- Rings beyond the available radius are skipped; increase size for more rings.

## Related

- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.


---

# Gradient text

> Text filled with a slowly flowing gradient.

Component · Pro · https://lodeui.com/components/gradient-text

## When to use

- One accent word or a hero headline.

## When not to use

- Body text: contrast varies across the gradient.

## Installation

```bash
npx shadcn@latest add @lode/gradient-text
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { GradientText } from "@/components/ui/gradient-text";

<GradientText as="h1" className="text-6xl font-semibold">Ship it beautiful.</GradientText>
```

## API reference

### GradientText

A text element filled with a moving gradient. Accepts span attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| colors | `string[]` | – | Repeat the first color last for a seamless loop. |
| speed | `number` | `6` | Seconds per sweep; 0 is still. |
| as | `"span" \| "h1" \| "h2" \| "h3" \| "p"` | `"span"` | Element. |

## Accessibility

- Real text, so it's selectable and read normally.
- Still under reduced motion.
- Check contrast of every color against the background.

## Motion

- The gradient pans continuously.

## Responsive behavior

- Inline; wraps normally.

## Performance

- A CSS animation; the keyframes are added once to the page head.

## Notes for AI

- Use saturated mid-tones that pass contrast on both themes.

## Related

- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.
- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Word rotate](https://lodeui.com/components/word-rotate) — Cycles words in place with a blur-slide while the width springs to fit.


---

# Particles

> A drifting constellation of dots on canvas that moves away from the pointer.

Component · Pro · https://lodeui.com/components/particles

## When to use

- Hero and section backgrounds for technical or AI products.

## When not to use

- Behind dense content or forms.
- More than one per page.

## Installation

```bash
npx shadcn@latest add @lode/particles
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { Particles } from "@/components/ui/particles";

<section className="relative overflow-hidden">
  <Particles />
  <h1 className="relative">Everything, connected</h1>
</section>
```

## API reference

### Particles

A canvas that fills its positioned parent.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| density | `number` | `0.9` | Particles per 10,000 px². |
| color | `string` | `currentColor` | Dot and line color. |
| connect | `boolean` | `true` | Lines between nearby dots. |
| interactive | `boolean` | `true` | Dots drift away from the pointer. |

## Accessibility

- Decorative: aria-hidden and ignores the pointer for clicks.
- Drawn once, without motion, under reduced motion.

## Motion

- Dots drift with slight randomness and damping; nearby dots link with fading lines.

## Responsive behavior

- Particle count follows the area, so phones get fewer.

## Performance

- Pauses when scrolled off screen; capped at 2× pixel ratio.

## Notes for AI

- Give the parent position: relative and overflow: hidden; put content above it with position: relative.

## Related

- [Meteors](https://lodeui.com/components/meteors) — Shooting stars streaking across a card or hero.
- [Grid pattern](https://lodeui.com/components/grid-pattern) — A technical grid background where a few cells gently light up.
- [Aurora background](https://lodeui.com/components/aurora-background) — Slow drifting northern-lights glow behind any section.


---

# Meteors

> Shooting stars streaking across a card or hero.

Component · Pro · https://lodeui.com/components/meteors

## When to use

- Launch announcements, pricing highlights and dark hero cards.

## When not to use

- Light, calm interfaces: the effect is loud.

## Installation

```bash
npx shadcn@latest add @lode/meteors
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Meteors } from "@/components/ui/meteors";

<div className="relative overflow-hidden rounded-3xl p-8">
  <Meteors count={12} />
  <h3 className="relative">Launch week</h3>
</div>
```

## API reference

### Meteors

Absolutely positioned streaks that fall across the parent.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| count | `number` | `14` | How many meteors. |
| angle | `number` | `215` | Direction of travel in degrees. |

## Accessibility

- Decorative and aria-hidden; not rendered under reduced motion.

## Motion

- Each meteor streaks with its own speed and delay, then waits before repeating.

## Responsive behavior

- Spread across the parent's width.

## Performance

- Transform and opacity only; positions are deterministic so server and browser match.

## Notes for AI

- Works best on dark backgrounds.

## Related

- [Particles](https://lodeui.com/components/particles) — A drifting constellation of dots on canvas that moves away from the pointer.
- [Border beam](https://lodeui.com/components/border-beam) — A light that travels around an element's border.
- [CTA section](https://lodeui.com/blocks/cta-section) — A dark closing call to action with meteors and an email capture.


---

# Ripple button

> A button that ripples from wherever it's pressed.

Component · Pro · https://lodeui.com/components/ripple-button

## When to use

- Primary actions where tactile feedback adds delight.

## When not to use

- Dense toolbars: use the regular button.

## Installation

```bash
npx shadcn@latest add @lode/ripple-button
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { RippleButton } from "@/components/ui/ripple-button";

<RippleButton onClick={start}>Get started</RippleButton>
```

## API reference

### RippleButton

A native button with a ripple from the press point. Accepts button attributes.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"primary" \| "secondary" \| "outline"` | `"primary"` | Style. |
| rippleColor | `string` | – | Defaults to the text color. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Press (ripples from the center) |

## Accessibility

- A real button; ripples are hidden from assistive tech and skipped under reduced motion.

## Motion

- Ripples expand to cover the button and fade (650ms); the button presses in slightly.

## Responsive behavior

- Hugs its label.

## Performance

- Each ripple removes itself when done.

## Notes for AI

- Combine with type="submit" in forms; it defaults to type="button".

## Related

- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.


---

# Animated beam

> A glowing pulse travelling along a curved line between two elements.

Component · Pro · https://lodeui.com/components/animated-beam

## When to use

- Integration diagrams and "how it works" sections showing data flow.

## When not to use

- Real network maps with many nodes.

## Installation

```bash
npx shadcn@latest add @lode/animated-beam
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { AnimatedBeam } from "@/components/ui/animated-beam";

const box = React.useRef<HTMLDivElement>(null);
const a = React.useRef<HTMLDivElement>(null);
const b = React.useRef<HTMLDivElement>(null);

<div ref={box} className="relative flex justify-between">
  <div ref={a}>App</div>
  <div ref={b}>API</div>
  <AnimatedBeam container={box} from={a} to={b} curvature={40} />
</div>
```

## API reference

### AnimatedBeam

An SVG path between two elements with a travelling gradient pulse. Re-measures on resize.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| container / from / to | `RefObject<HTMLElement>` | – | The positioned parent and the two ends. |
| curvature | `number` | `0` | Bend in px. |
| duration / delay | `number` | `3 / 0` | Seconds. |
| reverse | `boolean` | – | Pulse from `to` to `from`. |
| colors | `[string, string]` | – | Pulse gradient. |

## Accessibility

- Decorative; label the nodes themselves.
- Only the static line shows under reduced motion.

## Motion

- A soft gradient travels along the curve and repeats.

## Responsive behavior

- Recalculates whenever the container resizes.

## Performance

- One SVG per beam; no per-frame layout reads.

## Notes for AI

- Nodes need a higher z-index than the beams.

## Related

- [Orbiting circles](https://lodeui.com/components/orbiting-circles) — Icons orbiting a center on rings, staying upright as they travel.
- [Integrations gallery](https://lodeui.com/blocks/integrations-gallery) — Searchable integrations with categories and connect / disconnect in place.
- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.


---

# Grid pattern

> A technical grid background where a few cells gently light up.

Component · Pro · https://lodeui.com/components/grid-pattern

## When to use

- Section and hero backgrounds with a technical, precise feel.

## When not to use

- Behind busy imagery.

## Installation

```bash
npx shadcn@latest add @lode/grid-pattern
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { GridPattern } from "@/components/ui/grid-pattern";

<section className="relative overflow-hidden">
  <GridPattern size={40} flicker={10} />
  <h2 className="relative">Precise by default</h2>
</section>
```

## API reference

### GridPattern

An SVG grid that fills its parent, with a few softly glowing cells.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `number` | `40` | Cell size in px. |
| flicker | `number` | `10` | Glowing cells. |
| fade | `"radial" \| "bottom" \| "none"` | `"radial"` | Edge fade. |
| color | `string` | `var(--brand)` | Glow color. |

## Accessibility

- Decorative and aria-hidden; no glow under reduced motion.

## Motion

- Cells fade in and out on staggered timers.

## Responsive behavior

- Fills any size; the grid stays crisp.

## Performance

- A single SVG pattern plus a handful of animated rects.

## Notes for AI

- Uses var(--grid-line) for lines when your theme defines it.

## Related

- [Particles](https://lodeui.com/components/particles) — A drifting constellation of dots on canvas that moves away from the pointer.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Aurora background](https://lodeui.com/components/aurora-background) — Slow drifting northern-lights glow behind any section.


---

# Scroll stack

> Cards that stick and stack as you scroll, earlier ones shrinking into the pile.

Component · Pro · https://lodeui.com/components/scroll-stack

## When to use

- Feature or step stories on landing pages.

## When not to use

- Content people need to compare: they overlap.

## Installation

```bash
npx shadcn@latest add @lode/scroll-stack
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ScrollStack } from "@/components/ui/scroll-stack";

<ScrollStack cards={steps.map((s) => <StepCard key={s.id} step={s} />)} top={80} cardHeight={360} />
```

## API reference

### ScrollStack

Sticky cards that stack; earlier cards scale down and darken.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| cards | `ReactNode[]` | – | Card contents. |
| container | `RefObject<HTMLElement>` | – | Scrollable element; omit for the page. |
| top / cardHeight | `number` | `24 / 320` | Sticky offset and card height. |

## Accessibility

- Cards are normal content in reading order; nothing is hidden from assistive tech.

## Motion

- Scale and dimming are tied to scroll position, so they follow your scroll exactly.

## Responsive behavior

- Works at any width; keep cardHeight under the viewport height.

## Performance

- Transforms driven by one scroll motion value.

## Notes for AI

- Add space after the stack so the last card can settle.

## Related

- [Reveal](https://lodeui.com/components/reveal) — Scroll-triggered fade-and-slide, plus a Stagger for groups.
- [Scroll progress](https://lodeui.com/components/scroll-progress) — A reading progress bar that springs with the page or any scroll container.
- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.


---

# Theme switch

> A day / night switch: the sun sets into a moon and the stars come out.

Component · Pro · https://lodeui.com/components/theme-switch

## When to use

- Playful light / dark toggles on marketing sites and personal apps.

## When not to use

- When you also need a System option: use a menu like the site's theme toggle.

## Installation

```bash
npx shadcn@latest add @lode/theme-switch
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ThemeSwitch } from "@/components/ui/theme-switch";

<ThemeSwitch checked={theme === "dark"} onCheckedChange={(dark) => setTheme(dark ? "dark" : "light")} />
```

## API reference

### ThemeSwitch

A switch drawn as a sky with a sun that becomes the moon.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked / onCheckedChange | `boolean` | – | true is dark. |
| size | `"sm" \| "md"` | `"md"` | 72 × 36 or 58 × 29 px. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Space / Enter | Toggle |

## Accessibility

- role="switch" named "Dark mode" with aria-checked.

## Motion

- The sky fades, the sun slides and rolls into the moon, clouds sink and stars twinkle in.

## Responsive behavior

- Fixed size.

## Performance

- A handful of transformed spans.

## Notes for AI

- It only reports the choice; apply the theme yourself in onCheckedChange.

## Related

- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Toggle group](https://lodeui.com/components/toggle-group) — A row of toggle buttons for one choice (alignment) or several (bold, italic), with a sliding pill.


---

# Video player

> Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts.

Component · Pro · https://lodeui.com/components/video-player

## When to use

- Product demos, courses and marketing videos you host yourself.

## When not to use

- YouTube or Vimeo embeds: use their players.

## Installation

```bash
npx shadcn@latest add @lode/video-player
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { VideoPlayer } from "@/components/ui/video-player";

<VideoPlayer title="Product tour" src="/videos/tour.mp4" poster="/videos/tour.jpg" captions="/videos/tour.vtt" />
```

## API reference

### VideoPlayer

A <video> with custom controls that hide while playing.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src / poster | `string` | – | Video and poster URLs. |
| title | `string` | – | Names the player. |
| captions | `string` | – | WebVTT file; shown by default. |
| aspectRatio | `string` | `"16 / 9"` | Frame ratio. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Space or K | Play or pause |
| ← / → | Back or forward 5 seconds |
| M | Mute |
| F | Fullscreen |

## Accessibility

- A focusable region named after the video; every control is labelled; the seek bar reports time as text.
- Controls stay visible while focus is inside.

## Motion

- Controls fade after 2.2 seconds of stillness; a play / pause badge pulses in the center.

## Responsive behavior

- Fills its width at the given ratio; playsInline on phones.

## Performance

- preload="metadata" so nothing heavy loads until play.

## Notes for AI

- Always provide captions for speech.

## Related

- [Audio player](https://lodeui.com/components/audio-player) — Compact audio player with a clickable waveform, skip and playback speed.
- [Lightbox](https://lodeui.com/components/lightbox) — Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
- [Image compare](https://lodeui.com/components/image-compare) — Before and after slider with drag, hover and keyboard control.


---

# Audio player

> Compact audio player with a clickable waveform, skip and playback speed.

Component · Pro · https://lodeui.com/components/audio-player

## When to use

- Podcasts, voice notes, previews and sound libraries.

## When not to use

- Background music: avoid autoplaying audio.

## Installation

```bash
npx shadcn@latest add @lode/audio-player
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AudioPlayer } from "@/components/ui/audio-player";

<AudioPlayer title="Episode 12" artist="Design Notes" src="/audio/ep12.mp3" />
```

## API reference

### AudioPlayer

An <audio> with a waveform scrubber, skip buttons and speed.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src / title / artist | `string` | – | Track details. |
| cover | `string` | – | Cover image URL. |
| waveform | `number[]` | – | Bar heights 0–1; generated from the title when omitted. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Play or pause (on the cover) |
| ← / → | Seek (on the waveform) |
| Tab | Reach skip and speed |

## Accessibility

- Play, seek, skip and speed are all labelled; the waveform is a native range input.

## Motion

- Bars stand taller while playing and fill with progress.

## Responsive behavior

- Up to 448px wide.

## Performance

- preload="metadata".

## Notes for AI

- Generate real waveform data on the server for accuracy.

## Related

- [Video player](https://lodeui.com/components/video-player) — Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts.
- [Voice orb](https://lodeui.com/components/voice-orb) — A living orb for voice assistants: idle, listening, thinking and speaking states.


---

# Image lens

> A magnifying glass that follows the pointer (or arrow keys) over an image.

Component · Pro · https://lodeui.com/components/image-lens

## When to use

- Product photos, maps and detailed artwork.

## When not to use

- Small images: there's nothing to magnify.

## Installation

```bash
npx shadcn@latest add @lode/image-lens
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { ImageLens } from "@/components/ui/image-lens";

<ImageLens src="/products/jacket.jpg" alt="Linen jacket, stitching detail" zoom={3} />
```

## API reference

### ImageLens

Shows a magnified circle under the pointer.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src / children | `string / ReactNode` | – | An image URL or any element. |
| alt | `string` | – | Describes the image. |
| zoom / size | `number` | `2.5 / 150` | Magnification and lens size. |
| aspectRatio | `string` | `"4 / 3"` | Frame ratio. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → / ↑ / ↓ | Move the lens |
| Shift + arrows | Move faster |

## Accessibility

- Focusable and labelled with the alt text plus how to use the lens.

## Motion

- The lens springs in and follows the pointer with a light spring.

## Responsive behavior

- Touch screens don't hover; the lens appears on focus only.

## Performance

- The magnified copy is the same image, scaled.

## Notes for AI

- Use a high-resolution source so the zoom stays sharp.

## Related

- [Lightbox](https://lodeui.com/components/lightbox) — Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
- [Image compare](https://lodeui.com/components/image-compare) — Before and after slider with drag, hover and keyboard control.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.


---

# Lightbox

> Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.

Component · Pro · https://lodeui.com/components/lightbox

## When to use

- Galleries, portfolios, product photos and attachments.

## When not to use

- One image: link to it or use the image lens.

## Installation

```bash
npx shadcn@latest add @lode/lightbox
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Lightbox } from "@/components/ui/lightbox";

<Lightbox images={photos.map((p) => ({ id: p.id, src: p.url, alt: p.alt, caption: p.caption }))} />
```

## API reference

### Lightbox

A thumbnail grid that opens a full-screen modal viewer.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| images | `{ id; src?; render?; alt; caption? }[]` | – | URLs, or render for custom content. |
| columns | `2 \| 3 \| 4` | `3` | Grid columns (2 on phones). |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Open a thumbnail |
| ← / → | Previous or next |
| Esc | Close and return to the thumbnail |

## Accessibility

- A modal dialog labelled with the image and its position; the caption is announced.
- Focus returns to the thumbnail you opened.

## Motion

- The thumbnail grows into the viewer; paging slides; swipe on touch.

## Responsive behavior

- Arrows hide on phones in favor of swiping.

## Performance

- Only the current image is mounted in the viewer.

## Notes for AI

- Give every image a meaningful alt.

## Related

- [Image lens](https://lodeui.com/components/image-lens) — A magnifying glass that follows the pointer (or arrow keys) over an image.
- [Carousel](https://lodeui.com/components/carousel) — Swipeable slides with arrows, animated dots, keys and pausable autoplay.
- [Morphing dialog](https://lodeui.com/components/morphing-dialog) — A card that morphs into a dialog: cover, title and frame fly to their new places.


---

# Chat message

> A chat turn with streaming cursor, copy, feedback and regenerate.

Component · Pro · https://lodeui.com/components/chat-message

## When to use

- AI assistants and chats.

## When not to use

- Comment threads: use a timeline or list.

## Installation

```bash
npx shadcn@latest add @lode/chat-message
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ChatMessage } from "@/components/ui/chat-message";

<ChatMessage role="user" content="How do I add a dock?" />
<ChatMessage role="assistant" content={partial} streaming={!done} onRegenerate={retry} onFeedback={rate} />
```

## API reference

### ChatMessage

One turn of a conversation.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| role | `"user" \| "assistant"` | – | Bubble on the right, or plain text with avatar on the left. |
| content / streaming | `string / boolean` | – | Text so far and whether more is coming. |
| name / avatar / time | `string / ReactNode / string` | `"Assistant"` | Header details. |
| onRegenerate / onFeedback | `() => void / ("up" \| "down") => void` | – | Show those actions. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach copy, feedback and regenerate |

## Accessibility

- Each turn is an article labelled by who spoke; aria-busy while streaming.
- Actions are labelled; feedback buttons use aria-pressed.

## Motion

- Messages rise in; a block cursor blinks while streaming; actions fade in when done.

## Responsive behavior

- Messages are at most 85% of the width.

## Performance

- Pass the growing string; React only updates the text node.

## Notes for AI

- Render markdown yourself inside content if your model returns it.

## Related

- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [Typing indicator](https://lodeui.com/components/typing-indicator) — Bouncing dots in a chat bubble with who is typing.
- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.


---

# Voice orb

> A living orb for voice assistants: idle, listening, thinking and speaking states.

Component · Pro · https://lodeui.com/components/voice-orb

## When to use

- Voice assistants and call screens.

## When not to use

- Text chat: use a typing indicator.

## Installation

```bash
npx shadcn@latest add @lode/voice-orb
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { VoiceOrb } from "@/components/ui/voice-orb";

<VoiceOrb state={state} level={micLevel} />
```

## API reference

### VoiceOrb

An animated orb that reflects the assistant's state.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| state | `"idle" \| "listening" \| "thinking" \| "speaking"` | – | Current state; announced. |
| level | `number` | `0` | 0–1 loudness for listening and speaking. |
| size / colors | `number / [string, string, string]` | `160` | Look. |

## Accessibility

- role="status" announces the state as text.

## Motion

- Idle breathes; listening and speaking swell with level; thinking swirls fast with a dashed ring.

## Responsive behavior

- Fixed size; scale with the size prop.

## Performance

- Two rotating gradients; drive level from an AnalyserNode at ~10–20 fps.

## Notes for AI

- Smooth the level before passing it in to avoid jitter.

## Related

- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.
- [Audio player](https://lodeui.com/components/audio-player) — Compact audio player with a clickable waveform, skip and playback speed.
- [Loader](https://lodeui.com/components/loader) — Six loading indicators (spinner, dots, bars, pulse, orbit, ring) with one API.


---

# Coupon input

> Promo code field that validates, shows a removable ticket and shakes on errors.

Component · Pro · https://lodeui.com/components/coupon-input

## When to use

- Checkout and billing pages with promo codes.

## When not to use

- Gift cards with balances: show the balance too.

## Installation

```bash
npx shadcn@latest add @lode/coupon-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CouponInput } from "@/components/ui/coupon-input";

<CouponInput onApply={(code) => validateCode(code)} onRemove={clearCode} />
```

## API reference

### CouponInput

A code field that becomes a ticket once applied.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onApply | `(code) => Promise<{ code; description }>` | – | Throw with a message for invalid codes. |
| applied / onRemove | `AppliedCoupon \| null / () => void` | – | Controlled applied state. |
| label | `string` | `"Promo code"` | Field label. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Apply |
| Tab | Reach the remove button |

## Accessibility

- Errors use role="alert" and aria-invalid; applying is announced.

## Motion

- Wrong codes shake the field; valid ones pop into a ticket.

## Responsive behavior

- Up to 384px.

## Performance

- One request per apply.

## Notes for AI

- Codes are upper-cased before onApply.

## Related

- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.


---

# Payment card

> A wallet card with a holographic sheen that follows the pointer and a number reveal.

Component · Pro · https://lodeui.com/components/payment-card

## When to use

- Wallets, virtual cards and saved payment methods.

## When not to use

- Collecting card details: use the credit card input.

## Installation

```bash
npx shadcn@latest add @lode/payment-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PaymentCard } from "@/components/ui/payment-card";

<PaymentCard last4="4242" holder="Ada Lovelace" expiry="09/29" theme="aurora" />
```

## API reference

### PaymentCard

A 3D card that tilts and shines under the pointer.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| last4 / holder / expiry | `string` | – | Card details shown. |
| brand | `"visa" \| "mastercard" \| "amex"` | `"visa"` | Logo. |
| theme | `"midnight" \| "lime" \| "aurora" \| string` | `"midnight"` | Preset or any CSS background. |
| number | `string` | – | Full number; adds a show / hide button. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the reveal button |

## Accessibility

- The number is labelled as "Card ending in 4242" unless revealed.
- Tilt and sheen are skipped under reduced motion.

## Motion

- Tilts toward the pointer with a spring; a light sheen follows it.

## Responsive behavior

- Up to 340px at the standard card ratio.

## Performance

- Motion values only; no re-renders while moving.

## Notes for AI

- Never pass full numbers of real cards except to their owner.

## Related

- [Credit card input](https://lodeui.com/components/credit-card-input) — Card fields with brand detection, Luhn validation and a live card that flips for the CVC.
- [Crypto wallet](https://lodeui.com/blocks/crypto-wallet) — Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.
- [Tilt card](https://lodeui.com/components/tilt-card) — A card that tilts in 3D toward the pointer with a moving glare.


---

# Product tour

> A guided tour: a spotlight glides between elements with an explaining card.

Component · Pro · https://lodeui.com/components/product-tour

## When to use

- First-run onboarding and new-feature walkthroughs.

## When not to use

- Explaining everything: keep tours to 3–5 steps.

## Installation

```bash
npx shadcn@latest add @lode/product-tour
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProductTour } from "@/components/ui/product-tour";

<ProductTour open={open} onOpenChange={setOpen} steps={[
  { target: "#search", title: "Find anything", body: "Search projects and people." },
  { target: "#new", title: "Create", body: "Start a project in one click." },
]} />
```

## API reference

### ProductTour

A dimmed overlay with a spotlight on each target and a step card.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| steps | `{ target; title; body; side? }[]` | – | target is a CSS selector. |
| open / onOpenChange | `boolean` | – | Controlled visibility. |
| onFinish | `() => void` | – | After the last step. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Previous or next step |
| Esc | Skip the tour |
| Tab | Reach Back, Next and Skip |

## Accessibility

- The card is a labelled modal dialog that takes focus and returns it when done.
- Step count is part of the content.

## Motion

- The spotlight and card glide to each new target; content swaps with a short slide; target scrolls into view (instantly under reduced motion).

## Responsive behavior

- The card stays inside the viewport.

## Performance

- Measures only on step change, resize and scroll.

## Notes for AI

- Store completion so the tour doesn't reappear.

## Related

- [Onboarding checklist](https://lodeui.com/blocks/onboarding-checklist) — A setup checklist with progress ring and inline actions.
- [Onboarding wizard](https://lodeui.com/blocks/onboarding-wizard) — Welcome flow for role, goals, team size and invites, ending with confetti.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.


---

# Metrics dashboard

> KPI tabs, one inspectable chart with period comparison, and top pages and sources.

Block · Pro · https://lodeui.com/blocks/metrics-dashboard

## When to use

- The landing screen of an analytics, SaaS or admin product.
- Any overview where people pick one metric and want its trend and top contributors.

## When not to use

- Revenue-specific views: use revenue analytics or revenue breakdown.
- Dense operational monitoring with many charts at once.

## Installation

```bash
npx shadcn@latest add @lode/metrics-dashboard
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { MetricsDashboard } from "@/components/blocks/metrics-dashboard";

export default function AnalyticsPage() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MetricsDashboard site="acme.com" />
    </main>
  );
}
```

Built from: Action button, Area chart, Number ticker, Segmented control, Switch

## API reference

### MetricsDashboard

A web analytics overview: four KPI tabs that drive one chart, a 7D / 30D / 90D range with period comparison, top pages and sources, and an export button. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| site | `string` | `"acme.com"` | Site name shown in the header. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between KPI tabs, range control, compare switch and export |
| Enter / Space | Select the focused KPI |
| ← / → | Change the range in the segmented control |

## Accessibility

- KPI tabs are a tablist with aria-selected, so the active metric is announced.
- Numbers are read as final values, not animated digits.
- The range control is a labelled radio group.

## Motion

- KPI digits roll when the range changes.
- The active-tab marker slides between KPIs.
- The chart morphs between ranges instead of redrawing.

## Responsive behavior

- KPI tabs are a 2×2 grid on phones and one row from 1024px.
- Top pages and sources stack below 768px.
- The chart fills the width at every size.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
- Only the chart and KPI numbers re-render when the range changes.

## Notes for AI

- Pass real series per metric in the same { label, value, previous } shape the AreaChart uses.
- Wire the export ActionButton to a server action that returns a CSV.

## Related

- [SaaS revenue analytics](https://lodeui.com/blocks/revenue-analytics) — Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.


---

# Revenue breakdown

> Recurring revenue split into new, expansion and churn, with a draggable range brush.

Block · Pro · https://lodeui.com/blocks/revenue-breakdown

## When to use

- Explaining what drove MRR change month by month.
- Investor or board reporting views.

## When not to use

- A single revenue number: use a KPI card.

## Installation

```bash
npx shadcn@latest add @lode/revenue-breakdown
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { RevenueBreakdown } from "@/components/blocks/revenue-breakdown";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <RevenueBreakdown />
    </main>
  );
}
```

Built from: Number ticker, Segmented control, Stacked area chart

## API reference

### RevenueBreakdown

New, expansion and churned MRR as stacked areas above and below zero, with a draggable range brush and legend toggles. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the range handles and legend toggles |
| ← / → | Move the focused range handle by one month |
| Enter / Space | Toggle a series in the legend |

## Accessibility

- Range handles are role="slider" with the month as aria-valuetext.
- Legend items are toggle buttons with aria-pressed.
- KPIs are text, so the totals don't depend on the chart.

## Motion

- The chart morphs as the window moves.
- KPI digits roll as totals change.

## Responsive behavior

- The brush works with touch and pointer drag.
- KPIs wrap to two columns on phones.

## Performance

- 24 months of data; the chart recomputes paths only for the selected window.
- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Churn values are positive numbers marked negative: true; the chart draws them below zero.

## Related

- [Stacked area chart](https://lodeui.com/components/stacked-area-chart) — Stacked series above and below zero, morphing as the range changes.
- [MRR waterfall](https://lodeui.com/blocks/mrr-waterfall) — How MRR moved from start to end of a period, and which accounts moved it.
- [SaaS revenue analytics](https://lodeui.com/blocks/revenue-analytics) — Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.


---

# MRR waterfall

> How MRR moved from start to end of a period, and which accounts moved it.

Block · Pro · https://lodeui.com/blocks/mrr-waterfall

## When to use

- Showing how a period's MRR moved from start to end.

## When not to use

- Trends over many months: use revenue breakdown.

## Installation

```bash
npx shadcn@latest add @lode/mrr-waterfall
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { MrrWaterfall } from "@/components/blocks/mrr-waterfall";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MrrWaterfall />
    </main>
  );
}
```

Built from: Number ticker, Segmented control

## API reference

### MrrWaterfall

A floating waterfall from starting to ending MRR with net revenue retention and quick ratio. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between bars and the period control |
| Enter / Space | Open the accounts behind a bar |

## Accessibility

- Bars are buttons labelled with their value; the selected bar uses aria-pressed.
- Every bar's amount is printed as text.

## Motion

- Bars float in from the baseline; the account list animates in and out.

## Responsive behavior

- The account panel moves under the chart below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Order is start, new, expansion, contraction, churn, end; keep totals consistent.

## Related

- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.


---

# Cohort retention

> Retention by signup month as a heatmap, with segments.

Block · Pro · https://lodeui.com/blocks/cohort-retention

## When to use

- Product and growth teams checking whether newer cohorts retain better.

## When not to use

- Fewer than three cohorts: show a line chart.

## Installation

```bash
npx shadcn@latest add @lode/cohort-retention
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { CohortRetention } from "@/components/blocks/cohort-retention";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CohortRetention />
    </main>
  );
}
```

Built from: Heatmap, Number ticker, Segmented control

## API reference

### CohortRetention

Retention by signup month as a heatmap with a segment switcher and month 1, 6 and 11 averages. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the segment control |
| ← / → | Change segment |

## Accessibility

- The heatmap is a real table with headers; every cell prints its percentage.

## Motion

- Cells pop in along the diagonal and re-color when the segment changes.

## Responsive behavior

- The table scrolls horizontally inside the card on phones; the cohort column stays sticky.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Use null for months that haven't happened yet so cells stay empty.

## Related

- [Heatmap](https://lodeui.com/components/heatmap) — A color-scaled grid with row and column tracking, for cohorts and schedules.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.


---

# Usage forecast

> Actual and projected usage against a budget, with the day you'll cross it.

Block · Pro · https://lodeui.com/blocks/usage-forecast

## When to use

- Usage-billed products: cloud, AI tokens, API calls.

## When not to use

- Flat-priced plans.

## Installation

```bash
npx shadcn@latest add @lode/usage-forecast
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { UsageForecast } from "@/components/blocks/usage-forecast";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <UsageForecast />
    </main>
  );
}
```

Built from: Checkbox, Number ticker, Tabs

## API reference

### UsageForecast

Actual and projected spend with a confidence band, the day you'll cross the budget, and alert thresholds. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach tabs and threshold checkboxes |
| ← / → | Switch tabs |
| Space | Toggle a threshold |

## Accessibility

- The chart has role="img" with a text summary of the projection.
- Threshold checkboxes are labelled with their amounts.

## Motion

- Projection and band fade in after the actual line.

## Responsive behavior

- Thresholds stack under the chart on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
- The projection is a simple linear fit computed once per render.

## Notes for AI

- Replace the linear projection with your own model if you have one.

## Related

- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.


---

# Billing settings

> Plan, payment method, usage meters, invoices and a prorated plan change.

Block · Pro · https://lodeui.com/blocks/billing-settings

## When to use

- The billing page of a SaaS settings area.

## When not to use

- Public pricing: use the pricing section.

## Installation

```bash
npx shadcn@latest add @lode/billing-settings
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { BillingSettings } from "@/components/blocks/billing-settings";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <BillingSettings />
    </main>
  );
}
```

Built from: Action button, Button, Dialog, Number ticker, Progress, Segmented control

## API reference

### BillingSettings

Plan, usage meters, payment method and invoices, with a prorated plan change dialog and inline pay for failed invoices. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through plan options, buttons and invoices |
| ← / → | Pick a plan or billing cycle |
| Esc | Close the plan change dialog |

## Accessibility

- Plans are a labelled radio group.
- The dialog traps focus and returns it on close.
- Usage meters are progress bars with labels and values.

## Motion

- Prices roll when the cycle changes; failed invoices morph into paid.

## Responsive behavior

- Plan cards stack on phones; invoice rows become two lines.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Compute proration on the server; the block shows the number you pass.

## Related

- [Pricing section](https://lodeui.com/blocks/pricing-section) — Three tiers with a monthly/yearly toggle whose prices roll.
- [Usage forecast](https://lodeui.com/blocks/usage-forecast) — Actual and projected usage against a budget, with the day you'll cross it.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.


---

# Trading terminal

> Live price, candlesticks, a watchlist with sparklines and an order ticket.

Block · Pro · https://lodeui.com/blocks/trading-terminal

## When to use

- Trading, crypto and portfolio products.

## When not to use

- Long-term investing dashboards where live prices aren't needed.

## Installation

```bash
npx shadcn@latest add @lode/trading-terminal
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TradingTerminal } from "@/components/blocks/trading-terminal";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <TradingTerminal />
    </main>
  );
}
```

Built from: Action button, Candlestick chart, Number field, Number ticker, Segmented control, Sparkline

## API reference

### TradingTerminal

Candles with moving averages, a watchlist with sparklines, a live last price and an order ticket that fills. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through watchlist, range control and order ticket |
| ↑ / ↓ | Change quantity in the ticket |
| Enter / Space | Place the order from the focused button |

## Accessibility

- Buy and sell are a labelled toggle with aria-pressed.
- Prices are text with up and down signs, not only colors.

## Motion

- The last price ticks every 2.2 seconds; digits roll.
- Fills slide into the order list.

## Responsive behavior

- The watchlist moves under the chart below 1024px.

## Performance

- One interval drives the live price; it's cleared on unmount.
- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Replace the interval with your WebSocket feed and keep the candle shape.

## Related

- [Candlestick chart](https://lodeui.com/components/candlestick-chart) — OHLC candles with volume, moving averages and a price crosshair.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.


---

# Agent run

> An AI coding agent's run: steps stream in with search results, code and a diff.

Block · Pro · https://lodeui.com/blocks/agent-run

## When to use

- Showing what an agent or background job is doing step by step.

## When not to use

- A plain chat: use the AI chat block.

## Installation

```bash
npx shadcn@latest add @lode/agent-run
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AgentRun } from "@/components/blocks/agent-run";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AgentRun />
    </main>
  );
}
```

Built from: Avatar group, Button

## API reference

### AgentRun

An AI coding agent's run: steps stream in with timers, each expandable to show search results, code and a diff, with pause, resume and replay. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between steps and controls |
| Enter / Space | Expand a step or pause and resume |

## Accessibility

- Steps are buttons with aria-expanded.
- Status is text (Running, Done), not only icons.

## Motion

- Steps enter one by one; the running step shows a live timer.

## Responsive behavior

- Code and diffs scroll horizontally on phones.

## Performance

- One timeout schedules the next step and one interval the timer; both stop when paused or unmounted.

## Notes for AI

- Feed real events into the steps array from your agent's stream.

## Related

- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.
- [AI playground](https://lodeui.com/blocks/ai-playground) — Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.


---

# AI chat

> A chat with streamed answers, model picker, suggestions and stop.

Block · Pro · https://lodeui.com/blocks/ai-chat

## When to use

- Assistants and support bots inside a product.

## When not to use

- Comparing models: use the AI playground.

## Installation

```bash
npx shadcn@latest add @lode/ai-chat
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiChat } from "@/components/blocks/ai-chat";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiChat />
    </main>
  );
}
```

Built from: Avatar group, Dropdown menu

## API reference

### AiChat

A chat with word-by-word streaming, stop generating, model picker, suggestions and copy. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Send |
| Shift+Enter | New line |
| Tab | Reach model picker, suggestions and copy |

## Accessibility

- The message list is aria-live="polite" so answers are announced.
- Copy and stop buttons are labelled.

## Motion

- Words stream in; new messages slide up.

## Responsive behavior

- Full height of its container; the composer stays pinned.

## Performance

- Streaming appends to one message; earlier messages don't re-render.

## Notes for AI

- Replace the fake stream with your model's token stream and keep the message shape.

## Related

- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Agent run](https://lodeui.com/blocks/agent-run) — An AI coding agent's run: steps stream in with search results, code and a diff.


---

# Inbox triage

> Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.

Block · Pro · https://lodeui.com/blocks/inbox-triage

## When to use

- Queues people clear quickly: email, support, approvals, moderation.

## When not to use

- Lists people browse rather than clear.

## Installation

```bash
npx shadcn@latest add @lode/inbox-triage
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { InboxTriage } from "@/components/blocks/inbox-triage";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <InboxTriage />
    </main>
  );
}
```

Built from: Avatar group, Tabs

## API reference

### InboxTriage

Keyboard-first inbox triage with a reading pane, animated removal and undo. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| J or ↓ | Next message |
| K or ↑ | Previous message |
| E | Archive |
| S | Snooze until tomorrow |
| U | Toggle unread |

## Accessibility

- The inbox is focusable and its label lists the shortcuts.
- Shortcuts are ignored while typing in a field.
- Undo appears after every move.

## Motion

- Archived rows collapse and the next one slides up.
- The selected-row marker glides between rows.

## Responsive behavior

- The reading pane sits under the list below 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Keep single-letter shortcuts scoped to the inbox element, not the window.

## Related

- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.


---

# Week calendar

> A week view with calendars, a now line, and click-to-create events.

Block · Pro · https://lodeui.com/blocks/week-calendar

## When to use

- Scheduling, booking and team calendars.

## When not to use

- Month overviews.

## Installation

```bash
npx shadcn@latest add @lode/week-calendar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { WeekCalendar } from "@/components/blocks/week-calendar";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <WeekCalendar />
    </main>
  );
}
```

Built from: Button, Checkbox

## API reference

### WeekCalendar

A week view with a now line, calendar filters, click-to-create and delete. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through events, slots and filters |
| Enter | Create the event after typing its name |
| Esc | Cancel the new event |

## Accessibility

- Slots and events are labelled buttons.
- Calendar filters are labelled checkboxes.

## Motion

- New events grow into place; deleted ones fade out.

## Responsive behavior

- The grid scrolls horizontally on phones; the filter list moves above it.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Store times as ISO strings; the block works in local time.

## Related

- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.


---

# Onboarding checklist

> A setup checklist with progress ring and inline actions.

Block · Free · https://lodeui.com/blocks/onboarding-checklist

## When to use

- First-run setup in a SaaS dashboard.

## When not to use

- Linear forms: use a stepper.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/onboarding-checklist.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { OnboardingChecklist } from "@/components/blocks/onboarding-checklist";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <OnboardingChecklist />
    </main>
  );
}
```

Built from: Action button, Progress

## API reference

### OnboardingChecklist

Five setup steps with a progress ring, inline actions per step and a completion state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between steps and actions |
| Enter / Space | Expand a step or run its action |

## Accessibility

- Steps are buttons with aria-expanded.
- Progress is a labelled progressbar.

## Motion

- Completed steps check off and the ring fills.

## Responsive behavior

- Single column at every width.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Persist completed steps on your server so the list survives reloads.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Stepper](https://lodeui.com/components/stepper) — Horizontal or vertical steps with animated progress and back-navigation.


---

# Pricing section

> Three tiers with a monthly/yearly toggle whose prices roll.

Block · Free · https://lodeui.com/blocks/pricing-section

## When to use

- Marketing and pricing pages.

## When not to use

- Inside the app: use billing settings.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/pricing-section.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { PricingSection } from "@/components/blocks/pricing-section";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <PricingSection />
    </main>
  );
}
```

Built from: Button, Number ticker, Segmented control

## API reference

### PricingSection

Three tiers with a monthly / yearly toggle, rolling prices and a featured tier. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Switch monthly and yearly |
| Tab | Reach each tier's button |

## Accessibility

- The cycle switch is a labelled radio group.
- Prices are read as final amounts.

## Motion

- Prices roll between monthly and yearly.

## Responsive behavior

- Tiers stack below 768px; the featured tier keeps its border and shadow.

## Performance

- Static apart from the price tickers.

## Notes for AI

- Edit the tiers array; features are plain strings.

## Related

- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.


---

# SaaS revenue analytics

> Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.

Block · Pro · https://lodeui.com/blocks/revenue-analytics

## When to use

- The revenue overview of a SaaS or commerce admin.

## When not to use

- Movement analysis: use revenue breakdown or MRR waterfall.

## Installation

```bash
npx shadcn@latest add @lode/revenue-analytics
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { RevenueAnalytics } from "@/components/blocks/revenue-analytics";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <RevenueAnalytics />
    </main>
  );
}
```

Built from: Area chart, Number ticker, Segmented control, Sparkline

## API reference

### RevenueAnalytics

Revenue trend with comparison, MRR, ARR, customers and conversion with sparklines, revenue by source and a live transactions feed. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Change the range |
| Tab | Move through cards |

## Accessibility

- Every KPI states its value and change as text.
- The transactions feed is a list with labelled amounts.

## Motion

- New transactions slide in; numbers roll on range change.

## Responsive behavior

- KPIs are two columns on phones and four from 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Prepend new transactions to the feed array from your webhook or event stream; they animate in.

## Related

- [Metrics dashboard](https://lodeui.com/blocks/metrics-dashboard) — KPI tabs, one inspectable chart with period comparison, and top pages and sources.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.


---

# API keys manager

> Create scoped live/test keys, reveal once, copy, and revoke with confirmation.

Block · Pro · https://lodeui.com/blocks/api-keys-manager

## When to use

- Developer settings in any API product.

## When not to use

- OAuth apps: those need client id and secret flows.

## Installation

```bash
npx shadcn@latest add @lode/api-keys-manager
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ApiKeysManager } from "@/components/blocks/api-keys-manager";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ApiKeysManager />
    </main>
  );
}
```

Built from: Badge, Button, Checkbox, Dialog, Input, Select

## API reference

### ApiKeysManager

Create scoped live and test keys, reveal once with copy, and revoke with confirmation. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through keys and buttons |
| Esc | Close the create or revoke dialog |

## Accessibility

- Dialogs trap focus; scopes are labelled checkboxes.
- Copy announces success.

## Motion

- New keys slide into the list; revoked keys collapse out.

## Responsive behavior

- Key rows become two lines below 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Generate and hash keys on the server; show the secret only in the create response.

## Related

- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.
- [Environment variables](https://lodeui.com/blocks/env-variables) — Project env vars with masking, scopes, .env paste, dirty state and save.


---

# Deployments

> Deployment history with status, branch and commit, live build logs and redeploy.

Block · Pro · https://lodeui.com/blocks/deployments

## When to use

- CI/CD and hosting dashboards.

## When not to use

- Runtime logs: use the log viewer.

## Installation

```bash
npx shadcn@latest add @lode/deployments
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Deployments } from "@/components/blocks/deployments";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Deployments />
    </main>
  );
}
```

Built from: Badge, Button, Terminal

## API reference

### Deployments

Deployment history with status, branch, commit and author, a streaming build log and failed output. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through deployments and actions |
| Enter / Space | Select a deployment |

## Accessibility

- The selected deployment uses aria-pressed.
- Status is text in a badge.

## Motion

- The build log types out like a terminal.

## Responsive behavior

- The log moves under the list below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Stream real log lines into the Terminal lines array.

## Related

- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.


---

# Webhook logs

> Webhook deliveries with payload and response inspection, failure filter and retry.

Block · Pro · https://lodeui.com/blocks/webhook-logs

## When to use

- Developer settings for products that send webhooks.

## When not to use

- Incoming request logs.

## Installation

```bash
npx shadcn@latest add @lode/webhook-logs
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { WebhookLogs } from "@/components/blocks/webhook-logs";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <WebhookLogs />
    </main>
  );
}
```

Built from: Action button, Badge, JSON viewer, Segmented control

## API reference

### WebhookLogs

Webhook deliveries filtered by outcome, with the payload as a JSON tree, the raw response and retry. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through deliveries and controls |
| Enter / Space | Select a delivery |
| ← / → | Change the filter |

## Accessibility

- The selected delivery uses aria-pressed.
- Status codes are printed, not only colored.

## Motion

- Retry morphs through pending to the new status.

## Responsive behavior

- The inspector moves under the list below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Retry should call your server, which re-sends the stored payload.

## Related

- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [API playground](https://lodeui.com/blocks/api-playground) — Pick an endpoint, edit headers and body, send, and read the JSON response or cURL.


---

# System status

> Overall status, 60-day uptime per service and incident history.

Block · Free · https://lodeui.com/blocks/system-status

## When to use

- Status pages and trust centers.

## When not to use

- Internal monitoring with live metrics.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/system-status.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SystemStatus } from "@/components/blocks/system-status";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <SystemStatus />
    </main>
  );
}
```

Built from: Timeline, Uptime bar

## API reference

### SystemStatus

A public status block: overall state, 60-day uptime per service and incident history. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Accessibility

- Uptime bars have text summaries; incidents are a list with dates.

## Motion

- Incidents stagger in.

## Responsive behavior

- Bars shrink to fit at 320px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Use the status-page template for a full page with header and subscribe.

## Related

- [Uptime bar](https://lodeui.com/components/uptime-bar) — Daily status bars with uptime percentage and incident tooltips.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Status page](https://lodeui.com/templates/status-page) — A public status page with subscribe, uptime per service and incident history.


---

# Feature flags

> Flags per environment with switches, percentage rollouts and a change log.

Block · Pro · https://lodeui.com/blocks/feature-flags

## When to use

- Internal tools and developer platforms.

## When not to use

- End-user settings: use switches.

## Installation

```bash
npx shadcn@latest add @lode/feature-flags
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FeatureFlags } from "@/components/blocks/feature-flags";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <FeatureFlags />
    </main>
  );
}
```

Built from: Badge, Segmented control, Slider, Switch

## API reference

### FeatureFlags

Feature flags per environment with percentage rollouts, search and a change log. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through flags |
| Space | Toggle a flag |
| ← / → | Adjust rollout or environment |

## Accessibility

- Every switch and slider is labelled with the flag key.

## Motion

- Change-log entries slide in.

## Responsive behavior

- Each flag becomes a card below 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Write changes to your flag service in the switch and slider commit handlers.

## Related

- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.


---

# API playground

> Pick an endpoint, edit headers and body, send, and read the JSON response or cURL.

Block · Pro · https://lodeui.com/blocks/api-playground

## When to use

- API reference and developer portals.

## When not to use

- Production consoles that change data without confirmation.

## Installation

```bash
npx shadcn@latest add @lode/api-playground
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ApiPlayground } from "@/components/blocks/api-playground";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ApiPlayground />
    </main>
  );
}
```

Built from: Badge, Button, Code viewer, JSON viewer, Select, Tabs

## API reference

### ApiPlayground

Pick an endpoint, edit headers and body, send, and read the response with status, timing and a cURL snippet. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through endpoint, params and Send |
| ← / → | Switch request tabs |

## Accessibility

- Every field is labelled; the response is announced when it arrives.

## Motion

- The response panel fades in with its status.

## Responsive behavior

- Request and response stack below 1024px.

## Performance

- Responses are simulated locally; nothing is sent.

## Notes for AI

- Replace the simulated fetch with a proxy route so keys stay on the server.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.
- [Webhook logs](https://lodeui.com/blocks/webhook-logs) — Webhook deliveries with payload and response inspection, failure filter and retry.


---

# Environment variables

> Project env vars with masking, scopes, .env paste, dirty state and save.

Block · Pro · https://lodeui.com/blocks/env-variables

## When to use

- Project settings in hosting or developer products.

## When not to use

- App preferences.

## Installation

```bash
npx shadcn@latest add @lode/env-variables
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { EnvVariables } from "@/components/blocks/env-variables";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <EnvVariables />
    </main>
  );
}
```

Built from: Action button, Environment editor

## API reference

### EnvVariables

Environment variables for a project with masked values, scopes, .env paste and an unsaved-changes bar. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through fields |
| ⌘V / Ctrl+V | Paste a .env file into a key field |

## Accessibility

- Every field is labelled; invalid keys are marked and explained.

## Motion

- Rows animate in and out; the save bar slides up when there are changes.

## Responsive behavior

- Rows stack below 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Encrypt values at rest; the block only masks them in the UI.

## Related

- [Environment editor](https://lodeui.com/components/env-editor) — Masked env vars with per-environment scope, validation and .env paste.
- [API keys manager](https://lodeui.com/blocks/api-keys-manager) — Create scoped live/test keys, reveal once, copy, and revoke with confirmation.


---

# CRM pipeline

> Drag deals across stages; open, weighted forecast and won totals update live.

Block · Pro · https://lodeui.com/blocks/crm-pipeline

## When to use

- Sales and deal tracking.

## When not to use

- Task boards: use the kanban board.

## Installation

```bash
npx shadcn@latest add @lode/crm-pipeline
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CrmPipeline } from "@/components/blocks/crm-pipeline";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CrmPipeline />
    </main>
  );
}
```

Built from: Avatar group, Number ticker

## API reference

### CrmPipeline

A sales pipeline: drag deals between stages or move them with a menu, with a weighted forecast and stale-deal highlights. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach each deal's stage menu |
| ↑ / ↓ | Pick a stage in the menu |

## Accessibility

- Every deal has a stage select, so moving deals never needs a mouse.
- Columns are labelled with their deal count.

## Motion

- Deals glide to their new column; totals roll.

## Responsive behavior

- Columns scroll horizontally on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Probability per stage sets the weighted forecast; edit it in the stages array.

## Related

- [Kanban board](https://lodeui.com/blocks/kanban-board) — Sprint board with drag between columns, WIP limits, quick add and points.
- [CRM contacts](https://lodeui.com/blocks/crm-contacts) — Contacts on the data table with filters, expandable details, bulk email, tag and delete.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.


---

# CRM contacts

> Contacts on the data table with filters, expandable details, bulk email, tag and delete.

Block · Pro · https://lodeui.com/blocks/crm-contacts

## When to use

- Any record list people act on in bulk.

## When not to use

- Read-only lists.

## Installation

```bash
npx shadcn@latest add @lode/crm-contacts
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CrmContacts } from "@/components/blocks/crm-contacts";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CrmContacts />
    </main>
  );
}
```

Built from: Avatar group, Badge, Data table, Toast

## API reference

### CrmContacts

Contacts on the data table with search, filters, expandable rows, bulk email, tag and delete with undo, and CSV export. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move between rows |
| Space | Select a row |
| Enter | Expand a row |

## Accessibility

- Inherits the data table's labelled controls and aria-sort.

## Motion

- Rows expand smoothly; the bulk bar slides up.

## Responsive behavior

- Rows become cards below 640px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Move bulk actions to server actions and keep the toast with undo.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.
- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.


---

# Store orders

> Order KPIs, status and channel filters, bulk fulfil, packing slips and CSV export.

Block · Pro · https://lodeui.com/blocks/store-orders

## When to use

- Commerce admin order lists.

## When not to use

- Customer-facing order history.

## Installation

```bash
npx shadcn@latest add @lode/store-orders
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { StoreOrders } from "@/components/blocks/store-orders";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <StoreOrders />
    </main>
  );
}
```

Built from: Badge, Data table, KPI card, Sparkline, Toast

## API reference

### StoreOrders

Store orders with KPI cards, status and channel filters, bulk fulfil, packing slips and export. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / ↓ | Move between rows |
| Space | Select a row |
| Tab | Reach filters and bulk actions |

## Accessibility

- Inherits the data table's labelled controls.

## Motion

- The bulk bar slides up when orders are selected.

## Responsive behavior

- KPIs are two columns on phones; rows become cards.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Fulfil should call your fulfilment API, then update rows.

## Related

- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.


---

# Product detail

> Gallery that follows the color, variants with stock, quantity and add to cart.

Block · Pro · https://lodeui.com/blocks/product-detail

## When to use

- Store product pages.

## When not to use

- Product grids: use the product card.

## Installation

```bash
npx shadcn@latest add @lode/product-detail
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProductDetail } from "@/components/blocks/product-detail";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ProductDetail />
    </main>
  );
}
```

Built from: Accordion, Action button, Number field, Rating

## API reference

### ProductDetail

A product page with a gallery that follows the chosen color, sold-out sizes, quantity, validation and add to cart. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through gallery, colors, sizes and cart |
| Enter / Space | Choose an option |

## Accessibility

- Colors and sizes are labelled radio groups; sold-out sizes are disabled and say so.
- Missing size shows an error with role="alert".

## Motion

- Gallery images crossfade when the color changes.

## Responsive behavior

- Gallery stacks above details below 768px.

## Performance

- Use optimized images; only the active image is large.

## Notes for AI

- Stock per size lives in the product object; keep it in sync with your inventory.

## Related

- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.
- [Rating](https://lodeui.com/components/rating) — Interactive or read-only star rating with half stars.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.
- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.


---

# Support ticket

> Conversation with internal notes, macros, SLA countdown and customer context.

Block · Pro · https://lodeui.com/blocks/support-ticket

## When to use

- Help desks and customer support tools.

## When not to use

- Live chat widgets for customers.

## Installation

```bash
npx shadcn@latest add @lode/support-ticket
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SupportTicket } from "@/components/blocks/support-ticket";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <SupportTicket />
    </main>
  );
}
```

Built from: Avatar group, Badge, Button, Select

## API reference

### SupportTicket

A support ticket with conversation, internal notes, macros, a reply composer, SLA countdown and customer context. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ⌘Enter / Ctrl+Enter | Send the reply |
| Tab | Move through composer, macros and status |

## Accessibility

- Notes are labelled as internal, not only colored.
- The composer and status select are labelled.

## Motion

- New replies slide in; the SLA timer counts down.

## Responsive behavior

- Customer context moves under the thread below 1024px.

## Performance

- One interval drives the SLA countdown and is cleared on unmount.

## Notes for AI

- Keep notes and replies in one array with a type field.

## Related

- [Inbox triage](https://lodeui.com/blocks/inbox-triage) — Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.
- [Select](https://lodeui.com/components/select) — A pill trigger with a springy menu, typeahead, and full keyboard support.


---

# CMS posts

> Posts by status and an editor with tags, word count, preview and publish.

Block · Pro · https://lodeui.com/blocks/cms-posts

## When to use

- Blog and content admin.

## When not to use

- Rich text editing: add a real editor for the body.

## Installation

```bash
npx shadcn@latest add @lode/cms-posts
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CmsPosts } from "@/components/blocks/cms-posts";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CmsPosts />
    </main>
  );
}
```

Built from: Avatar group, Badge, Button, Tabs, Tag input, Textarea

## API reference

### CmsPosts

CMS posts by status and an editor with title, excerpt, tags, body, live word count, preview and publish. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through list and editor |
| ← / → | Switch status tabs |
| Enter / , | Add a tag |

## Accessibility

- Every field is labelled; tags have labelled remove buttons.

## Motion

- Posts animate between status lists.

## Responsive behavior

- The editor moves under the list below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Read time is word count ÷ 230, rounded, at least one minute.

## Related

- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.
- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.


---

# Sign in

> Password or magic link, SSO and GitHub, inline validation and a check-your-email state.

Block · Free · https://lodeui.com/blocks/sign-in

## When to use

- Your app's sign-in page.

## When not to use

- Sign-up flows that need more fields.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/sign-in.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SignIn } from "@/components/blocks/sign-in";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center p-6">
      <SignIn />
    </main>
  );
}
```

Built from: Button, Input

## API reference

### SignIn

Sign in with password or a magic link, plus SSO and GitHub, with inline validation and an error state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through fields and providers |
| Enter | Submit |

## Accessibility

- Fields have labels and autocomplete; errors use role="alert".

## Motion

- Switching to magic link crossfades the form; success slides in.

## Responsive behavior

- Fits 320px; providers stack on phones.

## Performance

- No dependencies beyond the button and input.

## Notes for AI

- Replace the simulated submit with your auth client, e.g. signIn.email().

## Related

- [Two-factor verification](https://lodeui.com/blocks/two-factor) — Authenticator code with resend timer, backup-code fallback and success state.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Button](https://lodeui.com/components/button) — A clear, responsive action with quiet secondary states.


---

# Two-factor verification

> Authenticator code with resend timer, backup-code fallback and success state.

Block · Free · https://lodeui.com/blocks/two-factor

## When to use

- Second step after sign-in or before sensitive actions.

## When not to use

- Enrolment (showing the QR code).

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/two-factor.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TwoFactor } from "@/components/blocks/two-factor";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center p-6">
      <TwoFactor />
    </main>
  );
}
```

Built from: Button, OTP input

## API reference

### TwoFactor

Two-factor verification with auto-submit on six digits, a resend timer, backup code fallback and a success state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| 0–9 | Enter the code |
| ⌘V / Ctrl+V | Paste the whole code |
| Tab | Reach resend and backup code |

## Accessibility

- One-time-code autocomplete; errors use role="alert".

## Motion

- Wrong codes shake; success crossfades in.

## Responsive behavior

- Fits 320px.

## Performance

- A one-second timeout drives the resend countdown.

## Notes for AI

- Verify on the server. The demo accepts 424242, or the backup code ABCD-EFGH; anything else shows the error.

## Related

- [Sign in](https://lodeui.com/blocks/sign-in) — Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- [OTP input](https://lodeui.com/components/otp-input) — One-time code boxes that handle paste and autofill, and shake on a wrong code.


---

# AI playground

> Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.

Block · Pro · https://lodeui.com/blocks/ai-playground

## When to use

- Prompt engineering and model evaluation tools.

## When not to use

- End-user chat.

## Installation

```bash
npx shadcn@latest add @lode/ai-playground
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiPlayground } from "@/components/blocks/ai-playground";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiPlayground />
    </main>
  );
}
```

Built from: AI reasoning, Badge, Button, Slider, Switch, Textarea

## API reference

### AiPlayground

Compare two models side by side on the same prompt with system prompt, temperature, reasoning trace, tokens and cost. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through prompt, parameters and Run |
| ← / → | Adjust temperature |
| Space | Toggle reasoning |

## Accessibility

- Sliders and switches are labelled.

## Motion

- Both answers stream in parallel; reasoning folds away when done.

## Responsive behavior

- Model columns stack below 768px.

## Performance

- Streams are simulated; nothing is sent.

## Notes for AI

- Call your models from a server route and stream back to each column.

## Related

- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.
- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.


---

# Kanban board

> Sprint board with drag between columns, WIP limits, quick add and points.

Block · Pro · https://lodeui.com/blocks/kanban-board

## When to use

- Task and sprint tracking.

## When not to use

- Sales deals: use the CRM pipeline.

## Installation

```bash
npx shadcn@latest add @lode/kanban-board
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { KanbanBoard } from "@/components/blocks/kanban-board";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <KanbanBoard />
    </main>
  );
}
```

Built from: Avatar group, Badge

## API reference

### KanbanBoard

A sprint board with drag between columns, WIP limits, quick add and points per column. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach each card's column select and add buttons |
| Enter | Add the typed task |
| Esc | Cancel adding |

## Accessibility

- Every card has a column select, so moving never needs a mouse.
- Columns are labelled; over-limit columns say so in text.

## Motion

- Cards glide between columns with layout animation.

## Responsive behavior

- Columns scroll horizontally on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Persist moves in the column select's onChange and in onDrop.

## Related

- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Sortable list](https://lodeui.com/components/sortable-list) — Drag to reorder, or use arrow keys on the handle; announces moves.


---

# Team members

> Seat usage, invite by email with role, change roles, resend or remove.

Block · Pro · https://lodeui.com/blocks/team-members

## When to use

- Workspace or organization settings.

## When not to use

- Public team pages: use profile cards.

## Installation

```bash
npx shadcn@latest add @lode/team-members
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TeamMembers } from "@/components/blocks/team-members";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <TeamMembers />
    </main>
  );
}
```

Built from: Avatar group, Badge, Button, Dialog, Dropdown menu, Progress, Select, Tag input, Toast

## API reference

### TeamMembers

Team management with seat usage, invite by email with role, role changes, resend and remove. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through members and actions |
| Enter / , | Add an email to invite |
| Esc | Close the invite dialog |

## Accessibility

- Role selects and menus are labelled with the member's name.

## Motion

- Invited members slide in; removed ones collapse.

## Responsive behavior

- Member rows become two lines on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Check seat limits on the server before sending invites.

## Related

- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.


---

# SaaS landing page

> Hero with signup, logos, feature grid, stats, testimonials, pricing, FAQ, CTA and footer.

Template · Pro · https://lodeui.com/templates/saas-landing

## When to use

- Launching a product site quickly with all the usual sections.

## When not to use

- A single section: use the pricing section block instead.

## Installation

```bash
npx shadcn@latest add @lode/saas-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { SaasLanding } from "@/components/templates/saas-landing";

export default function Home() {
  return <SaasLanding />;
}
```

Built from: Accordion, Button, Input, Number ticker, Reveal, Segmented control, Spotlight card, Text reveal

## API reference

### SaasLanding

A complete SaaS landing page: hero with signup, logos, features, stats, testimonials, pricing, FAQ, CTA and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through navigation, signup, pricing and FAQ |
| Enter / Space | Open a FAQ answer |

## Accessibility

- One h1; sections use headings in order.
- The signup field is labelled.

## Motion

- The headline reveals word by word, feature cards light up under the pointer, and stats and prices roll.

## Responsive behavior

- Every section stacks on phones; tested from 320px.

## Performance

- Animations start when sections scroll into view.

## Notes for AI

- Edit copy in the arrays at the top of the file.

## Related

- [Pricing section](https://lodeui.com/blocks/pricing-section) — Three tiers with a monthly/yearly toggle whose prices roll.
- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.


---

# Status page

> A public status page with subscribe, uptime per service and incident history.

Template · Free · https://lodeui.com/templates/status-page

## When to use

- Hosting a status page on your own domain.

## When not to use

- Internal dashboards.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/status-page.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/status/page.tsx
import { StatusPage } from "@/components/templates/status-page";

export default function Status() {
  return <StatusPage />;
}
```

Built from: Button, Input, Popover, System status

## API reference

### StatusPage

A complete public status page: branded header, subscribe popover, status block and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Subscribe |
| Esc | Close the subscribe popover |

## Accessibility

- The subscribe field is labelled; the popover returns focus on close.

## Motion

- Incidents stagger in.

## Responsive behavior

- Fits 320px.

## Performance

- Mostly static; render it on the server with your data.

## Notes for AI

- Feed system-status with your monitoring data.

## Related

- [System status](https://lodeui.com/blocks/system-status) — Overall status, 60-day uptime per service and incident history.
- [Uptime bar](https://lodeui.com/components/uptime-bar) — Daily status bars with uptime percentage and incident tooltips.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.


---

# Admin dashboard

> App shell with sidebar (drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys.

Template · Pro · https://lodeui.com/templates/admin-dashboard

## When to use

- Starting an internal tool or SaaS admin with real screens on day one.

## When not to use

- Marketing pages.

## Installation

```bash
npx shadcn@latest add @lode/admin-dashboard
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/admin/page.tsx
import { AdminDashboard } from "@/components/templates/admin-dashboard";

export default function Admin() {
  return <AdminDashboard />;
}
```

Built from: Avatar group, Breadcrumb, SaaS revenue analytics, CRM contacts, Team members, Billing settings, API keys manager

## API reference

### AdminDashboard

A complete admin app shell with a collapsible sidebar (a drawer on mobile), top bar, breadcrumbs and pages for overview, customers, team, billing and API keys. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through sidebar and page |
| Esc | Close the mobile drawer |

## Accessibility

- The current page has aria-current="page".
- The mobile drawer is a labelled modal dialog: focus moves in, Escape closes it and focus returns to the menu button.

## Motion

- The active-nav marker slides; pages crossfade.

## Responsive behavior

- Sidebar becomes a drawer below 768px.

## Performance

- Only the active page is mounted.

## Notes for AI

- Swap each page for your routes and keep the shell.

## Related

- [SaaS revenue analytics](https://lodeui.com/blocks/revenue-analytics) — Revenue trend, MRR, ARR, customers and conversion, source mix and a live transactions feed.
- [CRM contacts](https://lodeui.com/blocks/crm-contacts) — Contacts on the data table with filters, expandable details, bulk email, tag and delete.
- [Team members](https://lodeui.com/blocks/team-members) — Seat usage, invite by email with role, change roles, resend or remove.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [API keys manager](https://lodeui.com/blocks/api-keys-manager) — Create scoped live/test keys, reveal once, copy, and revoke with confirmation.


---

# Hero section

> Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.

Block · Pro · https://lodeui.com/blocks/hero-section

## When to use

- The first screen of a product or launch page.

## When not to use

- Inside an app: heroes belong on marketing pages.

## Installation

```bash
npx shadcn@latest add @lode/hero-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { HeroSection } from "@/components/blocks/hero-section";

export default function Home() {
  return (
    <HeroSection
      eyebrow="Now with AI insights"
      title="Analytics your whole team"
      highlight="actually reads"
      description="Dashboards, alerts and weekly summaries without a data team."
      primary={{ label: "Start free", href: "/sign-up" }}
      secondary={{ label: "Book a demo", href: "/demo" }}
    />
  );
}
```

Built from: Gradient text, Grid pattern, Number ticker, Sparkline

## API reference

### HeroSection

The hero with a default animated dashboard preview. Every text and link is a prop. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow / badge | `string` | `"40 components…" / "New"` | Badge text above the headline. |
| title / highlight | `string` | – | Headline; highlight is drawn with a flowing gradient. |
| description / note | `string` | – | Supporting line and small print. |
| primary / secondary | `{ label; href }` | – | The two actions. |
| visual | `ReactNode` | – | Replace the default product preview. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the badge link and both actions |

## Accessibility

- One h1; the gradient word stays real text.
- Entrance animations are skipped under reduced motion.

## Motion

- Headline, copy and buttons rise and unblur in sequence; the preview tilts up into place; KPI digits roll and bars grow.

## Responsive behavior

- Buttons stack full width on phones; preview KPIs stack to one column.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Keep highlight to 2–3 words.
- Pass visual to show a screenshot of your real product.

## Related

- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.
- [Logo cloud](https://lodeui.com/blocks/logo-cloud) — Trusted-by logos as an endless strip or a static grid.
- [Grid pattern](https://lodeui.com/components/grid-pattern) — A technical grid background where a few cells gently light up.
- [Gradient text](https://lodeui.com/components/gradient-text) — Text filled with a slowly flowing gradient.


---

# Feature bento

> A bento grid of features, each with a small live visual and a pointer spotlight.

Block · Pro · https://lodeui.com/blocks/feature-bento

## When to use

- Showing 4–6 features with personality.

## When not to use

- Long feature lists: use a comparison table.

## Installation

```bash
npx shadcn@latest add @lode/feature-bento
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FeatureBento } from "@/components/blocks/feature-bento";

<FeatureBento
  title="Built for speed"
  items={[
    { title: "Fast", description: "Under 100ms everywhere.", visual: <SpeedChart />, span: "tall" },
    { title: "Secure", description: "SOC 2 and SSO.", visual: <Badges /> },
  ]}
/>
```

Built from: Number ticker, Spotlight card

## API reference

### FeatureBento

A grid of feature cards. The default items include five live visuals. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow / title / description | `string` | – | Section heading. |
| items | `{ title; description; visual?; span?: "wide" \| "tall" \| "normal" }[]` | – | Cards; span sizes them on large screens. |

## Accessibility

- Each card has a heading and description as real text; visuals are supplementary.

## Motion

- Cards rise in with a stagger; a spotlight follows the pointer; visuals animate (counters, cycling command list, AI reply).

## Responsive behavior

- One column on phones, two on tablets, a 3-column bento from 1024px.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.
- Default visuals use light timers that stop on unmount.

## Notes for AI

- Use span="wide" or "tall" on one or two cards to create rhythm.

## Related

- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Stats section](https://lodeui.com/blocks/stats-section) — Headline numbers that count up when they scroll into view.


---

# Testimonials wall

> Testimonials in slowly scrolling columns that pause on hover, rows on phones.

Block · Pro · https://lodeui.com/blocks/testimonials-wall

## When to use

- Social proof on landing and pricing pages.

## When not to use

- Fewer than four quotes: use a static grid.

## Installation

```bash
npx shadcn@latest add @lode/testimonials-wall
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { TestimonialsWall } from "@/components/blocks/testimonials-wall";

<TestimonialsWall testimonials={[{ name: "Maya Chen", role: "Design lead", quote: "We shipped in a week.", rating: 5 }]} />
```

Built from: Marquee

## API reference

### TestimonialsWall

Testimonials in vertical marquees (desktop) or one horizontal marquee (phones). Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow / title | `string` | – | Heading. |
| testimonials | `{ name; role; quote; hue?; rating? }[]` | – | At least 6 work best; split across three columns. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the pause buttons |

## Accessibility

- Columns pause on hover and focus and have pause buttons.
- Ratings are labelled as "5 out of 5 stars".
- Duplicated cards for the loop are hidden from screen readers.

## Motion

- Columns scroll in opposite directions at different speeds.

## Responsive behavior

- Three columns from 768px; a single horizontal strip below.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Use real names and roles with permission.

## Related

- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Logo cloud](https://lodeui.com/blocks/logo-cloud) — Trusted-by logos as an endless strip or a static grid.
- [Rating](https://lodeui.com/components/rating) — Interactive or read-only star rating with half stars.


---

# Stats section

> Headline numbers that count up when they scroll into view.

Block · Pro · https://lodeui.com/blocks/stats-section

## When to use

- Credibility numbers on landing pages.

## When not to use

- Live metrics: use KPI cards in a dashboard.

## Installation

```bash
npx shadcn@latest add @lode/stats-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { StatsSection } from "@/components/blocks/stats-section";

<StatsSection stats={[{ value: 12400, suffix: "+", label: "Teams" }, { value: 99.99, suffix: "%", decimals: 2, label: "Uptime" }]} />
```

Built from: Number ticker

## API reference

### StatsSection

Big numbers with labels that count up in view. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title / description | `string` | – | Heading. |
| stats | `{ value; label; prefix?; suffix?; decimals?; description? }[]` | – | Two to four work best. |

## Accessibility

- Numbers are read as their final values.

## Motion

- Digits roll from zero when the grid enters the viewport; cells rise with a stagger.

## Responsive behavior

- 1, 2 or 4 columns depending on width, with grid lines that adapt.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Only use numbers you can back up.

## Related

- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.
- [KPI card](https://lodeui.com/components/kpi-card) — A metric with delta, hint and an optional sparkline.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.


---

# Logo cloud

> Trusted-by logos as an endless strip or a static grid.

Block · Pro · https://lodeui.com/blocks/logo-cloud

## When to use

- Under the hero, to show who uses you.

## When not to use

- Without permission to use the logos.

## Installation

```bash
npx shadcn@latest add @lode/logo-cloud
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="example.tsx"
import { LogoCloud } from "@/components/blocks/logo-cloud";

<LogoCloud logos={customers.map((c) => <img key={c.name} src={c.logo} alt={c.name} className="h-7" />)} />
```

Built from: Marquee

## API reference

### LogoCloud

Customer logos as wordmarks or your own artwork. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | – | Line above the logos. |
| names / logos | `string[] / ReactNode[]` | – | Names render as styled wordmarks; logos replaces them. |
| scrolling | `boolean` | `true` | Endless strip, or a static grid. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach the pause button |

## Accessibility

- Give image logos alt text with the company name.
- The strip pauses on hover and focus.

## Motion

- Logos glide in an endless loop.

## Responsive behavior

- Grid mode is two columns on phones, five on desktop.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Use monochrome logos so they sit well together.

## Related

- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Testimonials wall](https://lodeui.com/blocks/testimonials-wall) — Testimonials in slowly scrolling columns that pause on hover, rows on phones.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.


---

# CTA section

> A dark closing call to action with meteors and an email capture.

Block · Pro · https://lodeui.com/blocks/cta-section

## When to use

- The end of landing and pricing pages.

## When not to use

- More than once per page.

## Installation

```bash
npx shadcn@latest add @lode/cta-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CtaSection } from "@/components/blocks/cta-section";

<CtaSection title="Start building today" onSubmit={(email) => joinWaitlist(email)} />
```

Built from: Meteors

## API reference

### CtaSection

A dark closing section with email capture or two buttons. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title / description | `string` | – | The ask. |
| emailCapture | `boolean` | `true` | Email form; false shows primary and secondary buttons. |
| onSubmit | `(email) => Promise<void>` | – | Throw with a message to show an error. |
| primary / secondary | `{ label; href }` | – | Buttons in button mode. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Submit the email |

## Accessibility

- The field is labelled, errors use role="alert" and success is a status message.

## Motion

- Meteors streak behind; the form swaps to a success pill.

## Responsive behavior

- The field and button stack on phones.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Validate the email again on the server.

## Related

- [Meteors](https://lodeui.com/components/meteors) — Shooting stars streaking across a card or hero.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Footer section](https://lodeui.com/blocks/footer-section) — Site footer with link columns, newsletter, live status and socials.


---

# FAQ section

> Searchable FAQ with category filters, an accordion and a contact fallback.

Block · Pro · https://lodeui.com/blocks/faq-section

## When to use

- Pricing pages and help sections with 6+ common questions.

## When not to use

- Long documentation: use the help center.

## Installation

```bash
npx shadcn@latest add @lode/faq-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FaqSection } from "@/components/blocks/faq-section";

<FaqSection faqs={[{ category: "Billing", q: "Can I cancel?", a: "Any time, from Billing." }]} contact={{ label: "Email us", href: "mailto:help@acme.com" }} />
```

Built from: Accordion

## API reference

### FaqSection

Search plus category chips over an accordion. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title / description | `string` | – | Heading. |
| faqs | `{ q; a; category }[]` | – | Questions; categories become filter chips. |
| contact | `{ label; href }` | – | Fallback action. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through search, categories and questions |
| Enter / Space | Open a question |

## Accessibility

- Categories are a radio group; results update in a polite live region.
- Accordion headers use aria-expanded.

## Motion

- The category pill slides; results cross-fade on filter; answers expand by height.

## Responsive behavior

- Single column; chips wrap.

## Performance

- Filtering is local and instant.

## Notes for AI

- Keep answers to 1–3 sentences.

## Related

- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.
- [Help center](https://lodeui.com/blocks/help-center) — Help center with instant search, topics, article reader and feedback.
- [Pricing comparison](https://lodeui.com/blocks/pricing-comparison) — Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.


---

# Changelog

> Release notes timeline with type filters, cover art and subscribe.

Block · Pro · https://lodeui.com/blocks/changelog

## When to use

- Public changelogs and product update pages.

## When not to use

- Internal deploy history: use the deployments block.

## Installation

```bash
npx shadcn@latest add @lode/changelog
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Changelog } from "@/components/blocks/changelog";

<Changelog entries={[{ version: "1.2", date: "Oct 8, 2026", title: "Dark mode", tags: ["Feature"], items: ["Every screen now supports dark mode."] }]} />
```

## API reference

### Changelog

A filterable release timeline. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` | `"Changelog"` | Heading. |
| entries | `{ version; date; title; tags; items; cover? }[]` | – | Newest first; tags: Launch, Feature, Improvement, Fix. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through filters and subscribe |

## Accessibility

- An ordered list of articles with real dates; filters are a radio group.

## Motion

- Entries rise in; filtering animates entries out and closes the gaps.

## Responsive behavior

- Versions sit beside entries from 640px and above them on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Generate entries from your release notes or git tags.

## Related

- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Footer section](https://lodeui.com/blocks/footer-section) — Site footer with link columns, newsletter, live status and socials.
- [Announcement bar](https://lodeui.com/components/announcement-bar) — A slim dismissible bar above the header that rotates launch messages.


---

# Footer section

> Site footer with link columns, newsletter, live status and socials.

Block · Pro · https://lodeui.com/blocks/footer-section

## When to use

- The bottom of every marketing page.

## When not to use

- Inside apps: keep app footers minimal.

## Installation

```bash
npx shadcn@latest add @lode/footer-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FooterSection } from "@/components/blocks/footer-section";

<FooterSection brand="Acme" columns={[{ title: "Product", links: [{ label: "Pricing", href: "/pricing" }] }]} />
```

## API reference

### FooterSection

A footer with brand, newsletter, link columns, status and socials. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| brand / tagline | `string` | – | Brand name and line. |
| columns | `{ title; links: { label; href }[] }[]` | – | Up to four columns. |
| status | `string` | – | Status pill text. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through links and the newsletter |

## Accessibility

- A footer landmark with a labelled nav; social links are named.

## Motion

- Links underline on hover; newsletter swaps to a success line.

## Responsive behavior

- Columns are 2-up on phones, 4-up from 640px.

## Performance

- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.

## Notes for AI

- Point the status pill at your real status page.

## Related

- [CTA section](https://lodeui.com/blocks/cta-section) — A dark closing call to action with meteors and an email capture.
- [Status page](https://lodeui.com/templates/status-page) — A public status page with subscribe, uptime per service and incident history.
- [Logo cloud](https://lodeui.com/blocks/logo-cloud) — Trusted-by logos as an endless strip or a static grid.


---

# Pricing comparison

> Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.

Block · Pro · https://lodeui.com/blocks/pricing-comparison

## When to use

- Pricing pages where plans differ in many ways.

## When not to use

- Two simple plans: use the pricing section.

## Installation

```bash
npx shadcn@latest add @lode/pricing-comparison
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { PricingComparison } from "@/components/blocks/pricing-comparison";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <PricingComparison />
    </main>
  );
}
```

Built from: Number ticker, Segmented control, Tooltip

## API reference

### PricingComparison

A plan comparison table with sticky plan headers, a yearly toggle with rolling prices, collapsible groups, hints and a mobile plan picker. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through toggle, plans, groups and hints |
| ← / → | Switch billing cycle |
| Enter | Collapse or expand a group |

## Accessibility

- A real table with a caption, row and column headers.
- Ticks and dashes are labelled Included / Not included.
- Groups are buttons with aria-expanded.

## Motion

- Prices roll when switching cycle; the mobile picker pill slides; groups fade in.

## Responsive behavior

- Phones compare one plan at a time via the picker; all four columns from 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Keep PLANS and GROUPS values in the same order.

## Related

- [Pricing section](https://lodeui.com/blocks/pricing-section) — Three tiers with a monthly/yearly toggle whose prices roll.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [FAQ section](https://lodeui.com/blocks/faq-section) — Searchable FAQ with category filters, an accordion and a contact fallback.


---

# Invoice

> An invoice with status timeline, line items, totals, copyable bank details and pay.

Block · Pro · https://lodeui.com/blocks/invoice

## When to use

- Customer portals and billing pages.

## When not to use

- Lists of invoices: use a data table.

## Installation

```bash
npx shadcn@latest add @lode/invoice
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Invoice } from "@/components/blocks/invoice";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Invoice />
    </main>
  );
}
```

Built from: Action button, Badge

## API reference

### Invoice

An invoice with a status timeline, parties, line items, totals with discount and VAT, copyable bank details and in-place payment. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Print, PDF, Send, Copy IBAN and Pay |

## Accessibility

- The amount due is text; status is a badge with words.
- Copy and pay results are announced.

## Motion

- Status steps fill; line items fade up; the badge flips to Paid.

## Responsive behavior

- Parties stack on phones; the line-item table scrolls horizontally.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Generate PDFs on the server; wire the PDF button to that route.

## Related

- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.
- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.


---

# Checkout

> Three-step checkout with shipping choice, card entry, promo codes and order summary.

Block · Pro · https://lodeui.com/blocks/checkout

## When to use

- Stores and SaaS purchases where you control the checkout UI.

## When not to use

- If your provider offers hosted checkout, prefer it for card handling.

## Installation

```bash
npx shadcn@latest add @lode/checkout
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Checkout } from "@/components/blocks/checkout";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Checkout />
    </main>
  );
}
```

Built from: Coupon input, Credit card input, Stepper

## API reference

### Checkout

A three-step checkout (details, shipping, payment) with an order summary, promo codes, validation and a confirmation state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through fields |
| Enter | Continue (on the button) |
| ← / → | Choose shipping |

## Accessibility

- Steps use the stepper with aria-current; errors use role="alert".
- Shipping options are a radio group.

## Motion

- Steps slide in the direction you move; discounts animate into the summary; confirmation pops.

## Responsive behavior

- The summary moves below the form under 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Send card data only to your payment provider; demo code: WELCOME15, test card 4242 4242 4242 4242.

## Related

- [Credit card input](https://lodeui.com/components/credit-card-input) — Card fields with brand detection, Luhn validation and a live card that flips for the CVC.
- [Coupon input](https://lodeui.com/components/coupon-input) — Promo code field that validates, shows a removable ticket and shakes on errors.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.
- [Stepper](https://lodeui.com/components/stepper) — Horizontal or vertical steps with animated progress and back-navigation.


---

# Shopping cart

> Cart with quantity steppers, remove with undo and free-shipping progress.

Block · Pro · https://lodeui.com/blocks/shopping-cart

## When to use

- Cart pages and drawers in stores.

## When not to use

- Single-product purchases: go straight to checkout.

## Installation

```bash
npx shadcn@latest add @lode/shopping-cart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ShoppingCart } from "@/components/blocks/shopping-cart";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ShoppingCart />
    </main>
  );
}
```

Built from: Number ticker

## API reference

### ShoppingCart

A cart with quantity steppers, remove with undo, a free-shipping progress bar and a rolling subtotal. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through steppers and remove buttons |
| Enter / Space | Change quantity or remove |

## Accessibility

- Steppers are labelled per product; the free-shipping bar is a progressbar.
- Item count and undo are announced.

## Motion

- Quantities roll; removed rows slide out and others close the gap; the shipping bar fills.

## Responsive behavior

- Remove shows as an icon on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Undo keeps the item for 5 seconds; persist removals after that.

## Related

- [Checkout](https://lodeui.com/blocks/checkout) — Three-step checkout with shipping choice, card entry, promo codes and order summary.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.
- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.


---

# Order tracking

> Shipment tracking with a route map, moving van, stepper and event timeline.

Block · Pro · https://lodeui.com/blocks/order-tracking

## When to use

- Order status pages and post-purchase emails' landing pages.

## When not to use

- Real-time fleet tracking: use a map library.

## Installation

```bash
npx shadcn@latest add @lode/order-tracking
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { OrderTracking } from "@/components/blocks/order-tracking";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <OrderTracking />
    </main>
  );
}
```

## API reference

### OrderTracking

Shipment tracking with a route map and moving van, a delivery stepper, an event timeline and a copyable tracking number. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach copy and stage preview buttons |

## Accessibility

- The map is decorative; the stepper marks the current stage with aria-current="step" and the timeline repeats it as text.

## Motion

- The route fills and the van drives along it with a spring; steps and updates animate in.

## Responsive behavior

- The map scales with its width; labels stay readable at 320px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
- The van is positioned from the SVG path itself, so it always sits on the line.

## Notes for AI

- Remove the stage preview buttons in production; drive current from your carrier's status.

## Related

- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [Stepper](https://lodeui.com/components/stepper) — Horizontal or vertical steps with animated progress and back-navigation.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.


---

# Sign up

> Three-step sign-up: account, password with live rules and email code verification.

Block · Pro · https://lodeui.com/blocks/sign-up

## When to use

- Your product's sign-up page.

## When not to use

- Sign-in: use the sign-in block.

## Installation

```bash
npx shadcn@latest add @lode/sign-up
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SignUp } from "@/components/blocks/sign-up";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center p-6">
      <SignUp />
    </main>
  );
}
```

Built from: OTP input, Password strength

## API reference

### SignUp

Sign up in three steps: name and email (or Google / GitHub), a password with live rules and terms, then a 6-digit email code. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Continue |
| 0–9 | Type the code |
| ⌘V / Ctrl+V | Paste the code |

## Accessibility

- Every field is labelled with autocomplete; errors use role="alert"; the welcome state is a status message.

## Motion

- Steps slide; the progress dashes fill; the welcome check spins in.

## Responsive behavior

- Up to 384px wide; fits at 320px.

## Performance

- No dependencies beyond the password and code inputs.

## Notes for AI

- Wire steps to your auth: create the user at step 2 and verify the code at step 3. Demo code: 123456.

## Related

- [Sign in](https://lodeui.com/blocks/sign-in) — Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- [Two-factor verification](https://lodeui.com/blocks/two-factor) — Authenticator code with resend timer, backup-code fallback and success state.
- [Password strength](https://lodeui.com/components/password-strength) — New-password field with show / hide, a four-step meter and a live rules checklist.
- [Forgot password](https://lodeui.com/blocks/forgot-password) — Password reset: request link, resend timer, new password and done state.


---

# Forgot password

> Password reset: request link, resend timer, new password and done state.

Block · Pro · https://lodeui.com/blocks/forgot-password

## When to use

- The reset-password page of any app with email and password.

## When not to use

- Passwordless apps.

## Installation

```bash
npx shadcn@latest add @lode/forgot-password
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ForgotPassword } from "@/components/blocks/forgot-password";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center p-6">
      <ForgotPassword />
    </main>
  );
}
```

Built from: Password strength

## API reference

### ForgotPassword

Password reset: request a link, a check-your-inbox step with a resend timer, choose a new password with rules, and a done state. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Submit each step |
| Tab | Reach resend and back |

## Accessibility

- Never reveals whether an email exists ("If an account exists…").
- Errors use role="alert"; the done state is announced.

## Motion

- The icon morphs per step; content slides between steps.

## Responsive behavior

- Up to 384px wide.

## Performance

- A one-second timer only while resend is cooling down.

## Notes for AI

- The "Open the link" button stands in for the emailed link; route your real link to the reset stage with its token.

## Related

- [Sign in](https://lodeui.com/blocks/sign-in) — Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- [Sign up](https://lodeui.com/blocks/sign-up) — Three-step sign-up: account, password with live rules and email code verification.
- [Password strength](https://lodeui.com/components/password-strength) — New-password field with show / hide, a four-step meter and a live rules checklist.


---

# Onboarding wizard

> Welcome flow for role, goals, team size and invites, ending with confetti.

Block · Pro · https://lodeui.com/blocks/onboarding-wizard

## When to use

- Right after sign-up, to personalize the product.

## When not to use

- More than five questions: people drop off.

## Installation

```bash
npx shadcn@latest add @lode/onboarding-wizard
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { OnboardingWizard } from "@/components/blocks/onboarding-wizard";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <OnboardingWizard />
    </main>
  );
}
```

Built from: Confetti, Tag input

## API reference

### OnboardingWizard

A welcome flow for role, goals, team size and invites, with a progress bar, skip and a confetti finish. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through choices |
| Enter / Space | Pick |
| Enter or , | Add an invite email |

## Accessibility

- Questions are fieldsets with legends; single choices are radio groups and multi choices are toggle buttons.
- Progress is a labelled progressbar.

## Motion

- Steps slide; choices pop in with a stagger; confetti bursts from the finish button (skipped under reduced motion).

## Responsive behavior

- Choices are 2 columns on phones, 3 on wider screens.

## Performance

- Confetti draws on a temporary canvas that removes itself.

## Notes for AI

- Save answers to the user profile to tailor templates and docs.

## Related

- [Onboarding checklist](https://lodeui.com/blocks/onboarding-checklist) — A setup checklist with progress ring and inline actions.
- [Product tour](https://lodeui.com/components/product-tour) — A guided tour: a spotlight glides between elements with an explaining card.
- [Confetti](https://lodeui.com/components/confetti) — Fire a confetti burst from any point, or use the button that bursts from itself.
- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.


---

# Account settings

> Profile with inline edits, security toggles, active sessions and guarded delete.

Block · Pro · https://lodeui.com/blocks/settings-account

## When to use

- The account page of a SaaS app.

## When not to use

- Team or billing settings: use their own blocks.

## Installation

```bash
npx shadcn@latest add @lode/settings-account
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SettingsAccount } from "@/components/blocks/settings-account";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <SettingsAccount />
    </main>
  );
}
```

Built from: Dialog, Inline edit, Switch

## API reference

### SettingsAccount

Account settings: profile fields with inline editing and validation, avatar, security toggles, active sessions and a type-to-confirm delete. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Edit or save a field |
| Esc | Cancel editing |
| Tab | Move through settings |

## Accessibility

- Inline edits name their field; switches are labelled; sign-out buttons name the device.
- Delete requires typing the username.

## Motion

- Edits cross-fade with a saved check; signed-out sessions collapse; the dialog scales in.

## Responsive behavior

- Rows stack label above control on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Throw from onSave with your API's message, e.g. "That username is taken".

## Related

- [Inline edit](https://lodeui.com/components/inline-edit) — Text that becomes a field on click; Enter saves with validation, Escape cancels.
- [Notification preferences](https://lodeui.com/blocks/notification-preferences) — Channel-by-event matrix with column toggles, quiet hours and unsaved-changes bar.
- [Team members](https://lodeui.com/blocks/team-members) — Seat usage, invite by email with role, change roles, resend or remove.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.


---

# Notification preferences

> Channel-by-event matrix with column toggles, quiet hours and unsaved-changes bar.

Block · Pro · https://lodeui.com/blocks/notification-preferences

## When to use

- Notification settings in any product that emails, pushes or posts to chat.

## When not to use

- One or two toggles: use switches.

## Installation

```bash
npx shadcn@latest add @lode/notification-preferences
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { NotificationPreferences } from "@/components/blocks/notification-preferences";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <NotificationPreferences />
    </main>
  );
}
```

Built from: Checkbox, Select, Switch

## API reference

### NotificationPreferences

A channel-by-event matrix with select-all per channel, a required row, quiet hours, pause all and an unsaved-changes bar. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through checkboxes |
| Space | Toggle |

## Accessibility

- A table with row and column headers; every checkbox is labelled "<event> by <channel>".
- Column checkboxes show a mixed state.

## Motion

- Quiet hours expand by height; the save bar slides up when something changes.

## Responsive behavior

- The matrix scrolls horizontally under 448px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Security emails are locked on by design; keep at least one required channel for them.

## Related

- [Checkbox](https://lodeui.com/components/checkbox) — A checkbox whose tick draws itself, with an indeterminate state.
- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Account settings](https://lodeui.com/blocks/settings-account) — Profile with inline edits, security toggles, active sessions and guarded delete.


---

# Integrations gallery

> Searchable integrations with categories and connect / disconnect in place.

Block · Pro · https://lodeui.com/blocks/integrations-gallery

## When to use

- App marketplaces and integration settings.

## When not to use

- One or two integrations: put them in settings.

## Installation

```bash
npx shadcn@latest add @lode/integrations-gallery
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { IntegrationsGallery } from "@/components/blocks/integrations-gallery";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <IntegrationsGallery />
    </main>
  );
}
```

## API reference

### IntegrationsGallery

A searchable integrations directory with categories, a connected filter and connect / disconnect that resolve in place. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through search, categories and cards |
| Enter / Space | Connect or disconnect |

## Accessibility

- Connect buttons name the integration and use aria-pressed.

## Motion

- Cards re-flow with layout animation when filtering; buttons show a spinner then the result.

## Responsive behavior

- 1, 2 or 3 columns; categories scroll horizontally on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- The sample brands are fictional; use your partners' real names and logos with permission.

## Related

- [Animated beam](https://lodeui.com/components/animated-beam) — A glowing pulse travelling along a curved line between two elements.
- [API keys manager](https://lodeui.com/blocks/api-keys-manager) — Create scoped live/test keys, reveal once, copy, and revoke with confirmation.
- [Webhook logs](https://lodeui.com/blocks/webhook-logs) — Webhook deliveries with payload and response inspection, failure filter and retry.


---

# AI image generator

> Prompt to images with style and ratio, shimmer placeholders, likes and a lightbox.

Block · Pro · https://lodeui.com/blocks/ai-image-generator

## When to use

- Image generation tools and creative assistants.

## When not to use

- Stock photo search: use a search grid.

## Installation

```bash
npx shadcn@latest add @lode/ai-image-generator
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiImageGenerator } from "@/components/blocks/ai-image-generator";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiImageGenerator />
    </main>
  );
}
```

Built from: Lightbox, Segmented control

## API reference

### AiImageGenerator

Prompt to images with style and aspect controls, suggestion chips, shimmering placeholders, a lightbox gallery, likes and download. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Generate |
| Shift+Enter | New line |
| Tab | Reach styles, ratios and results |

## Accessibility

- Generation progress is announced; results open in an accessible lightbox with the prompt as alt text.

## Motion

- The wand spins while generating; placeholders shimmer; results grow into the lightbox.

## Responsive behavior

- Two result columns on phones, four from 640px.

## Performance

- Sample results are drawn as SVG, so no image files load.

## Notes for AI

- Replace the timeout with your image API and pass returned URLs as src.

## Related

- [Lightbox](https://lodeui.com/components/lightbox) — Thumbnail grid that opens a full-screen viewer with swipe, arrows and captions.
- [Prompt input](https://lodeui.com/components/prompt-input) — Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
- [AI playground](https://lodeui.com/blocks/ai-playground) — Compare two models on one prompt with parameters, reasoning, streaming, tokens and cost.


---

# AI search

> Answer engine with streamed reasoning, inline citations, sources and follow-ups.

Block · Pro · https://lodeui.com/blocks/ai-search

## When to use

- Docs search, research assistants and knowledge bases.

## When not to use

- Open-ended chat: use the AI chat block.

## Installation

```bash
npx shadcn@latest add @lode/ai-search
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiSearch } from "@/components/blocks/ai-search";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiSearch />
    </main>
  );
}
```

Built from: AI reasoning, Citation list

## API reference

### AiSearch

An answer engine: question box, streamed reasoning steps, an answer with inline citations, source cards and related questions. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Ask |
| Tab | Reach citations, sources and related questions |

## Accessibility

- The answer is marked aria-busy while streaming; citation marks link to their sources.

## Motion

- Reasoning steps appear one by one then fold; the answer types out with a cursor; related questions fade in last.

## Responsive behavior

- Single column; sources go 2-up from 640px.

## Performance

- Streams by revealing characters of a known answer; swap in your token stream.

## Notes for AI

- Return citations as indices into your sources array, as in ANSWER.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Citation list](https://lodeui.com/components/citation-list) — Numbered sources and inline citation marks for AI answers.
- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.


---

# Meeting scheduler

> Book a call: host card, calendar, time slots and confirmation.

Block · Pro · https://lodeui.com/blocks/meeting-scheduler

## When to use

- Demo booking, consultations and interviews.

## When not to use

- Internal calendars: use the week calendar.

## Installation

```bash
npx shadcn@latest add @lode/meeting-scheduler
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { MeetingScheduler } from "@/components/blocks/meeting-scheduler";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MeetingScheduler />
    </main>
  );
}
```

Built from: Calendar, Time slot picker

## API reference

### MeetingScheduler

Book a call: host card with duration choice, a calendar of open days, time slots with in-place confirm and a confirmation view. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Arrow keys | Move through days |
| Enter | Pick a day |
| ↑ / ↓ | Move through times |

## Accessibility

- Disabled days are marked; slots are a radio group; booking is announced.

## Motion

- Slots slide in per day; confirm grows out of the chosen time; confirmation pops in.

## Responsive behavior

- Three columns from 1024px, stacked below.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Fetch free/busy for the visible month and mark unavailable slots.

## Related

- [Calendar](https://lodeui.com/components/calendar) — Single-date calendar with month and year jumping, marked days and grid keyboard support.
- [Time slot picker](https://lodeui.com/components/time-slot-picker) — Bookable time slots where picking one slides out a confirm button.
- [Week calendar](https://lodeui.com/blocks/week-calendar) — A week view with calendars, a now line, and click-to-create events.


---

# File manager

> File browser with folders, grid / list views, search, stars and right-click actions.

Block · Pro · https://lodeui.com/blocks/file-manager

## When to use

- Document storage, asset libraries and attachments.

## When not to use

- Code repositories: use the tree view.

## Installation

```bash
npx shadcn@latest add @lode/file-manager
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FileManager } from "@/components/blocks/file-manager";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <FileManager />
    </main>
  );
}
```

Built from: Context menu, Progress

## API reference

### FileManager

A file browser with folders and breadcrumbs, grid and list views, search, stars, right-click actions and a storage meter. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between files |
| Enter | Open a folder or preview a file |
| Shift+F10 | Open the file's actions |

## Accessibility

- Each file is a focusable area named after the file, with a context menu.
- The view switch is a labelled radio group.

## Motion

- Files re-flow between grid and list; deleted files shrink away; the view pill slides.

## Responsive behavior

- Two grid columns on phones, up to four on desktop.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Load folder contents lazily when opened.

## Related

- [Context menu](https://lodeui.com/components/context-menu) — Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.
- [Tree view](https://lodeui.com/components/tree-view) — Folders and files with animated expand, indent guides and full tree keyboard support.
- [File dropzone](https://lodeui.com/components/file-dropzone) — Drag-and-drop upload with type, size and count checks and per-file progress.


---

# Team chat

> Team chat with channels, reactions, mentions, typing indicator and mobile drawer.

Block · Pro · https://lodeui.com/blocks/team-chat

## When to use

- Collaboration tools and in-app messaging.

## When not to use

- Customer support threads: use the support ticket block.

## Installation

```bash
npx shadcn@latest add @lode/team-chat
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { TeamChat } from "@/components/blocks/team-chat";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <TeamChat />
    </main>
  );
}
```

Built from: Mention input, Typing indicator

## API reference

### TeamChat

A team chat with channels and unread counts, message reactions, @mentions, a typing indicator and a mobile channel drawer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ⌘Enter / Ctrl+Enter | Send |
| @ | Mention someone |
| Tab | Reach reactions and channels |

## Accessibility

- Messages are articles in a live region; reactions are toggle buttons named with their count.
- The mobile channel list is a labelled dialog.

## Motion

- Messages rise in; reactions pop; the typing indicator appears before replies; the active channel marker slides.

## Responsive behavior

- The channel sidebar becomes a drawer below 768px.

## Performance

- Auto-scrolls only when new messages arrive.

## Notes for AI

- Replace the simulated reply with your realtime channel (WebSocket or SSE).

## Related

- [Mention input](https://lodeui.com/components/mention-input) — A textarea that suggests people as you type @ and inserts their handle.
- [Typing indicator](https://lodeui.com/components/typing-indicator) — Bouncing dots in a chat bubble with who is typing.
- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.
- [Inbox triage](https://lodeui.com/blocks/inbox-triage) — Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.


---

# Crypto wallet

> Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.

Block · Pro · https://lodeui.com/blocks/crypto-wallet

## When to use

- Crypto and fintech apps.

## When not to use

- Trading with order books: use the trading terminal.

## Installation

```bash
npx shadcn@latest add @lode/crypto-wallet
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CryptoWallet } from "@/components/blocks/crypto-wallet";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CryptoWallet />
    </main>
  );
}
```

Built from: Area chart, Dialog, Number ticker, Segmented control, Slide to confirm, Sparkline

## API reference

### CryptoWallet

A wallet with a hideable balance, quick actions, a portfolio chart with ranges, holdings with sparklines and a slide-to-send dialog. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach actions, ranges and holdings |
| Enter | Confirm send (on the slider handle) |

## Accessibility

- Hide balance is a toggle button; changes are text with ▲ / ▼, not only color.
- Send requires a deliberate slide or Enter.

## Motion

- The balance rolls; the chart morphs between ranges; actions press in.

## Responsive behavior

- Holdings move under the chart below 1024px.

## Performance

- Chart series are computed once per range.

## Notes for AI

- Fetch prices server-side and stream updates; never trust client prices for transfers.

## Related

- [Slide to confirm](https://lodeui.com/components/slide-to-confirm) — Drag the handle to the end to confirm a payment or action; Enter works too.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Payment card](https://lodeui.com/components/payment-card) — A wallet card with a holographic sheen that follows the pointer and a number reveal.
- [Trading terminal](https://lodeui.com/blocks/trading-terminal) — Live price, candlesticks, a watchlist with sparklines and an order ticket.


---

# Expense tracker

> Spending by category, budget bars that warn, quick add and recent expenses.

Block · Pro · https://lodeui.com/blocks/expense-tracker

## When to use

- Personal finance, team spend and budgeting tools.

## When not to use

- Accounting ledgers: use a data table.

## Installation

```bash
npx shadcn@latest add @lode/expense-tracker
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ExpenseTracker } from "@/components/blocks/expense-tracker";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ExpenseTracker />
    </main>
  );
}
```

Built from: Donut chart, Number ticker

## API reference

### ExpenseTracker

Monthly spending with a category donut, budget bars that warn near the limit, an AI tip, quick add and recent expenses. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through quick add |
| ← / → | Pick a category |
| Enter | Add the expense |

## Accessibility

- Budget bars are labelled progressbars; amounts are text; categories are a labelled radio group.

## Motion

- Budget bars fill with a stagger; new expenses slide in; the donut highlights a category when you hover its bar.

## Responsive behavior

- Two columns from 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Generate the tip from real month-to-date data.

## Related

- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.
- [Treemap](https://lodeui.com/components/treemap) — Squarified rectangles sized by value, for revenue mix, storage and market caps.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.


---

# Help center

> Help center with instant search, topics, article reader and feedback.

Block · Pro · https://lodeui.com/blocks/help-center

## When to use

- Self-serve support and knowledge bases.

## When not to use

- Developer API docs: use a docs layout with a table of contents.

## Installation

```bash
npx shadcn@latest add @lode/help-center
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { HelpCenter } from "@/components/blocks/help-center";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <HelpCenter />
    </main>
  );
}
```

## API reference

### HelpCenter

A help center with an instant search hero, topic cards, an article reader with steps and feedback, and a contact fallback. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through search, topics and articles |
| Enter | Open |

## Accessibility

- Result counts are announced; articles use real headings and ordered steps.

## Motion

- Topics lift on hover; views slide between list and article; feedback swaps in place.

## Responsive behavior

- Topic cards are 1 or 2 columns.

## Performance

- Search is local; for large help centers, query your search service.

## Notes for AI

- Track "Was this helpful?" votes per article.

## Related

- [FAQ section](https://lodeui.com/blocks/faq-section) — Searchable FAQ with category filters, an accordion and a contact fallback.
- [AI search](https://lodeui.com/blocks/ai-search) — Answer engine with streamed reasoning, inline citations, sources and follow-ups.
- [Table of contents](https://lodeui.com/components/table-of-contents) — On-this-page list that highlights the current section, with a gliding marker and progress ring.


---

# Realtime analytics

> Live visitors counter, per-second bars, event feed, top pages and devices.

Block · Pro · https://lodeui.com/blocks/realtime-analytics

## When to use

- Launch days, live events and ops dashboards.

## When not to use

- Historical reporting: use the metrics dashboard.

## Installation

```bash
npx shadcn@latest add @lode/realtime-analytics
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { RealtimeAnalytics } from "@/components/blocks/realtime-analytics";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <RealtimeAnalytics />
    </main>
  );
}
```

Built from: Animated list, Number ticker

## API reference

### RealtimeAnalytics

Live visitors with a pulsing counter, a per-second bar stream, an event feed, a top-pages race and device split. Pausable. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Pause / Resume |

## Accessibility

- The bar stream is an image with a description; the feed isn't announced (too chatty) but can be paused.

## Motion

- Bars shift left each second; the newest is highlighted; feed items spring in; pages reorder as counts change.

## Responsive behavior

- The feed moves under the counter below 1024px.

## Performance

- One interval drives everything and stops when paused or unmounted.

## Notes for AI

- Feed it from a WebSocket and batch updates to about once a second.

## Related

- [Animated list](https://lodeui.com/components/animated-list) — A feed where new entries spring in at the top and older ones make room.
- [Metrics dashboard](https://lodeui.com/blocks/metrics-dashboard) — KPI tabs, one inspectable chart with period comparison, and top pages and sources.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.


---

# Lead detail

> CRM lead with deal stage, AI lead score, activity timeline, notes and next steps.

Block · Pro · https://lodeui.com/blocks/lead-detail

## When to use

- CRM record pages.

## When not to use

- Lists of leads: use CRM contacts.

## Installation

```bash
npx shadcn@latest add @lode/lead-detail
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { LeadDetail } from "@/components/blocks/lead-detail";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <LeadDetail />
    </main>
  );
}
```

Built from: Badge, Gauge, Select, Tabs

## API reference

### LeadDetail

A CRM lead with contact and company, deal stage and value, an AI lead score, an activity timeline with notes and next steps. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through stage, tabs, note and tasks |
| Enter | Add a note |
| ← / → | Switch tabs |

## Accessibility

- The score is a labelled meter; tasks are toggle buttons; winning a deal is announced.

## Motion

- Notes slide into the timeline; tasks pop when done; tabs cross-fade.

## Responsive behavior

- The profile column moves above the activity below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Explain the score with factors, as in the list under the gauge.

## Related

- [CRM contacts](https://lodeui.com/blocks/crm-contacts) — Contacts on the data table with filters, expandable details, bulk email, tag and delete.
- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.


---

# AI startup landing

> A landing page for an AI assistant: streaming chat hero, animated data-flow diagram, features, pricing and FAQ.

Template · Pro · https://lodeui.com/templates/ai-landing

## When to use

- Launching an AI assistant, copilot or knowledge product.

## When not to use

- Products where AI isn't the main story.

## Installation

```bash
npx shadcn@latest add @lode/ai-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { AiLanding } from "@/components/templates/ai-landing";

export default function Page() {
  return <AiLanding />;
}
```

Built from: Animated beam, Chat message, CTA section, FAQ section, Feature bento, Footer section, Hero section, Logo cloud, Pricing section, Testimonials wall, Voice orb

## API reference

### AiLanding

A complete landing page for an AI assistant: streaming chat hero with a voice orb, an animated data-flow diagram, features, testimonials, pricing, FAQ, CTA and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through header, sections and forms |
| Enter | Open the mobile menu or submit |

## Accessibility

- One h1; every section has a heading; diagram nodes are labelled images.
- Motion is reduced or removed under prefers-reduced-motion.

## Motion

- The hero answer streams in while the orb speaks; beams pulse from your tools into the assistant.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Rename "Atlas" and replace the sample Q&A in AssistantPreview.

## Related

- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Voice orb](https://lodeui.com/components/voice-orb) — A living orb for voice assistants: idle, listening, thinking and speaking states.
- [Animated beam](https://lodeui.com/components/animated-beam) — A glowing pulse travelling along a curved line between two elements.
- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.


---

# Fintech landing

> A neobank landing page: stacked holographic cards, rates, budget rings, trust stats and FAQ.

Template · Pro · https://lodeui.com/templates/fintech-landing

## When to use

- Banking, cards, savings and payments products.

## When not to use

- B2B finance tools: use the CRM or analytics pages as a base.

## Installation

```bash
npx shadcn@latest add @lode/fintech-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { FintechLanding } from "@/components/templates/fintech-landing";

export default function Page() {
  return <FintechLanding />;
}
```

Built from: Activity rings, CTA section, FAQ section, Footer section, Hero section, Number ticker, Payment card, Stats section, Testimonials wall

## API reference

### FintechLanding

A complete neobank landing page: stacked holographic cards, features, a rolling savings rate, budget rings, trust stats, testimonials, FAQ and CTA. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through header, sections and forms |

## Accessibility

- Rates and amounts are text; cards are decorative previews with readable numbers.
- Card tilt and sheen are off under reduced motion.

## Motion

- Cards fan out into a stack; the savings rate rolls; budget rings sweep in.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Have compliance review rates, insurance and legal lines before publishing.

## Related

- [Payment card](https://lodeui.com/components/payment-card) — A wallet card with a holographic sheen that follows the pointer and a number reveal.
- [Activity rings](https://lodeui.com/components/activity-rings) — Concentric progress rings like a fitness watch, overlapping past 100%.
- [Stats section](https://lodeui.com/blocks/stats-section) — Headline numbers that count up when they scroll into view.
- [Crypto wallet](https://lodeui.com/blocks/crypto-wallet) — Wallet balance, portfolio chart, holdings with sparklines and a slide-to-send flow.


---

# Developer tool landing

> An API platform landing page: terminal hero, code sample, features grid, plan comparison and changelog.

Template · Pro · https://lodeui.com/templates/devtool-landing

## When to use

- SDKs, APIs, infrastructure and developer tools.

## When not to use

- Consumer apps.

## Installation

```bash
npx shadcn@latest add @lode/devtool-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { DevtoolLanding } from "@/components/templates/devtool-landing";

export default function Page() {
  return <DevtoolLanding />;
}
```

Built from: Changelog, Code viewer, CTA section, Footer section, Grid pattern, Hero section, Logo cloud, Pricing comparison, Terminal

## API reference

### DevtoolLanding

A complete API platform landing page: typing terminal hero, a highlighted code sample on a grid, features, plan comparison, changelog, CTA and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through header, code tabs, plans and changelog filters |

## Accessibility

- Terminal output is a live log readable by screen readers; code is real selectable text.

## Motion

- The terminal types the install; grid cells glow behind the code; feature cells fade in.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Replace CODE with your real quickstart snippet.

## Related

- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [Pricing comparison](https://lodeui.com/blocks/pricing-comparison) — Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.
- [Changelog](https://lodeui.com/blocks/changelog) — Release notes timeline with type filters, cover art and subscribe.


---

# E-commerce landing

> A storefront landing page: perks ticker, editorial hero, product grid with cart, story and reviews.

Template · Pro · https://lodeui.com/templates/ecommerce-landing

## When to use

- Direct-to-consumer brands and small stores.

## When not to use

- Large catalogs: add search and filters.

## Installation

```bash
npx shadcn@latest add @lode/ecommerce-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { EcommerceLanding } from "@/components/templates/ecommerce-landing";

export default function Page() {
  return <EcommerceLanding />;
}
```

Built from: CTA section, Footer section, Marquee, Product card, Testimonials wall

## API reference

### EcommerceLanding

A complete storefront landing page: perks ticker, editorial hero, product grid with a live bag count, brand story, reviews, newsletter and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through products, swatches and add-to-bag |

## Accessibility

- Product cards have labelled swatches and buttons; the hero image has a description.

## Motion

- Products rise in; add-to-bag confirms in place and updates the header count.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Pass real product images via the ProductCard image prop.

## Related

- [Product card](https://lodeui.com/components/product-card) — Product tile with swatches, wishlist, sale price and add-to-cart.
- [Shopping cart](https://lodeui.com/blocks/shopping-cart) — Cart with quantity steppers, remove with undo and free-shipping progress.
- [Product detail](https://lodeui.com/blocks/product-detail) — Gallery that follows the color, variants with stock, quantity and add to cart.
- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.


---

# Agency landing

> A studio landing page: word-by-word headline, capabilities ticker, morphing case studies and services.

Template · Pro · https://lodeui.com/templates/agency-landing

## When to use

- Design and development studios, freelancers and portfolios.

## When not to use

- Product companies.

## Installation

```bash
npx shadcn@latest add @lode/agency-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { AgencyLanding } from "@/components/templates/agency-landing";

export default function Page() {
  return <AgencyLanding />;
}
```

Built from: CTA section, Footer section, Marquee, Morphing dialog, Stats section, Testimonials wall, Text reveal

## API reference

### AgencyLanding

A complete studio landing page: word-by-word headline, capabilities ticker, case studies that morph into dialogs, services, stats, testimonials and contact. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through work, services and contact |
| Enter | Open a case study |
| Esc | Close it |

## Accessibility

- Case studies open as modal dialogs with focus trapping; the headline is read as one sentence.

## Motion

- The headline reveals word by word; the ticker scrolls; cards morph into dialogs; services slide in.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Swap gradient covers for project images with the MorphingDialog image prop.

## Related

- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Morphing dialog](https://lodeui.com/components/morphing-dialog) — A card that morphs into a dialog: cover, title and frame fly to their new places.
- [Marquee](https://lodeui.com/components/marquee) — Endless, seamless scroller for logos and testimonials that glides to a stop on hover.
- [Testimonials wall](https://lodeui.com/blocks/testimonials-wall) — Testimonials in slowly scrolling columns that pause on hover, rows on phones.


---

# Mobile app landing

> A mobile app landing page: phone mockup, store buttons, scroll-stacked features and reviews.

Template · Pro · https://lodeui.com/templates/app-landing

## When to use

- iOS and Android apps.

## When not to use

- Web-only SaaS: use the analytics or AI pages.

## Installation

```bash
npx shadcn@latest add @lode/app-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { AppLanding } from "@/components/templates/app-landing";

export default function Page() {
  return <AppLanding />;
}
```

Built from: Activity rings, CTA section, FAQ section, Footer section, Scroll stack, Testimonials wall

## API reference

### AppLanding

A complete mobile app landing page: phone mockup with a live screen, store buttons, scroll-stacked features, reviews, FAQ and download CTA. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through store buttons and sections |

## Accessibility

- Store buttons are links with full names; the phone screen is decorative.

## Motion

- The phone floats in; tasks slide onto its screen; feature cards stack as you scroll.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Use the official store badges from Apple and Google in production.

## Related

- [Scroll stack](https://lodeui.com/components/scroll-stack) — Cards that stick and stack as you scroll, earlier ones shrinking into the pile.
- [Activity rings](https://lodeui.com/components/activity-rings) — Concentric progress rings like a fitness watch, overlapping past 100%.
- [FAQ section](https://lodeui.com/blocks/faq-section) — Searchable FAQ with category filters, an accordion and a contact fallback.


---

# CRM landing

> A CRM landing page: live pipeline hero, feature bento, results stats and plan comparison.

Template · Pro · https://lodeui.com/templates/crm-landing

## When to use

- Sales, CRM and revenue tools.

## When not to use

- Consumer products.

## Installation

```bash
npx shadcn@latest add @lode/crm-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { CrmLanding } from "@/components/templates/crm-landing";

export default function Page() {
  return <CrmLanding />;
}
```

Built from: CTA section, Feature bento, Footer section, Hero section, Logo cloud, Number ticker, Pricing comparison, Stats section

## API reference

### CrmLanding

A complete CRM landing page: a live pipeline hero, logos, a feature bento, results stats, plan comparison, CTA and footer. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through header, features and plans |

## Accessibility

- The pipeline preview is real text; stats are read as final values.

## Motion

- Deals drop into pipeline stages; the weighted total rolls; stats count up.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Replace STAGES with a screenshot-like preview of your own product.

## Related

- [CRM pipeline](https://lodeui.com/blocks/crm-pipeline) — Drag deals across stages; open, weighted forecast and won totals update live.
- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.
- [Pricing comparison](https://lodeui.com/blocks/pricing-comparison) — Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.


---

# Analytics landing

> An analytics SaaS landing page with an embedded live realtime dashboard demo.

Template · Pro · https://lodeui.com/templates/analytics-landing

## When to use

- Analytics, monitoring and dashboard products.

## When not to use

- Products without a visual dashboard to show.

## Installation

```bash
npx shadcn@latest add @lode/analytics-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { AnalyticsLanding } from "@/components/templates/analytics-landing";

export default function Page() {
  return <AnalyticsLanding />;
}
```

Built from: CTA section, FAQ section, Feature bento, Footer section, Hero section, Logo cloud, Pricing section, Realtime analytics, Testimonials wall

## API reference

### AnalyticsLanding

A complete analytics SaaS landing page with an animated dashboard hero and an embedded live realtime demo, plus features, reviews, pricing and FAQ. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through the live demo, plans and FAQ |

## Accessibility

- The live demo can be paused; numbers are text.

## Motion

- Hero KPIs roll and bars grow; the realtime demo streams visitors.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Point the live demo at a public demo account when you have one.

## Related

- [Realtime analytics](https://lodeui.com/blocks/realtime-analytics) — Live visitors counter, per-second bars, event feed, top pages and devices.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Pricing section](https://lodeui.com/blocks/pricing-section) — Three tiers with a monthly/yearly toggle whose prices roll.


---

# Waitlist landing

> A one-screen waitlist page: particles, countdown, email capture, referral link and signup count.

Template · Pro · https://lodeui.com/templates/waitlist-landing

## When to use

- Pre-launch pages and private betas.

## When not to use

- After launch: use a full landing page.

## Installation

```bash
npx shadcn@latest add @lode/waitlist-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { WaitlistLanding } from "@/components/templates/waitlist-landing";

export default function Page() {
  return <WaitlistLanding />;
}
```

Built from: Avatar group, Flip clock, Gradient text, Number ticker, Particles

## API reference

### WaitlistLanding

A one-screen waitlist page: particles, a countdown, email capture with validation, a referral link after joining and a live signup count. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Join |
| Tab | Reach the copy-link button |

## Accessibility

- The field is labelled; errors use role="alert"; the confirmation is a status message.
- The countdown is a labelled timer.

## Motion

- Particles drift; the headline unblurs; the countdown flips; the form swaps to a referral card.

## Responsive behavior

- One centered column that fits at 320px.

## Performance

- Particles pause when off screen and draw once under reduced motion.

## Notes for AI

- Store signups server-side and generate a unique referral code per person.

## Related

- [Flip clock](https://lodeui.com/components/flip-clock) — Split-flap countdown where every digit flips like a departures board.
- [Particles](https://lodeui.com/components/particles) — A drifting constellation of dots on canvas that moves away from the pointer.
- [CTA section](https://lodeui.com/blocks/cta-section) — A dark closing call to action with meteors and an email capture.


---

# Conference landing

> An event landing page: countdown, speakers, day-by-day schedule, tickets and FAQ.

Template · Pro · https://lodeui.com/templates/conference-landing

## When to use

- Conferences, meetups, workshops and launches.

## When not to use

- Recurring classes: use a calendar-based page.

## Installation

```bash
npx shadcn@latest add @lode/conference-landing
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
// app/page.tsx
import { ConferenceLanding } from "@/components/templates/conference-landing";

export default function Page() {
  return <ConferenceLanding />;
}
```

Built from: CTA section, FAQ section, Flip clock, Footer section, Grid pattern, Logo cloud, Tabs

## API reference

### ConferenceLanding

A complete event landing page: date and venue, countdown, speakers, a day-by-day schedule, ticket tiers, sponsors, FAQ and newsletter. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Switch schedule days |
| Tab | Move through speakers, tickets and FAQ |

## Accessibility

- The schedule is an ordered list per day; day tabs use aria-selected; ticket prices are text.

## Motion

- The title rises; the countdown flips; speaker cards lift on hover; schedule days slide.

## Responsive behavior

- Every section stacks on phones; the header collapses into a menu below 768px.
- Tested from 320px to 1920px.

## Performance

- Section animations start when they scroll into view and run once.
- No data fetching: copy and sample data live in the file.

## Notes for AI

- Installs with landing-kit.tsx (the shared header and section heading); edit the header links there or via props.
- Replace gradient speaker portraits with photos and alt text.

## Related

- [Flip clock](https://lodeui.com/components/flip-clock) — Split-flap countdown where every digit flips like a departures board.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [FAQ section](https://lodeui.com/blocks/faq-section) — Searchable FAQ with category filters, an accordion and a contact fallback.
- [Grid pattern](https://lodeui.com/components/grid-pattern) — A technical grid background where a few cells gently light up.