# Buildspace UI Registry

> A shadcn-CLI-compatible registry for the Buildspace "Ink & Paper" design system: an installable theme, components, and blocks. Every item installs with `npx shadcn add <url>`. This file helps AI agents discover items and read the exact instructions to install them.

Install the theme first — it restyles stock shadcn components in place — then add any component or block. Append `.md` to an item's registry path (e.g. `/r/accent-card.md`) for an agent-readable install guide with its dependencies.

## Getting started

Add the theme (restyles stock shadcn components in place, provides both light and dark modes):

```sh
npx shadcn add https://ui.buildspace.studio/r/buildspace.json
```

Then add any upstream shadcn component (`npx shadcn add button`) and it inherits the theme, or add the Buildspace items below.

Before installing an item that lists Buildspace registry items under **Dependencies** below (most blocks, plus `accent-card`-derived components), add this registry alias to your project's `components.json` first — the `shadcn` CLI needs it to resolve `@buildspace/*` names when it installs that item's dependencies, even though the top-level install command above uses a full URL:

```json
{
  "registries": {
    "@buildspace": "https://ui.buildspace.studio/r/{name}.json"
  }
}
```

## Theme

- [Buildspace](https://ui.buildspace.studio/r/buildspace.md): The Buildspace Ink & Paper theme: editorial serif headlines, sticker-lift shadows, and ink-and-paper semantic tokens. Restyles stock shadcn components in place — install this, then `shadcn add` any upstream component.
- [Buildspace accent pastels](https://ui.buildspace.studio/r/theme-accents.md): The six pastel accent families (lilac, peach, mint, sky, butter, rose) with bg/icon/text/dot variants. Install alongside the base theme, use sparingly — at most one filled accent surface per view.
- [Buildspace Blocks (all)](https://ui.buildspace.studio/r/buildspace-blocks.md): One-command install of every Buildspace page-building block — forms, headers, tables, charts, and more.
- [Buildspace Chat Kit](https://ui.buildspace.studio/r/buildspace-chat-kit.md): One-command install of the agentic-chat block collection: message list, composer, tool-call card, and a dockable assistant panel.

## Libraries

- [accents-lib](https://ui.buildspace.studio/r/accents-lib.md)

## Components

- [Progress](https://ui.buildspace.studio/r/progress.md): Radix progress bar with an optional accent tint — the one primitive that needed real runtime logic, not just restyling.
- [Theme toggle](https://ui.buildspace.studio/r/theme-toggle.md): Light/dark toggle button and next-themes provider. Also mount the included `ThemeProvider` around your app root (e.g. in `layout.tsx`) — installing this item alone doesn't wire it up.
- [Accent card](https://ui.buildspace.studio/r/accent-card.md): Card, icon chip, and dot in one of six pastel accent families.
- [Accent pill](https://ui.buildspace.studio/r/accent-pill.md): Small pastel-accent pill label.
- [Status badge](https://ui.buildspace.studio/r/status-badge.md): Sticker-style status badge with tone variants.
- [Empty state](https://ui.buildspace.studio/r/empty-state.md): Accent-card empty state with icon, heading, and description.
- [Chart container](https://ui.buildspace.studio/r/chart-container.md): The Recharts foundation every chart block renders through — tooltip, legend, and per-series color assignment stay consistent everywhere a chart appears.

## Blocks

- [Login form](https://ui.buildspace.studio/r/login-form.md): Centered card, one shape above the heading, stacked fields, one full-width CTA.
- [Dashboard header](https://ui.buildspace.studio/r/dashboard-header.md): Breadcrumbs, large serif title, status sticker, quiet chips, CTA row, then tabs.
- [Empty state block](https://ui.buildspace.studio/r/empty-state-block.md): Centered empty state with one accent icon and dual actions.
- [Card callout](https://ui.buildspace.studio/r/card-callout.md): The one loud, filled-pastel card a view is allowed — reserve for a single hero moment per page.
- [Code block](https://ui.buildspace.studio/r/code-block.md): Ink-dark, mono-text terminal block. Never nests a pastel surface inside it.
- [Pricing table](https://ui.buildspace.studio/r/pricing-table.md): Three-tier pricing grid — the middle card lifts as the featured plan.
- [Stats grid](https://ui.buildspace.studio/r/stats-grid.md): Grid of quiet accent-card stat tiles — icon, big serif number, quiet label.
- [Feature grid](https://ui.buildspace.studio/r/feature-grid.md): Borderless icon + title + description grid for marketing sections.
- [FAQ accordion](https://ui.buildspace.studio/r/faq-accordion.md): Single-open FAQ list built on the accordion primitive.
- [Settings panel](https://ui.buildspace.studio/r/settings-panel.md): Stacked settings form: text field, a row of toggles, then a save CTA.
- [Activity feed](https://ui.buildspace.studio/r/activity-feed.md): Timeline of avatar + actor + action rows, each tagged with a status sticker.
- [Data table](https://ui.buildspace.studio/r/data-table.md): Ink-bordered table with sticker status badges and a pill pagination footer.
- [Command menu](https://ui.buildspace.studio/r/command-menu.md): Self-contained cmd+K / ctrl+K palette that filters a static list of grouped links.
- [Microapp shell](https://ui.buildspace.studio/r/microapp-shell.md): Thin single-purpose tool chrome: title, sentence, capability chips, and a toolbar — no breadcrumbs or tabs.
- [Logo mark](https://ui.buildspace.studio/r/logo-mark.md): A rounded-square icon mark and a horizontal wordmark lockup, both drawn in currentColor — swap the letter/name for your own brand.
- [Area chart](https://ui.buildspace.studio/r/chart-area.md): A smooth line with a gradient fill fading to transparent — trend lines over time.
- [Bar chart](https://ui.buildspace.studio/r/chart-bar.md): Rounded data-ends, thin bars, quiet grid — vertical or horizontal, stacked or grouped.
- [Line chart](https://ui.buildspace.studio/r/chart-line.md): Multi-series line chart with smooth monotone curves and an active-dot hover state.
- [Donut chart](https://ui.buildspace.studio/r/chart-donut.md): Composition-of-parts donut with an optional center label — best for four slices or fewer.
- [Radar chart](https://ui.buildspace.studio/r/chart-radar.md): Multi-axis radar/spider chart for comparing several dimensions of one or more series.
- [Radial gauge chart](https://ui.buildspace.studio/r/chart-radial.md): Single-value gauge for a conversion rate, quota attainment, or engagement score against a target.
- [Usage meter](https://ui.buildspace.studio/r/usage-meter.md): The quota/usage-meter pattern: a serif headline number, an accented progress bar, and a danger sticker at the cap.
- [Quota meter list](https://ui.buildspace.studio/r/quota-meter-list.md): Multi-subject quota list: name, used/limit count, an at-cap sticker, and an accented progress bar per row.
- [Chat tool card](https://ui.buildspace.studio/r/chat-tool-card.md): A tool-call card for agentic chat UIs, covering the full lifecycle: streaming, approval, answered, denied, and errored.
- [Chat message list](https://ui.buildspace.studio/r/chat-message-list.md): Renders UIMessage.parts generically — text parts become messages, tool parts become chat-tool-cards. Auto-scrolls as a reply streams in.
- [Chat prompt input](https://ui.buildspace.studio/r/chat-prompt-input.md): Enter-to-send composer with paste and drag-and-drop image attachments.
- [Assistant panel](https://ui.buildspace.studio/r/assistant-panel.md): The dockable form: a fixed trigger button plus the same thread inside a right-side sheet.

## Optional

- [Component gallery](https://ui.buildspace.studio/components): Live previews of every component
- [Block gallery](https://ui.buildspace.studio/blocks): Live previews of every block