Components
Accordion
Single

Multiple

Address Autocomplete
Default
Avatar
Examples
JDMS
AJBBCD
+3
Size
JD

sm

JD

default

JD

lg

Badge
Variants
DefaultSecondaryDestructiveWarningOutlineGhostLink
Badge Group
Default
Button
Variants
Sizes
Loading
Disabled
Button Group
Basic
Split
Input
Dropdown menu
Select and popover
$
Orientation
Calendar
Default
August 2026

Selected date: None

Range with 2 months
August 2026
September 2026

Selected dates: None - None

Week numbers
August 2026
31
32
33
34
35
36

Selected date: None

Month dropdown
2026August 2026

Selected date: None

Month and year dropdown
August 2026

Selected date: None

Localized month dropdown
2026Augusts 2026

Selected date: None

Card
Base card
Sample Card Title
This is a description of the card. It gives a brief overview of the content within the card.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Small card
Small Card
This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

Chart
Area chart
Bar chart
Line chart
Donut chart
Chat
Conversation
Today
AM
Alex Morgan
Could we move tomorrow's session to 16:00?
I can also do 17:30 if that works better.
10:24
You
16:00 works perfectly. See you then!
10:27
Session time updated
Composer
0/2000
Bubble styles
Default
Secondary
Muted
Tinted
Outline
Ghost
Checkbox
States
Combobox
Basic
Multiple
Disabled
Command
Popover command menu

Command Palette

Search for a command to run...

Date Picker
Default
Limit start and end date
Two months
Dialog
Default
Dropzone
Single file
[]
Multiple files
[]
Dropzone with cropper
[]
Filters
Data table toolbar
nameprice_exactprice_rangecreated_at_dateupdated_at_rangecitytags

No results.

Filter sidebar
Current column filters
[]
Filtered results
[]
Form Composition

Course publishing form

Draft and validate a course with media, schedule, location, and publishing settings.

Completion45%
x
Basics
betterat.com/

Shown on the public course page.

Review note
Classification
Rehab
Schedule and access
2026August 2026

Course may appear in curated collections.

Single toggle

Pin this course in internal review queues.

Contact and verification
Capacity and pricing
EUR
4 / 5
12 seats2-30
Location
Media
Publishing

Keep this course hidden from public listings.

Input OTP
Six-digit code
Input
Default
Disabled
Invalid

This field contains validation errors.

Input Group
Inline addons
Username
Actions
Block layout
Website
Item
List items
Community cohort
24 active

Invite-only student group with shared materials and weekly prompts.

Reminder workflow

Sends a sequence of notifications before and after each session.

With footer
Course launch checklist
Ready

Final pass before publishing the sales page and enrollment flow.

Updated 2 hours ago
Location Picker
Default
null
Map
Default map (with controls)
Map with marker and popup
Cluster layer
Multi Input
Default
Disabled
Multi Select
Default
Select all enabled
Disabled
Phone Input
Default
International
With default country
Disabled
Popover
Default
Progress
Destructive
Profile completion32%
x
Warning
Onboarding checklist67%
x
Primary
Media upload100%
x
Radio Group
Default
Rich Text Editor
Default
With initial content
Disabled
With label

Select text to see the formatting toolbar.

Scroll Area
Vertical
Horizontal
Select
Default
Groups
Scrollable
Disabled
Sensitive Reveal
Default
With Icon
Linked Value
Icon Only
Sheet
Sides
Show More
Default gradient

BetterAt gives trainers a place to organize programs, manage communication, and present their offers with more polish. This demo intentionally uses enough copy to overflow the collapsed height so the component can show its expand and collapse behavior. It also mirrors the kind of editorial content that appears in product marketing, course descriptions, and instructor bios.

Without gradient

BetterAt gives trainers a place to organize programs, manage communication, and present their offers with more polish. This demo intentionally uses enough copy to overflow the collapsed height so the component can show its expand and collapse behavior. It also mirrors the kind of editorial content that appears in product marketing, course descriptions, and instructor bios.

Trainers can add multiple paragraphs, lists, or any richer content inside the container.

Slider
Single

33

Range

25 - 75

Disabled
Skeleton
Card placeholder
Sonner
Variants
Spinner
Sizes
In context
Loading activity
Star Rating
Ratings
New course
Member favorite
Top rated
Switch
Sizes
States
Table
Invoice table
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
INV006PendingBank Transfer$200.00
INV007UnpaidCredit Card$300.00
Total$2,500.00
Tabs
Default
Overview
View your key metrics and recent project activity. Track progress across all your active projects.
You have 12 active projects and 3 pending tasks.
vertical
Textarea
Default
Disabled
With text and label

Your message will be copied to the support team.

Time Picker
Automatic

No time selected

12-hour

No time selected

24-hour

No time selected

Timezone Selector
Default

Selected timezone: None

Tooltip
Default
Icon
Toggle
Variants
Formatting controls
Toggle Group
Default

Selected: list

Typography
H1

Wild plans for a quiet Tuesday studio

H2

Fresh chalk marks, half-open windows, clear intent

H3

Session notes gathered beside the blue door

H4

Small rituals before the first warmup

H5
Measured pace, loose shoulders
H6
Last check before the room fills
Paragraphs
Large

A trainer arrives early, lines up three mats, changes the playlist twice, and leaves a note by the kettle for whoever finds the room next.

Default

The morning list is practical but a little strange: fold the towels, test the timer, move the heavy bench, write down the question that made everyone pause.

Small

By noon, the schedule has coffee rings on it, two names crossed out, one new goal circled, and a reminder to keep the pace humane.

Caption

Field note 08:47 - window open, floor still cool, five minutes before check-in.