📦 Stables Component Browser

Use component IDs to reference exactly which element you want

Button
Primary Button
BTN-001
Padding 16px
Font Size 16px
Font Weight 900
Border Radius 14px 
<button class="primary" style="padding: 16px; font-size: 16px; font-weight: 900;">
  Button Text
</button>
Button
Ghost Button
BTN-002
Padding 16px
Font Size 16px
Border 2px solid rgba(103, 232, 249, .3) 
<button class="ghost" style="padding: 16px; font-size: 16px; font-weight: 900;">
  Button Text
</button>
Button
Small Inline Button
BTN-003
Padding 3px 8px
Font Size 9px
Font Weight 600 
<button style="font-size: 9px; padding: 3px 8px; border-radius: 4px; background: transparent; color: var(--muted); border: 1px solid rgba(159, 176, 192, 0.3); cursor: pointer; font-weight: 600;">
  Set Default
</button>
Input
Text Input
INP-001
Padding 10px 12px
Border Radius 14px
Font Weight 900 
<input type="text" placeholder="Enter text" />
Input
Select/Dropdown
INP-002
<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
Input
Radio Button
INP-003
Flex Shrink 0 (prevents compression) 
<input type="radio" name="group" style="flex-shrink: 0;" />
Tag
Success Tag
TAG-001
HOME NEW
Padding 2px 8px
Font Size 10px
Font Weight 700 
<span class="tag ok">HOME</span>
Tag
Warning Tag
TAG-002
TEST 
<span class="tag warn">TEST</span>
Tag
Inline Badge (DEFAULT)
TAG-003
DEFAULT 
<span style="background: rgba(34, 197, 94, 0.15); color: #22c55e; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700;">
  DEFAULT
</span>
Typography
KPI Display
TXT-001
Coverage Ratio
3.25×
Font Size 32px
Font Weight 900
Line Height 1.1 
<div class="kpi">1,234.56</div>
Typography
Column Header
TXT-002
PAYMENT CURRENCY
Font Size 11px
Font Weight 600
Text Transform uppercase
Letter Spacing 0.5px 
<div style="color:var(--muted); font-size:11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">
  Column Header
</div>
Layout
3-Button Grid
LAY-001
Grid Columns 1fr 1fr 1fr
Gap 12px 
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">
  <button class="primary">...</button>
  <button class="ghost">...</button>
  <button class="ghost">...</button>
</div>
Layout
Asset Row (3-column)
LAY-002
mCAD DEFAULT
1,500.00
1,500.00
Column 1 220px
Column 2 110px (right-aligned)
Column 3 110px (right-aligned)
Padding 12px
Gap 12px 
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px; background: rgba(103,232,249,.08); border-radius: 12px; border: 1px solid rgba(103,232,249,.25);">
  <div style="width:220px; display:flex; align-items:center; gap:10px;">
    <input type="radio" style="flex-shrink: 0;">
    <span style="font-weight:900; font-size: 14px;">Asset Name</span>
  </div>
  <div style="width:110px; text-align:right; font-weight:900; font-size: 14px;">Qty</div>
  <div style="width:110px; text-align:right; font-weight:900; font-size: 14px;">Value</div>
</div>