# 📦 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
Label

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
Option Label

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>