Component playground

Buttons

<button className="btn btn-primary">Primary</button>
<button className="btn btn-outline">Outline</button>
<button className="btn btn-ghost">Ghost</button>
<button className="btn btn-danger">Danger</button>
<button className="btn btn-primary btn-sm">Small</button>
<button className="btn btn-primary" disabled>Disabled</button>

Status & badges

<StatusBadge tone="green">Active</StatusBadge>
<StatusBadge tone="yellow">Pending</StatusBadge>
<StatusBadge tone="red">Failed</StatusBadge>
<StatusBadge tone="blue">Info</StatusBadge>
<span className="chip">Tag</span>

Alerts

<div className="alert alert-success">…Saved!…</div>
<div className="alert alert-warning">…Heads up.…</div>
<div className="alert alert-error">…Payment failed.…</div>

Cards

<Card>
  <CardHeader><CardTitle>Plain card</CardTitle></CardHeader>
  <CardBody>A simple card with header and body.</CardBody>
</Card>

Form inputs

<input className="form-control" placeholder="Type here…" />
<select className="form-control"><option>Option A</option></select>
<label className="switch"><input type="checkbox" defaultChecked /><span className="track" /></label>

Advanced form controls

<DateRangePicker />

<MultiSelect options={...} defaultSelected={['design', 'eng']} />

<RichTextEditor initialHtml="<p>…</p>" />

Tables

<table className="table">
  <thead><tr><th>Name</th><th>Plan</th><th>Status</th><th>MRR</th></tr></thead>
  <tbody>…</tbody>
</table>

Tabs

<div className="chart-tabs">
  <button className="chart-tab active">Overview</button>
  <button className="chart-tab">Activity</button>
</div>

Progress

<div className="progress-thin"><div className="bar" style={{ width: '62%' }} /></div>

Stat tiles

<StatCard icon={...} iconTone="teal" label="Active users" value="8,432" change={{ direction: 'up', text: '↑ 14%' }} subtext="vs last week" />

Timeline

<Timeline>
  <TimelineItem tone="primary" time="Just now" title="Deployment succeeded" desc="v4.0.2 in production · 28s" />
</Timeline>

Accordion

<Accordion>
  <AccordionItem summary="First panel" defaultOpen>Content for the first panel goes here.</AccordionItem>
  <AccordionItem summary="Second panel">Click the chevron to expand.</AccordionItem>
</Accordion>

Empty state

<div className="empty-state">
  <div className="empty-state-icon">…</div>
  <div className="empty-state-title">No messages yet</div>
  <div className="empty-state-text">…</div>
</div>

Skeleton table

Render placeholder rows while data loads. Width variation across columns prevents the "jelly bean" look — the shimmer animation lives in ui-kit.css.

Skeleton tiles

Use for card grids — dashboards, file managers, product galleries. Avatar circle + headline + 2 lines is the canonical shape.

List lifecycle — interactive

Click a button below to simulate each state. This is exactly what orders and the inbox use under the hood.

Submit spinner

Disable the button + swap label for a spinner during the request. Re-enable + restore label when it resolves. Click below to simulate a 1.5s submit.

Banners — feedback at the page level

<div className="banner"><strong>Saved.</strong> Changes are live.</div>

StatCard

<StatCard
  icon={<RevenueIcon />}
  iconTone="green"
  label="Revenue"
  value="$84,520"
  change={{ direction: 'up', text: '+18%' }}
  subtext="$3,218 today"
/>

StatusBadge

<StatusBadge tone="green">Paid</StatusBadge>
<StatusBadge tone="yellow">Pending</StatusBadge>
<StatusBadge tone="red">Failed</StatusBadge>

Customer cell — table cell with avatar + name

<div className="cell-customer">
  <div className="cell-avatar" style={{ background: color }}>{initials}</div>
  <span className="cell-strong">{name}</span>
</div>

Activity item — feeds, audit logs

<ul className="activity-list">
  <li className="activity-item">
    <div className="activity-avatar" style={{ background }}>{initials}</div>
    <div><div className="activity-body"><strong>{user}</strong> {text}</div><div className="activity-time">{time}</div></div>
  </li>
</ul>

• SK
  Sarah K. placed a new order for $245.00

  2 min ago
• MR
  Michael R. registered a new account

  18 min ago

Visitor row — distribution bars

<div className="visitor-row">
  <span className="visitor-flag">{flag}</span>
  <span className="visitor-name">{name}</span>
  <span className="visitor-pct">{pct}%</span>
  <div className="visitor-bar"><div className="fill" style={{ width: pct + '%' }} /></div>
</div>

Empty state — fallback for no results

<div className="empty-state">
  <div className="empty-state-icon">…</div>
  <div className="empty-state-title">No orders yet</div>
  <div className="empty-state-desc">Orders will appear here once your first customer checks out.</div>
  <button className="btn btn-primary btn-sm">Create test order</button>
</div>