Component Gallery
All components below use only CSS variables — change the theme to see them all transform.
Overview
Components
Forms
Tables
Activity
Stats
Active Cases
247
↑ 12%
Pending Tasks
38
↓ 5%
Completed
1,432
↑ 8%
SLA Compliance
94%
↑ 2.1%
Buttons
Badges
Default
Primary
Success
Warning
Error
Info
BH
AK
LM
+5
Alerts
Success
Process deployed successfullyWarning
3 tasks approaching SLA breachError
Validation failed on form submitForm Controls
Notify on completion
Auto-escalate overdue
Require dual approval
Low
Medium
High
Enable notifications
Table
| Case ID | Title | Assignee | Status | Progress |
|---|---|---|---|---|
| CASE-2891 | Invoice approval — Acme Corp | AK Ahmed K. |
Approved | |
| CASE-2890 | Vendor onboarding — TechFlow | LM Lisa M. |
In Review | |
| CASE-2889 | Compliance audit Q2 | BH Ben H. |
In Progress | |
| CASE-2888 | Budget reforecast | RT Raj T. |
Blocked |
Color Tokens
primary
--primary
accent
--accent
success
--success
warning
--warning
destructive
--destructive
info
--info
card
--card
muted
--muted
border
--border
ring
--ring
sidebar
--sidebar
fg
--foreground
Code
// Theme tokens are CSS variables
const button = "bg-[var(--primary)] text-[var(--primary-foreground)]";
// Switching themes = swapping :root variable values
document.body.dataset.theme = "fm-default-dark";
const button = "bg-[var(--primary)] text-[var(--primary-foreground)]";
// Switching themes = swapping :root variable values
document.body.dataset.theme = "fm-default-dark";