BoardUI

BoardUI is a React design system for agentic interfaces: the parts an AI product needs and the parts every dashboard needs, in one visual language, as source files in your project. This repository is the whole free tier, and its homepage is a working AI chat on your own model key.

Click the button, paste one API key when Vercel asks for it, and the first deploy already answers.

This repository is generated from BoardUI's source and takes no pull requests. See CONTRIBUTING.md.

Why BoardUI?

• Built for agent products. Chat, thinking indicator, agent log, composer and sidebar, next to the tables, cards and forms around them.
• Source, not a dependency. npx boardui add copies the files into your project. Change anything.
• One visual language. Figma first, 400+ semantic tokens, light and dark from the same classes.
• Accessible by default. React Aria Components underneath, Tailwind CSS v4 on top, no runtime CSS.
• RTL Support. Direction-aware layouts, keyboard navigation, and overlays for Arabic, Hebrew, and other right-to-left languages.
• Agent-native. MCP server, agent skill, AGENTS.md rules and llms.txt, so coding agents build with the system.

What's in this repository

• All 69 free items as source: base components, application blocks, tokens and type scale. The catalogue is below.
• The app: a chat at /, a dashboard with the two free charts, and sign-in and sign-up screens, all built from the components in this repository. Chat history stays in the visitor's browser. No database.
• app/api/chat/route.ts, which reads your key server-side and streams replies. The key never reaches the browser.

Bring your own key

One variable. The provider is read from the key itself:

Create the key with a spending limit where the provider offers one: OpenRouter can cap the credits a key may spend, OpenAI has usage limits per project. The key never reaches the browser, but the chat itself is open to anyone who has your URL, so the cap is what bounds the cost.

Set CHAT_MODEL to use a different model. For Mistral or DeepSeek, whose keys have no recognisable shape, add AI_PROVIDER=mistral or AI_PROVIDER=deepseek. For any OpenAI-compatible server (Ollama, LM Studio, vLLM, LiteLLM, Together) set AI_BASE_URL and CHAT_MODEL. Every provider's usual variable (OPENAI_API_KEY, ANTHROPIC_API_KEY, ...) works too. See .env.example.

Run it locally

npm install
cp .env.example .env.local   # then put your key in AI_API_KEY
npm run dev

Install into an existing project

Every component in this repository also installs on its own, as source, into any Next.js project.

With an agent

BoardUI has an MCP server, so Claude Code, Cursor and any MCP client can browse the catalog and install for you. Add it once:

claude mcp add boardui -- npx -y boardui@latest mcp

Cursor and most other clients take the same server in their MCP config:

{
  "mcpServers": {
    "boardui": { "command": "npx", "args": ["-y", "boardui@latest", "mcp"] }
  }
}

Then ask in plain words. "Install every free BoardUI component" installs the whole free catalog in one go. "Add a data table and stat cards to the dashboard" installs just those and wires them in. The rules in AGENTS.md keep whatever it builds on BoardUI's tokens and type scale. Setup for VS Code, Codex and the rest is at boardui.com/mcp.

With the CLI

npx boardui@latest list              # every component, one line each
npx boardui@latest add data-table    # one component and what it depends on
npx boardui@latest add --all         # everything in this repository

RTL Support

BoardUI supports Arabic, Hebrew, and other right-to-left languages with the same component source. The app already uses DirectionProvider in app/layout.tsx. To switch the whole app to Arabic, change the document and provider together:

import { DirectionProvider } from "@/components/foundations/direction/direction";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider locale="ar">{children}</DirectionProvider>
      </body>
    </html>
  );
}

Keep the existing font classes, metadata, and theme script when updating your layout. Use he for Hebrew, or en-US with dir="ltr" for English. Choose a font with Arabic or Hebrew coverage. Nest providers for regions in another language; CSS direction alone does not configure React Aria keyboard navigation, calendars, or portalled menus.

In an existing project, install the foundation with npx boardui@latest add direction. Use logical styles such as ps/pe, ms/me, start/end, and text-start/text-end for your own layouts. Mirror navigation arrows and drawer motion, and pass dir={useDirection()} to custom portal roots. Keep email addresses, URLs, code, and OTP digits in LTR regions; their fields still align with the surrounding layout.

Translate labels, placeholders, and accessible names in your application's translation layer, and use Intl for dates, numbers, and currencies. The optional template-copy foundation provides TemplateCopyProvider for translating display copy. Direction and translation are configured separately; Chinese (zh-CN) uses LTR.

When working with an agent, ask it to read the direction component and usage examples, install it, and configure the matching document and provider locale. The rules in AGENTS.md and .cursor/rules/boardui.mdc include the direction conventions. For an older installation, preserve your customizations before refreshing component source and global styles.

See the RTL setup guide and live Arabic/Hebrew examples.

The live examples use the actual Auth Card, Date Range Picker, Radio Cards, and Checkbox components. For example, these preferences show both checkbox states in Arabic:

"use client";

import { DirectionProvider } from "@/components/foundations/direction/direction";
import { Checkbox } from "@/components/base/checkbox/checkbox";
import { SegmentedControl, SegmentedControlItem } from "@/components/base/segmented-control/segmented-control";

export function Preferences() {
  return (
    <DirectionProvider locale="ar">
      <div className="flex flex-col gap-4">
        <SegmentedControl aria-label="الفترة" defaultSelectedKeys={["weekly"]}>
          <SegmentedControlItem id="daily">يومي</SegmentedControlItem>
          <SegmentedControlItem id="weekly">أسبوعي</SegmentedControlItem>
          <SegmentedControlItem id="monthly">شهري</SegmentedControlItem>
          <SegmentedControlItem id="yearly">سنوي</SegmentedControlItem>
        </SegmentedControl>
        <Checkbox defaultSelected>إشعارات البريد الإلكتروني</Checkbox>
        <Checkbox>تحديثات المنتج</Checkbox>
      </div>
    </DirectionProvider>
  );
}

For Hebrew, use locale="he" with the labels התראות בדוא״ל and עדכוני מוצר. The first checkbox starts checked; the second starts unchecked. Both remain interactive and follow the provider's direction.

Components

Application blocks

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