Design System

Every reusable component in the Body Tracker design system, in one place.

Buttons

Variants, sizes, groups, and composed actions.

Variants

Sizes & states

Button group & split button

Inputs & Forms

Text inputs and their specialized presets.

Base inputs

Specialized inputs

$

OTP input

Textarea & counter

0/120

Select & multi-select

Selection controls

Checkbox, radio, switch, and selectable cards.

Checkbox, radio, switch

Selectable cards

Cards

Composed card variants for common enterprise layouts.

Active members

342

Churn rate

2.1%

-0.4pt

Total sessions

1,284

+12.4%vs last period
Jo

Jordan Rivera

Performance Coach

428

Sessions

91.4

Avg score

Documentation

Guides for every feature.

PreviewNew

Weekly report

Auto-generated every Monday.

Sessions this week

Volume across the team

+18.2%

Data display

Tables, avatars, timelines, and pagination.

Avatars

JoSa
Sa
Ma
Pr
+2
Jo

Basic table

MemberTypeScore
Sarah ChenMobility92
Marcus WebbStrength88
Priya NairCardio79

DataTable — sortable, searchable, selectable, paginated

Date
Sarah ChenMobility92Jul 24, 2026
Marcus WebbStrength88Jul 23, 2026
Priya NairCardio79Jul 22, 2026
Diego AlvarezRecovery65Jul 21, 2026
Elena KowalskiStrength95Jul 20, 2026

Showing 5 of 5 rows

Timeline

Session completed

12m ago

Sarah Chen finished a mobility assessment.

Member joined

1h ago

Alex Kim joined the workspace.

Session flagged

3h ago

Form deviation detected.

Breadcrumb & pagination

Feedback

Alerts, toasts, and status badges.

Alerts

Badges

NeutralAccentSuccessWarningDangerInfoOutline

Toasts — mounted globally via ToastProvider in the root layout

Overlays

Modal, drawer, popover, tooltip, accordion, and command palette.

Modal & drawer

Popover, tooltip, dropdown

Accordion

Everything you need to get started, from onboarding to reporting.

Command palette

No results found.

Pages

Progress & loading

Linear, circular, stepper, and skeleton states.

Linear progress

72%

Circular progress

72%

Stepper

  1. AccountCreate your account
  2. 2
    WorkspaceSet up your team
  3. 3
    BillingChoose a plan

Skeleton & spinner

Date & time

Calendar, date picker, and range picker.

July 2026

Charts

Recharts-based enterprise chart set.

Line

Session trend

Area

Score trend

Bar

Sessions by month

Radar

Current vs. previous period

Pie

Sessions by category

Donut

Sessions by category

100%
Strength
Mobility
Cardio
Recovery

Empty states

Named presets for common empty conditions.

No data yet

Once activity starts, it will show up here.

No results found

Try adjusting your filters or search terms.

You're offline

Check your connection and try again.

You don't have access

Ask a workspace admin to grant you permission.

Under maintenance

This area is temporarily unavailable while we make improvements.

Custom empty state

Fully overridable via the base EmptyState component.