Components

Starts an action, such as saving a program or sending a check-in.

Groups related buttons, such as Previous and Next week.

A two-state button, such as marking a set as done.

A set of toggles where one or several can be on, such as kg and lb.

A menu of actions on one item, such as a client row.

A right-click menu for power users, such as in the program builder.

A single-line text field, such as a client's name.

A multi-line field, such as coach notes on a check-in.

Picks one option from a short list, such as a program goal.

Searches and picks from a long list, such as the exercise library.

Turns one option on or off, such as including rest days.

Picks exactly one option, such as the billing cycle.

A setting that takes effect immediately, such as check-in reminders.

Picks a value in a range, such as target RPE.

Picks a date, such as a program start date.

Shows and picks dates, such as scheduled sessions.

Enters a one-time code during sign-in.

Names a form control.

Field layout, validation and error messages.

A message that stays on the page, such as a failed payout.

A short confirmation that disappears, with undo, such as "Workout deleted".

Shows how far a task has come, such as program completion.

A placeholder while content loads.

A short status label, such as Paid or Overdue.

A short hint on hover or focus.

A focused task over the page, such as editing a meal.

Confirms a destructive action, such as removing a client.

A side panel for secondary tasks, such as filters.

A mobile bottom sheet.

Rich content anchored to a control.

A preview on hover, such as a client summary.

The app's main navigation.

Switches between views of one thing, such as a client's profile.

Shows where a page sits, such as Programs › Strength block.

Moves through long lists, such as invoices.

Top-level site navigation with submenus.

A search-driven command palette.

Groups content about one thing, such as a workout.

Shows rows of data, such as payments.

A table with sorting, filtering and selection, such as the client list.

A client's or coach's photo or initials.

Divides content.

Shows and hides sections, such as FAQ entries.

Shows and hides one section.

A scrollable region with styled scrollbars.

Charts using the chart palette, such as weekly volume.

Scrolls through items, such as progress photos.

What to show when there is nothing yet, such as no clients.

Switches package prices between currencies.

Summary cards for programs and workouts.

Searches and picks exercises from the library.

Picks target muscles on a body map.

Sets values across a grid, such as sets × weeks.

Introduces a new feature in place.

Explains a plan limit and how to upgrade.