React Design Systemfor Agentic Interface Agentic Interface Agentic Interface

BoardUI is a React-based design system with 50+ unique components, 180+ building blocks and 400+ design tokens, designed in Figma.

Start for free

Mertcan Esmergül

Date of Birth

28 July, 1997

Gender

Male

Blood Type

A rh+

GP Doctor

Mattheus Clarkson

Steps

31,600

total steps

29 Jun - 5 Jul29 Jun - 5 Jul

Sleep score

Excellent

29 Jun - 5 Jul

Duration: 7h 50m

49/50

Bedtime: 20m earlier

29/30

Interruptions: 5m wake up

20/20

Most active days

32,459

total steps

JanuaryJanuary

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Activity

Move

1,592 kcal

Exercise

1h 45m

Running

5.2 km

Important alerts

this week

29 Jun - 5 Jul

High Heart rate

Your heart rate rose above 120 BPM while you seemed to be inactive for 10 minutes starting at 8:59 AM, 12 June.

June, 12

Medical ID

Your emergency contact and allergy information was updated in your Medical ID.

June, 9

Lab results ready

Your latest blood panel ordered by Dr. Mattheus Clarkson is back — cholesterol and glucose are within the normal range.

June, 9

Medication reminder

You missed your 9:00 AM dose of Metoprolol. Take it as soon as possible unless your next dose is near.

June, 8

Irregular sleep

Your bedtime shifted by more than 2 hours on 3 of the last 7 nights, which can affect your sleep score.

June, 6

Low blood oxygen

Your blood oxygen dipped to 93% for a short period during sleep on the night of 4 June.

June, 5

Mertcan Esmergül

Date of Birth

28 July, 1997

Gender

Male

Blood Type

A rh+

GP Doctor

Mattheus Clarkson

Steps

31,600

total steps

29 Jun - 5 Jul29 Jun - 5 Jul

Sleep score

Excellent

29 Jun - 5 Jul

Duration: 7h 50m

49/50

Bedtime: 20m earlier

29/30

Interruptions: 5m wake up

20/20

Most active days

32,459

total steps

JanuaryJanuary

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec

Activity

Move

1,592 kcal

Exercise

1h 45m

Running

5.2 km

Important alerts

this week

29 Jun - 5 Jul

High Heart rate

Your heart rate rose above 120 BPM while you seemed to be inactive for 10 minutes starting at 8:59 AM, 12 June.

June, 12

Medical ID

Your emergency contact and allergy information was updated in your Medical ID.

June, 9

Lab results ready

Your latest blood panel ordered by Dr. Mattheus Clarkson is back — cholesterol and glucose are within the normal range.

June, 9

Medication reminder

You missed your 9:00 AM dose of Metoprolol. Take it as soon as possible unless your next dose is near.

June, 8

Irregular sleep

Your bedtime shifted by more than 2 hours on 3 of the last 7 nights, which can affect your sleep score.

June, 6

Low blood oxygen

Your blood oxygen dipped to 93% for a short period during sleep on the night of 4 June.

June, 5

Booking dates, August 2026

August 2026

Drag and drop to upload or select

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

Uploading ...

Uploaded successfully!

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

Contributions this year

$7,462

+14.8%

Lifetime tokens

562.7M

Peak tokens

12h 54m

Longest task

62 days

Top streak

Activity

JanFebMarAprMayJunJulAugSepOctNovDec

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

Welcome backSign in to your workspace

Password

Remember meForgot password?

Models

Effort Medium

FasterSmarter

npm boardui@latest addbutton-group

Install tons of interactive dashboard components

Agentic components, buttons, checkboxes, calendar or a meeting scheduler, all you need is here.

Install for free Browse all components

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

Filter, sort and paginate complex data in a responsive table.

Activity

Move

1,592 kcal

Exercise

1h 45m

Running

5.2 km

Steps

31,600

total steps

29 Jun - 5 Jul29 Jun - 5 Jul

Sleep score

Excellent

29 Jun - 5 Jul

Duration: 7h 50m

49/50

Bedtime: 20m earlier

29/30

Interruptions: 5m wake up

20/20

Important alerts

this week

29 Jun - 5 Jul

High Heart rate

Your heart rate rose above 120 BPM while you seemed to be inactive for 10 minutes starting at 8:59 AM, 12 June.

June, 12

Medical ID

Your emergency contact and allergy information was updated in your Medical ID.

June, 9

Lab results ready

Your latest blood panel ordered by Dr. Mattheus Clarkson is back — cholesterol and glucose are within the normal range.

June, 9

Medication reminder

You missed your 9:00 AM dose of Metoprolol. Take it as soon as possible unless your next dose is near.

June, 8

Irregular sleep

Your bedtime shifted by more than 2 hours on 3 of the last 7 nights, which can affect your sleep score.

June, 6

Low blood oxygen

Your blood oxygen dipped to 93% for a short period during sleep on the night of 4 June.

June, 5

Activity

Move

1,592 kcal

Exercise

1h 45m

Running

5.2 km

Steps

31,600

total steps

29 Jun - 5 Jul29 Jun - 5 Jul

Sleep score

Excellent

29 Jun - 5 Jul

Duration: 7h 50m

49/50

Bedtime: 20m earlier

29/30

Interruptions: 5m wake up

20/20

Important alerts

this week

29 Jun - 5 Jul

High Heart rate

Your heart rate rose above 120 BPM while you seemed to be inactive for 10 minutes starting at 8:59 AM, 12 June.

June, 12

Medical ID

Your emergency contact and allergy information was updated in your Medical ID.

June, 9

Lab results ready

Your latest blood panel ordered by Dr. Mattheus Clarkson is back — cholesterol and glucose are within the normal range.

June, 9

Medication reminder

You missed your 9:00 AM dose of Metoprolol. Take it as soon as possible unless your next dose is near.

June, 8

Irregular sleep

Your bedtime shifted by more than 2 hours on 3 of the last 7 nights, which can affect your sleep score.

June, 6

Low blood oxygen

Your blood oxygen dipped to 93% for a short period during sleep on the night of 4 June.

June, 5

Playful widgets

Health widgets with live charts, activity rings and alerts.

Sidebar

Navigation with search, badges and account controls.

Dropdowns

Accessible action menus with grouped items and profile rows.

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

Live multi-step progress and completion states.

57%

Agentic composer

AI prompt composer with tools, models, voice and context.

Generating image

Vintage-style illustration of a football player in Argentina's striped kit

Image generation loader

Image generation with an animated countdown and reveal.

Contributor profile

Contributor activity, token stats and streak insights at a glance.

August 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

+2 more

Calendar

Month calendar with events and scheduling controls.

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

Meeting schedule

Booking flow for dates, times, language and meeting details.

Earned so far

$7,462

+14.8%

Revenue

$18,240

+9.4%

Workload distribution

1,248

Tasks

Charts

Bar, line and stacked charts with live data.

Drag and drop to upload or select

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

Uploading ...

Uploaded successfully!

File upload

Drag-and-drop uploads with validation and progress states.

A loading state worth staring at

Composer Loader wraps your chat input in an orbiting light while the agent works, glass controls included. Pick a color.

Get the component

Included with Pro

Ready to go templates with BoardUI across domains

Looking for an agentic chat, a marketing dashboard, or a healthcare interface? It's already here.

Live preview

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: (

Included with Pro

Charts that make your data worth reading

Radar, radial, funnel, Sankey and more - live Recharts cards with period switchers, hover focus and stat tiles, all on the same tokens.

Get every chart with Pro Browse all charts

Sign-up funnel

197

+5.2%

Link opened

197

Started

110

Completed

Converted

Funnel chart

Tapered stages with conversion pills, curved or sharp, and stat tiles under every column.

Earned so far

$7,462

+14.8%

Earnings chart

Rounded bars over a track with a period switcher, count-up headline and hover outline.

Visitors

1,424

+5.2%

January

186

February

305

March

237

April

273

May

209

June

214

Radar chart

Filled polygon on the chart tokens - the count-up headline follows the axis you hover, and a stat tile per axis sits below.

Visitors

1,424

+5.2%

Desktop1,424

Mobile860

January

186

February

305

March

237

April

273

May

209

June

214

Radar comparison

Outline-only series over the same grid with a live legend for side-by-side reads.

Tracked time

86h

Tracked timeShare of tracked time

Sankey chart

Flows tinted by their source with share labels on the sinks and hover isolation.

Pipeline

1,180

+2.4%

Visits

1,180100%

Sign-up

79067%

Active

46039%

Pro

25021%

Team

12010%

Enterprise

403%

Visits

1,180

Sign-up

790

Active

460

Pro

250

Team

120

Enterprise

Stage bars

The funnel as pill rows with name, value and share, plus a grid of stat tiles.

Visitors

925

+5.2%

Other

Edge

173

Firefox

187

Safari

200

Chrome

275

Radial chart

Concentric rings over the chart track with each name set along its own arc - hover a ring and the rest fall back while the headline and its tile follow.

Visitors

2,500

+5.2%

47%Desktop

Desktop

1,180

Mobile

620

Tablet

380

320

Speedometer

Half gauge of stacked segments with the primary share in the centre and tiles below.

Visitors

94,700

+8.2%

Organic

50,500

Referral

25,900

Paid

18,300

Area chart

Stacked series with gradient fills - hover a month and the headline, legend and tiles follow.

Sessions · Conversion 3.7%

83,200

+9.4%

Sessions · total

83,200

Conversion · average

3.7%

Combo chart

Bars on one axis, a cased line on the other - volume and rate read together on one canvas.

Get lifetime access to Pro

Buy it once, use it in unlimited projects forever. Everything you buy is yours for life, with Pro updates for a year or forever.

Starter

The fundamentals of BoardUI, free. Perfect for indie developers.

Freeall the basicsno card required

Install now

Free user license
Use it in unlimited projects
Free component updates
Installation via CLI
Fundamental components
Basic blocks and templates
Design tokens based on Tailwind CSS
Dark mode variables
Discord accessJoin now
3,000+ icon library

Annual Access

Every BoardUI Pro component, block, token and template.

€179€149all in Propaid yearly

Buy and install now

Single-user license
Use it in unlimited projects
1 year of Pro updates
Installation via CLI
Every Pro component
Every Pro block & template
Design tokens based on Tailwind CSS
Dark mode variables
Discord accessJoin now
3,000+ icon library

Lifetime Access

€49 launch discount

Every BoardUI Pro component, block, token and template.

€249€199all in Proyours forever

Buy and install now

Single-user license
Use it in unlimited projects
Lifetime updates for Pro
Installation via CLI
Every Pro component
Every Pro block & template
Design tokens based on Tailwind CSS
Dark mode variables
Discord accessJoin now
3,000+ icon library

Unlimited for Startups

Everything in Pro, licensed for up to 5 developers.

€349all in Proyours forever

Buy and install now

5-user license
Use it in unlimited projects
Lifetime updates for Pro
Installation via CLI
Every Pro component
Every Pro block & template
Design tokens based on Tailwind CSS
Dark mode variables
Discord accessJoin now
3,000+ icon library

Frequently asked questions

Everything about licensing, installing and building with BoardUI. Anything else, ask us on Discord.

Yes. Every plan is bought once and yours forever, with no subscription and no auto-renewal. Lifetime Access and Unlimited for Startups include every future update to the components, blocks and templates you have access to; Annual Access includes them for one year from purchase.

Still have a question?We answer in the open, usually the same day.

Ask on Discord

One short email when a component, block or template ships. No digests, no drip sequences, and you can leave any time.

React Design Systemfor Agentic InterfaceAgenticAgenticAgentic InterfaceInterfaceAgentic InterfaceAgenticAgenticAgentic InterfaceInterfaceAgentic InterfaceAgenticAgenticAgentic InterfaceInterface

Booking dates, August 2026

Install tons of interactive dashboard components

Data table

Playful widgets

Sidebar

Dropdowns

Agent progress

Agentic composer

Image generation loader

Contributor profile

Calendar

Meeting date, August 2026

Meeting schedule

Charts

File upload

A loading state worth staring at

Ready to go templates with BoardUI across domains

Charts that make your data worth reading

Funnel chart

Earnings chart

Radar chart

Radar comparison

Sankey chart

Stage bars

Radial chart

Speedometer

Area chart

Combo chart

Get lifetime access to Pro

Starter

Annual Access

Lifetime Access

Unlimited for Startups

Frequently asked questions

Is BoardUI Pro a one-time payment?

What is the difference between Starter and Pro?

How do I install a component?

Do I own the code?

Can I use it in client and commercial projects?

What is the difference between Annual and Lifetime Access?

Do you offer refunds?

What is BoardUI built on?

Does it support dark mode?

Get new components in your inbox

React Design Systemfor Agentic Interface Agentic Interface Agentic Interface