Components

63 components translated from Figma into React and Tailwind, ready to copy or pull in with npx boardui add. Everything shares the same tokens, so it all fits together.

Foundations

2The tokens everything else is built on.

Color

The full palette and semantic tokens.

DisplayTitleHeadlineBody regularMono caption

Typography

Type scale, weights, and text styles.

Base

28The everyday building blocks.

Two new components

Carousel and Input OTP are installable through the CLI today.

Announcement

Dismissible banner for product news.

Avatar

User photo with initials fallback.

Breadcrumb

Path trail with collapsing levels.

Button

Primary, secondary, and danger actions.

Button Group

Fused row of selectable buttons.

Carousel

Slide through cards with snap, arrows and dots.

SelectedUnselectedIndeterminate

Checkbox

Animated tick, card variant, two sizes.

CompletedWaiting+14.8%ConfirmedFailedIn reviewv2.4.0DraftLive-3.2%BetaArchived

Chip

Compact removable filter tokens.

Close Button

The little ×, done properly.

Mertcan Esmergul

hi@mertcan.works

30 min intro meeting

Let's discuss your design needs and how we can collaborate 🥳

30 minutesEnglish

Meeting date, August 2026

August 2026

Date Picker

Popover calendar for single dates.

Divider

Single, double, and filled content separators.

Dropdown

Composable menus - teams, models, actions.

Drag and drop to upload or select

PDF, JPG, PNG, XLSX (max 8 MB)

Uploading ...

Uploaded successfully!

File Upload

Drag, validate, and track upload progress.

Icon Button

Square action button, icon only.

Input

Text field with addons and validation.

Input OTP

One-time-code boxes with paste and autofill.

Link Button

Inline text action styled like a link.

Notification

Status messages with icons, avatars, and actions.

Pagination

Page numbers with truncation.

WeeklyMonthlyYearly

Radio

Gradient dot, card variant, two sizes.

Segmented Control

Sliding pill option switcher.

Select

Single-choice listbox with search.

Slider

Single-value and min/max range selection.

Social Button

Sign-in buttons for 24 providers, logos included.

Switch

On/off toggle with spring motion.

Name	Role	Status
Olivia Rhye	Product Designer	Active
Phoenix Baker	Engineer	Active
Lana Steiner	Design Lead	Invited
Demi Wilkinson	Frontend Engineer	Active

Table

Sortable columns, sticky header.

Components48

Blocks6

Charts

Tabs

Underline and pill tab lists.

Tooltip

Positioned hints on hover and focus.

Blocks

11Larger assemblies, ready to drop in.

Welcome back

or continue with

New here? Create an account

Auth Card

Sign-in and sign-up blocks with social login.

Plan usage limits · Max (5x)

5-hour limitResets in 2 hr 46 min38%

Weekly · all modelsResets Tue 3:00 PM3%

Weekly · ProResets Tue 3:00 PM5%

Agent Limits

Context window and plan usage limits.

5 steps left

Read project files

Update and install light mode tokens

Implement dark mode tokens

Add reusable registered theme toggle

Run registry, lint and production build

Agent Progress

Collapsible progress for multi-step AI tasks.

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

+2 more

Calendar

Full month view with event pills.

Total Results

48 customers

	Status
John Clarkson	Delivery failed	Sep 05, 2026	$3.412
Aspen Lubin	Delivery failed	Mar 25, 2026	$1.899
Michael Ekstrom	Shipped	Aug 01, 2026	$2.752
Kianna Vaccaro	Shipped	Apr 02, 2026	$145
Livia Saris	Delivery failed	Nov 14, 2026	$708

Data Table

Filters, selection, and pagination wired up.

Notification Center

Grouped activity inbox with tabs and actions.

Current plan

Ultra $149/mo

You are on 7x more usage than Regular.

Limits

You are on 7x more usage than Premium

Pull Requests

Review provider

Select Github or other providers for reviews

PR destination

Open pull request links inside your app

Notifications

Critical requests

Get notified when the mode needs to make a critical decision

System notifications

Show fundamental notifications when an agent completes a task

Completion sound

Sound effect a task is completed

Dispatch alerts

Push notification on your phone when BoardUI messages you

Settings Modal

Multi-page settings in a controlled dialog.

Sidebar

Floating app navigation with teams menu.

Agent ThinkingNew

Agent thinking indicators for chat composers.

Composer LoaderNew

Orbiting light band for a working composer.

ComposerNewPro

AI chat input with menus, mic, and status bar.

Charts

17Data cards for dashboards.

Activity

Move

1,592 kcal

Exercise

1h 45m

Running

5.2 km

Activity Rings

Concentric progress rings, Apple style.

Visitors

94,700

+8.2%

Organic50,500

Referral25,900

Paid18,300

Area Chart

Stacked, overlapping or 100% area series.

Devices

Browsers

Operating systems

Screen sizes

Visitors

Chrome53%

Safari27%

Firefox9%

Edge6%

Samsung Internet2%

Bar List

Ranked breakdown rows with share bars and tabs.

Sessions · Conversion 3.7%

83,200

+9.4%

Combo Chart

Bars and a line on independent axes.

Contributions this year

$7,462

+14.8%

Lifetime tokens

562.7M

Peak tokens

12h 54m

Longest task

62 days

Top streak

Activity

JanFebMarAprMayJunJulAugSepOctNovDec

Contributions

GitHub-style activity heatmap.

Earned so far

$7,462

+14.8%

Earnings Chart

Bar chart with period comparison.

Sign-up funnel

197

+5.2%

Last 30 days

Link opened

197

Started

110

Completed

Converted

Funnel Chart

Flow funnel with tapered stages and conversion pills.

Active users

1,892

+5.2%

Last 7 days

Mon

Tue

Wed

Thu

Fri

Sat

Sun

000204060810121416182022

LessMore

Heatmap Chart

Matrix heatmap with a theme-following ramp.

Most active days

32,459

total steps

JanuaryJanuary

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Most Active Days

Weekday bars linked to the rings.

Visitors

1,424

+5.2%

Jan – Jun 2024

Radar Chart

Filled, dotted, lines, and score radars.

Visitors

925

+5.2%

Jan – Jun 2024

Radial Chart

Rings, gauges, and a stacked half gauge.

Revenue

$18,240

+9.4%

Line Chart

Curved or sharp line over a soft area.

Tracked time

86h

This week

Sankey Chart

Flow diagram with tinted links and shares.

Revenue per account

742

+6.8%

RevenueSessions

Starter270

Growth783

Scale1,388

Scatter Chart

Correlation dots, bubbles when sized.

Sleep score

Excellent

29 Jun - 5 Jul

Duration: 7h 50m

49/50

Bedtime: 20m earlier

29/30

Interruptions: 5m wake up

20/20

Sleep Score

Radial gauge with score breakdown.

Pipeline

4,820

+2.4%

Last 30 days

Visits

4,820100%

Sign-up

3,26068%

Active

2,01042%

Pro

1,16024%

Team

54011%

Enterprise

1804%

Visits

4,820

Sign-up

3,260

Active

2,010

Pro

1,160

Team

540

Enterprise

180

Stage Bars

Funnel stages as rounded horizontal pills.

Steps

31,600

total steps

29 Jun - 5 Jul29 Jun - 5 Jul

Steps Chart

Daily steps with goal marker.

Templates

5Complete screens, wired together.

Code

12 Uncomitted changes+156-23

boardui/app/components/button.tsx +74

New

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

Agentic chat

update our color tokens for dark mode and add a reusable theme toggle to the registry. run lint and a production build when you're done.

57%

12 Uncomitted changes+156-23

boardui/app/components/button.tsx +74

New

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (