Component library
Zero dependencies. Satoshi for everything. Every border at 0.5px. Sentence case labels. Tabular nums for data.
Inputs & forms
Form controls, text inputs, selectors, and interactive input patterns.
Demo · with label · unit
Disabled
File input
With button
With helper text
Enter your email address.
Input group
Prefix · suffix · icon · combined
With prefix
With icon prefix
With suffix
Combined prefix + suffix
With button action
With label (block-start addon)
With dropdown trigger
With spinner (loading state)
Textarea variant (multi-line group)
With tooltip on addon button
Custom content (non-Input control)
6-digit numeric (3-3 separator)
4-char alphanumeric · no separator
Controlled (echoes value below)
Fully controlled via value / onChange.
Invalid · Disabled
Textarea
Label · count · max-length
Placeholder only
Disabled
With submit button (form composition)
Selects
Default
With optgroup · multiple groups
Department picker · many groups
Invalid · Disabled
Demo · grouped
Popover-style (status picker)
Status: not set
Responsive · stacks on narrow surfaces
Filter by status
Inside a dropdown-menu row (label picker)
featureCreate a new project
Visible channels
Disabled
With descriptive text (two-line label)
Standalone (no label)
Variants
With text label alongside icon
Sizes
Channel selector (default variant)
Time period (sm size)
Zone mode (sm, pill variant)
Tab navigation (underline variant)
Single-select (type="single" behaviour — align)
Outline look (pill variant on sand surface)
Disabled (non-interactive via aria-disabled)
Spacing · relaxed gaps between items
Filter pills (multi-select, pill variant)
Plain slider (no label)
Demo · single date
With presets (quick offsets)
Selected: —
Date range (from → to)
Range: 5/11/2026 → 5/18/2026
Single date selection
Range selection
Non-Gregorian note · Hijri / Persian / Islamic calendars
RAMTT's Calendar renders Gregorian dates by default. For Hijri (Islamic), Persian (Jalali) or other locale calendars, wrap the Calendar in a locale provider or pass pre-converted Date values.
See docs for a hijri / jalali adapter example.
Display tags
Tag input with suggestions
File upload
Vertical · description · required
We'll never share your email.
Invalid · with error
FTP must be a positive integer.
Horizontal · switch
Weekly summaries and incident alerts.
Required to continue.
Radio group · horizontal items
Select inside field
Select your department or area of work.
Slider inside field
Set your monthly budget ($450).
Responsive layout · stacks on narrow, side-by-side on wide
Group (2 columns) + FieldSet
Demo · label · required · description
Your functional threshold power
Weight must be between 40-150 kg
Textarea field
Tell other athletes about yourself. 280 char max.
Password field
At least 8 characters with one number.
Checkbox field · single
You must accept to continue.
Switch field
Weekly summaries and incident alerts.
Radiogroup field
Yearly saves 15%. (Radiogroup variant.)
Array field · dynamic tag list
Array of strings — add or remove items.
Complex · composite form with multiple fields
Adapter note
RAMTT's FormField is headless wrt. form library — it renders label, description, required marker, and error slot only. Drop it into react-hook-form, tanstack form, or next server actions by wiring error from your resolver and passing {...register("name")} to the inner control. The same patterns above cover rhf, tanstack, and next variants.
Profile
Basic information about you.
We'll never share your email.
Must be between 40-150 kg
Preferences
Label variants
Display & data
Cards, metrics, tables, badges, indicators, and data display components.
Card with form (create project)
Create project
Deploy your new project in one click.
Training load
CTL / ATL / TSB over time
Power curve
Best efforts across all sessions
Peak 5min
Bar chart · axis-only demo
X-axis labels, no grid, no tooltip
Bar chart · with grid lines
Horizontal grid lines, no axis labels
Bar chart · tooltip demo
Hover bars for tooltip values
Native <title> tooltips on hover.
FTP progression
Course progression
Alpe d'Huez
Invite team member
Enter an email address to send an invitation.
Invite multiple members
Enter comma-separated email addresses.
Race predictor
ML-based race time estimation from your last 12 weeks of training.
Market Data
Session Readout
Historical Prices
| Date | Open | Close | High | Low | Volume |
|---|---|---|---|---|---|
| 2024-01-15 | 182.16 | 185.92 | 186.74 | 181.91 | 62.3M |
| 2024-01-14 | 181.27 | 182.68 | 183.52 | 180.17 | 47.1M |
| 2024-01-13 | 183.89 | 181.18 | 184.26 | 180.93 | 55.8M |
| 2024-01-12 | 184.5 | 183.63 | 185.15 | 182.73 | 41.2M |
| 2024-01-11 | 186.09 | 184.4 | 186.74 | 183.62 | 53.6M |
Athlete profile
- Full name
- Malte Therkildsen
- malte@ramt.dev
- FTP
- 285 W
- Weight
- 73 kg
- Primary sport
- Cycling
- Member since
- March 2026
Thresholds
Current performance markers
Stat — format types
Stat — with delta
Stat — with label
Stat — sizes
Stat — precision
Headings
The training treemap
Week in review
Zone distribution
Peaks by duration
Body scale
Lead text introduces a section with slightly muted emphasis.
Paragraphs use SIZE_TEXT.md (13px) with relaxed leading for readable prose in docs surfaces.
Muted — 13px n600, for helper copy.
Quote · code · list
Borders at 0.5px, weights at 550 for hierarchy, Satoshi for everything.
Use RADIUS.md for button/input radii — never raw rounded-[5px].
- Accent-first interactive surfaces
- Neutral sand for metadata and toggles
- Destructive reserved for delete/error
- Read RULES.md
- Import from tokens.ts
- Run pnpm run audit
Table
| Zone | % FTP | Minutes |
|---|---|---|
| Z1 | < 55 | 18 |
| Z2 | 56–75 | 42 |
| Z3 | 76–90 | 24 |
| Z4 | 91–105 | 12 |
Default (43%)
Fuel progress (positive, with label)
Quality Index (warning)
Critical (negative)
Zone distribution (6 zones)
Macro breakdown with legend
With showLabels (percentages above)
Compact (height=4) for inline use
Ring (full circle)
Bar (horizontal)
Variants
Semantic colors
Outline · muted palettes
ColorDot — semantic colors, all sizes
ColorDot — with labels
ColorDot — hollow ring
ColorDot — vertical bar
ColorDot — pulse (live status)
StatusIndicator — all states
StatusIndicator — md with value
StatusIndicator — lg — dot
StatusIndicator — lg — edge-left
StatusIndicator — lg — edge-top
Small (16px) — for lists, search results
Medium (20px) — for cards, headers
Color strip
MetricCard skeleton
DataTable skeleton
Shape variations
SkeletonCard
Basic (default size, accent color)
Custom color · composed from Spinner
Sizes
Button · Badge contexts
InputGroup suffix · Item leading
Empty · loading state
Loading your data
No sessions yet
Upload a FIT file to see your first session analysis.
Variants (dashed · outline · bare)
No activities yet
Upload a FIT file or connect Garmin to start tracking.
Outline variant
Solid 0.5px sand border — for calmer contexts.
Bare Empty
No border, no media — inline hint inside a larger surface.
With avatar (single)
User offline
This user is currently offline. Leave a message and they'll see it next time.
With avatar group
No team members
Invite your team to collaborate on this project.
Subtle background gradient
No notifications
You're all caught up. New notifications will appear here.
With input-group (search fallback)
404 — not found
The page you're looking for doesn't exist. Try searching for what you need.
Need help? Contact support
Single keys
Group (chord)
Inside button · inside tooltip
Separator variants
Horizontal (default)
Horizontal (subtle)
With label
Vertical (between inline elements)
Forms
Layout
Navigation
Settings
Session analysis
MIT with spikes · 12. april 2026
Integrations
Connect and sync your devices
20 hues.7 stops each.One register.
Every color in the product is drawn from this page. Base hues pinned at OKLCH L=0.67.
Hue register
All 20 hues × 7 stops. 160 colors.
Zone mapping
How hues map to training zones.
Weekly compliance
Zone distribution
TimelineStrip — race nutrition (300 min)
TimelineStrip — race week with zones
Feedback & overlay
Modals, drawers, tooltips, toasts, dropdowns, and floating UI.
Sheet (alias for Drawer)
Side (right · bottom · left)
Library content
Animated content
Smoothly collapses and expands. Children unmount on close by default to avoid keeping heavy content (like charts) in the DOM.
Toast types — one button per variant type.
Destructive severity (error variant)
Dot (default)
Edge-left
Edge-top
RAMTT's Command composes into any dialog/modal surface — this preview uses Modal as the container.
RAMTT
Coming soon
Training analytics for endurance athletes.
Layout & composition
Page layouts, grids, lists, and compound component patterns.
Sign in to RAMTT
Welcome back
Welcome
Let's set up your profile
Welcome to RAMTT. This wizard will guide you through initial setup so you can start tracking your training right away.
Good morning, Malte
Ready to ride? 3 sessions this week.
Welcome back
Changes will take effect immediately.
This will permanently delete your account and all associated data. This action cannot be undone.
Auto-sync sessions
Automatically import new sessions from Strava
Default · icon media · actions
As link (interactive anchor)
With image media (music list)
With dropdown trigger (actions menu)
Variants
1:28:40 · 238W avg · 142bpm
2 days ago
0:45:12 · 142W avg · 118bpm
3 days ago
1:12:00 · 272W avg · 165bpm
5 days ago
3:15:00 · 198W avg · 135bpm
1 week ago
0:58:30 · 310W avg · 178bpm
1 week ago
1:30:00 · 256W avg · 155bpm
2 weeks ago
Tempo ride — 1:28:40, 238W avg
Injury risk increased to 72
Great session! Consider adding more Z2 work next week to build aerobic base.
280W → 285W based on 20-min test
Athletes
Default · horizontal
Autoplay plugin (autoPlayMs)
Vertical orientation
API · imperative navigation
Focused slide 1 of 5
Size · compact track
Spacing · relaxed slide gaps
Scroll area
Vertical (300px, custom scrollbar on hover)
Horizontal scroll
Resizable panels
Horizontal · drag the handle to resize (30/70 split)
Sidebar
Drag handle to resize
Main content
Fills remaining space
Vertical · header/content split
Header (vertical)
Content
16 : 9
1 : 1
4 : 5
LTR
RTL
Great session today. Felt strong on the climbs — tempo pace held steady throughout.
Pre-ride checklist
Weekly goals
1/3 doneFrequently asked questions
Training
FTP is estimated from your best 20-minute power effort, multiplied by 0.95. You can also set it manually in Settings.
Training zones divide your effort into intensity levels based on FTP or heart rate thresholds. RAMTT uses a 7-zone model for power and a 5-zone model for heart rate.
Nutrition
The CHO zone system categorizes your carbohydrate intake targets based on exercise intensity and duration, helping you fuel optimally for each session type.
Open any session, tap the nutrition tab, and enter grams of carbohydrate consumed. You can also scan product barcodes for automatic entry.
Integrations
Go to Settings, then Integrations, then Strava, and click Connect. You will be redirected to authorize RAMTT to read your activities.
Training
Signals & Alerts
Map your data
DashboardGrid — drag handles to rearrange
Dark surfaces
Components designed for dark backgrounds — footers, dark sections, link groups.