# Use and adapt boardui

Use the documented interfaces and source layout for **boardui**. The sections below retain the README’s examples and configuration details.

## Components

### Application blocks

Composed screens and panels: sidebars, chat, tables, settings, cards.

| Component | What it is | Install |
| --- | --- | --- |
| [Agent Chat](https://www.boardui.com/components/chat-starter) | A working chat app: app sidebar, streaming replies, thinking indicator, a composer pill with stop control, a chat-history rail with local thread switching, and a setup notice when no provider key is set. | `npx boardui@latest add agent-chat` |
| [Agent Log](https://github.com/Up-to-code/boardui/blob/main/components/application/agent-log/agent-log.tsx) | Shared streaming-log machinery: the reveal ticker, the blur-in with its soft clipping edge, and the curved tree guide that draws itself. Behind Task List and Web Search. | `npx boardui@latest add agent-log` |
| [Agent Thinking](https://www.boardui.com/components/agent-thinking) | Agent thinking indicator for chat composers — dot wave, dot spin, stars, and infinity variants with a shimmering label and elapsed timer. | `npx boardui@latest add agent-thinking` |
| [App Shell](https://github.com/Up-to-code/boardui/blob/main/components/application/app-shell/app-shell.tsx) | Page frame for the chat starter: the sidebar, a phone drawer, and a titled content card, carrying the starter's own navigation so the sidebar only links to pages the app has. | `npx boardui@latest add app-shell` |
| [Auth Card](https://www.boardui.com/components/auth-card) | Sign-in and sign-up cards with social providers stacked with labels or inline as icons, plus email fields and a CTA. | `npx boardui@latest add auth-card` |
| [Composer Loader](https://www.boardui.com/components/composer-loader) | Loading state that wraps a chat composer — an iridescent light band orbiting the rim with a soft inward bloom, fading in while the agent works. | `npx boardui@latest add composer-loader` |
| [Data Table](https://www.boardui.com/components/data-table) | TanStack-powered data table with sorting, selection, and pagination. | `npx boardui@latest add data-table` |
| [Important Alerts Card](https://www.boardui.com/components/medical-profile) | Scrollable alert feed with tinted icon circles and date pills. | `npx boardui@latest add important-alerts-card` |
| [Notification Center](https://www.boardui.com/components/notification-center) | Tabbed activity inbox with grouped notifications, unread state, avatars, status icons, and inline actions. | `npx boardui@latest add notification-center` |
| [Orders Chart Card](https://www.boardui.com/components/orders-chart-card) | Free chart card: a year of monthly orders as bars, this year beside last year for every month, with a count-up headline, delta chip and hover readout. | `npx boardui@latest add orders-chart-card` |
| [Patient Info Card](https://www.boardui.com/components/medical-profile) | Profile card with avatar and label/value detail rows. | `npx boardui@latest add patient-info-card` |
| [Revenue Chart Card](https://www.boardui.com/components/revenue-chart-card) | Free chart card: a year of monthly revenue as an area against the year before, with a count-up headline, delta chip and hover readout per month. | `npx boardui@latest add revenue-chart-card` |
| [Settings Modal](https://www.boardui.com/components/settings-modal) | Controlled multi-page settings dialog with General, Profile, Tools, and Storage views. | `npx boardui@latest add settings-modal` |
| [Sidebar](https://www.boardui.com/components/sidebar) | The floating dashboard sidebar with team menu, nav, announcement, and user menu. | `npx boardui@latest add sidebar` |
| [Stat Cards](https://www.boardui.com/components/stat-cards) | KPI stat card row with delta chips. | `npx boardui@latest add stat-cards` |
| [Theme Toggle](https://www.boardui.com/components/theme-toggle) | Manual light/dark control with a click-origin reveal, local persistence, and no system-theme dependency. | `npx boardui@latest add theme-toggle` |

### Base components

The everyday building blocks.

| Component | What it is | Install |
| --- | --- | --- |
| [Announcement](https://www.boardui.com/components/announcement) | Dismissible announcement card used in the sidebar footer. | `npx boardui@latest add announcement` |
| [Avatar](https://www.boardui.com/components/avatar) | Image or initials avatar in multiple sizes and tints. | `npx boardui@latest add avatar` |
| [Badge](https://www.boardui.com/components/badge) | Counter pills and the Kbd shortcut hint. | `npx boardui@latest add badge` |
| [Breadcrumb](https://www.boardui.com/components/breadcrumb) | Icon-capable breadcrumb trail. | `npx boardui@latest add breadcrumb` |
| [Button](https://www.boardui.com/components/button) | Primary, secondary, ghost, and danger buttons in three sizes with icon support. | `npx boardui@latest add button` |
| [Button Group](https://www.boardui.com/components/button-group) | Row of secondary-style buttons fused into one bordered control with hairline dividers and selectable items. | `npx boardui@latest add button-group` |
| [Carousel](https://www.boardui.com/components/carousel) | Gallery carousel built on CSS scroll-snap: swipe, arrows and a position indicator. | `npx boardui@latest add carousel` |
| [Checkbox](https://www.boardui.com/components/checkbox) | React Aria checkbox with animated tick and indeterminate state. | `npx boardui@latest add checkbox` |
| [Checkbox Card](https://www.boardui.com/components/checkbox) | Bordered selectable card driven by a checkbox. | `npx boardui@latest add checkbox-card` |
| [Chip](https://www.boardui.com/components/chip) | Status/delta chips in bold and soft variants across the accent palette. | `npx boardui@latest add chip` |
| [Close Button](https://www.boardui.com/components/close-button) | Compact dismiss button for banners, modals, and chips. | `npx boardui@latest add close-button` |
| [Date Picker](https://www.boardui.com/components/date-picker) | Single-date picker with month navigation, built on React Aria. | `npx boardui@latest add date-picker` |
| [Date Range Picker](https://www.boardui.com/components/date-picker) | Two-month range picker sharing the date-picker chrome. | `npx boardui@latest add date-range-picker` |
| [Divider](https://www.boardui.com/components/divider) | Horizontal content divider with single-line, double-line, filled, and aligned variants. | `npx boardui@latest add divider` |
| [Dropdown](https://www.boardui.com/components/dropdown) | Composable popover menu (trigger, panel, groups, rows, dividers) built on React Aria — the recipe behind the sidebar team/account menus. | `npx boardui@latest add dropdown` |
| [File Upload](https://www.boardui.com/components/file-upload) | Drag-and-drop file upload with validation, animated progress, and a completion callback. | `npx boardui@latest add file-upload` |
| [Icon Button](https://www.boardui.com/components/icon-button) | Square icon-only button in two sizes. | `npx boardui@latest add icon-button` |
| [Input](https://www.boardui.com/components/input) | Text input with label, hint text, error states, and leading icon support. | `npx boardui@latest add input` |
| [Input OTP](https://www.boardui.com/components/input-otp) | One-time-code field with a monospace box per digit, paste distribution and autofill support. | `npx boardui@latest add input-otp` |
| [Kbd](https://www.boardui.com/components/badge) | Keyboard shortcut hint pill. | `npx boardui@latest add kbd` |
| [Link Button](https://www.boardui.com/components/link-button) | Inline text action styled like a link — primary/secondary variants, three sizes, icon support, renders <a> or <button>. | `npx boardui@latest add link-button` |
| [Meeting Scheduler](https://www.boardui.com/components/date-picker) | Date + time-slot scheduler popover. | `npx boardui@latest add meeting-scheduler` |
| [Notification](https://www.boardui.com/components/notification) | Dismissible notification with status icons, avatars, action buttons, and timed countdown. | `npx boardui@latest add notification` |
| [Pagination](https://www.boardui.com/components/pagination) | Numbered pagination with prev/next and ellipsis collapsing. | `npx boardui@latest add pagination` |
| [Radio](https://www.boardui.com/components/radio) | React Aria radio group with the gradient selected dot, two sizes, and the bare RadioDot glyph for menu rows. | `npx boardui@latest add radio` |
| [Radio Card](https://www.boardui.com/components/radio) | Bordered selectable card driven by a radio — the radio flavor of Checkbox Card. | `npx boardui@latest add radio-card` |
| [Segmented Control](https://www.boardui.com/components/segmented-control) | Pill-style segmented control (Weekly / Monthly / Yearly switchers). | `npx boardui@latest add segmented-control` |
| [Select](https://www.boardui.com/components/select) | React Aria select with styled trigger, non-modal popover, and free-form item content. | `npx boardui@latest add select` |
| [Slider](https://www.boardui.com/components/slider) | Single-value and min/max range sliders with exact-value bubbles and keyboard controls. | `npx boardui@latest add slider` |
| [Social Button](https://www.boardui.com/components/social-button) | Sign-in buttons for 24 providers, with brand logos, three colour treatments and an icon-only form. | `npx boardui@latest add social-button` |
| [Status Dot](https://www.boardui.com/components/chip) | Colored status indicator dot used inside selects and tables. | `npx boardui@latest add status-dot` |
| [Switch](https://www.boardui.com/components/switch) | Skeuomorphic toggle switch in two sizes. | `npx boardui@latest add switch` |
| [Switch Card](https://www.boardui.com/components/switch) | Bordered settings row driven by a switch. | `npx boardui@latest add switch-card` |
| [Table](https://www.boardui.com/components/table) | Static table primitives matching the dashboard tables. | `npx boardui@latest add table` |
| [Tabs](https://www.boardui.com/components/tabs) | Underline and pill tab variants built on React Aria. | `npx boardui@latest add tabs` |
| [Tooltip](https://www.boardui.com/components/tooltip) | Light-surface tooltip built on React Aria. | `npx boardui@latest add tooltip` |

### Foundations

Tokens, type scale, global styles, utilities, and the agent rules.

| Component | What it is | Install |
| --- | --- | --- |
| [Agent rules](https://github.com/Up-to-code/boardui/blob/main/.cursor/rules/boardui.mdc) | Always-on design rules for AI agents (semantic tokens, type scale, conventions), installed as a Cursor rule file. | `npx boardui@latest add rules` |
| [Agent runtime](https://www.boardui.com/components/chat-starter) | Streaming chat endpoint for agent templates: one AI_API_KEY from OpenAI, Anthropic, Google, OpenRouter, Groq, xAI or Vercel AI Gateway (or any OpenAI-compatible server by URL), a config probe for unconfigured deploys, and the message contract the BoardUI chat UI installs against. | `npx boardui@latest add agent-runtime` |
| [Chevron icons](https://www.boardui.com/components/dropdown) | Custom chevron glyphs (select caret, sortable table headers) matching the Figma strokes. | `npx boardui@latest add chevrons` |
| [cx utility](https://github.com/Up-to-code/boardui/blob/main/utils/cx.ts) | tailwind-merge wrapper aware of BoardUI's composite text styles, plus the sortCx helper. | `npx boardui@latest add cx` |
| [Global styles](https://github.com/Up-to-code/boardui/blob/main/styles/globals.css) | Tailwind entry css: dark-mode variant, base resets, component animations, and table styling. Imports theme.css and typography.css. | `npx boardui@latest add globals` |
| [Logo](https://github.com/Up-to-code/boardui/blob/main/components/foundations/brand/logo.tsx) | BoardUI brand mark placeholder — swap with your own logo component. | `npx boardui@latest add logo` |
| [Theme tokens](https://www.boardui.com/components/color) | Color primitives, semantic tokens (text/background/border/foreground/chart), radii, shadows, and button gradient utilities. | `npx boardui@latest add theme` |
| [Typography tokens](https://www.boardui.com/components/typography) | The full Figma type scale as composite text-{family}-{weight} Tailwind utilities. | `npx boardui@latest add typography` |
| [useCountUp hook](https://github.com/Up-to-code/boardui/blob/main/hooks/use-count-up.ts) | Animated rolling number hook used by chart headline figures. | `npx boardui@latest add use-count-up` |
| [useDismissOnOutsidePress hook](https://github.com/Up-to-code/boardui/blob/main/utils/use-dismiss-on-outside-press.ts) | Closes React Aria popovers on outside press without swallowing the outside click. | `npx boardui@latest add use-dismiss-on-outside-press` |

## Commands in the root manifest

The captured [package.json](https://github.com/Up-to-code/boardui/blob/HEAD/package.json) declares the following scripts. Run them from the directory containing that manifest.

| Command | Script |
| --- | --- |
| `npm run dev` | `next dev` |
| `npm run build` | `next build` |
| `npm run start` | `next start` |
| `npm run typecheck` | `tsc --noEmit` |

## Troubleshoot a local change

1. Reproduce the smallest example from the [quick-start guide](/docs/up-to-code-boardui/quick-start-guide).
2. Compare required configuration and dependency versions with the README.
3. Check the linked issue tracker for the same error. Include the command, runtime version, and relevant error when reporting a problem; omit credentials.

## Source and help

- [GitHub repository](https://github.com/Up-to-code/boardui)
- [Original README](https://github.com/Up-to-code/boardui/blob/main/README.md)
- [Issues and existing reports](https://github.com/Up-to-code/boardui/issues)
- [Open the project website](https://www.boardui.com)

The catalog identifies the license as **MIT**. Read the repository license before redistributing source or assets.

This catalog entry is a fork. The README may describe upstream packages, domains, or release procedures; those destinations do not establish a separate release of this fork.