Internal Documentation

Component Library

All reusable UI components. Use these exclusively — do not create one-off styles.

Buttons

Three variants × three sizes. Primary for the main action; secondary for supporting actions; danger for destructive operations.

Variants

Sizes

<Button variant="primary" size="md">Label</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="danger" size="sm">Delete</Button>

Inputs

Always pair with a label. Show error state immediately on validation failure.

Default

Full Name

With hint

RFC

13-character tax ID

Error state

Enter a valid email address

<Input label="Full Name" placeholder="e.g. Carlos Méndez" />
<Input label="RFC" hint="13-character tax ID" />
<Input label="Email" error="Enter a valid email address" />

Cards

The primary container. No strong shadows — 1px border only.

Basic

Content goes here.

Supporting detail.

With header

Card Title

Content goes here.

<Card>
  <CardHeader><p className="text-sm font-semibold">Title</p></CardHeader>
  <CardContent>Content here.</CardContent>
</Card>

Status Badges

Use only these 5 statuses. Never invent new colors for new states.

ApprovedPending ReviewRejectedIn ProgressDraft

<StatusBadge status="success" label="Approved" />
<StatusBadge status="warning" label="Pending Review" />
<StatusBadge status="error" label="Rejected" />
<StatusBadge status="info" label="In Progress" />
<StatusBadge status="neutral" label="Draft" />

Tables

Clean rows, no visual clutter. Reserve color for the status badge only.

ID	Client	Vehicle	Status
OP-001	Carlos Méndez	Toyota Camry 2023	Approved
OP-002	Laura Rivas	Honda CR-V 2022	Pending
OP-003	Pedro Alonzo	Ford Explorer 2024	Rejected

<table>
  <thead>
    <tr><th>ID</th><th>Client</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>OP-001</td>
      <td>Carlos Méndez</td>
      <td><StatusBadge status="success" label="Approved" /></td>
    </tr>
  </tbody>
</table>

Stepper

Used in the Operations wizard. Shows completed / active / upcoming states.

Client
Validation
3
Risk
4
Documents
5
Summary

const steps: Step[] = [
  { label: "Client",     status: "completed" },
  { label: "Validation", status: "completed" },
  { label: "Risk",       status: "active"    },
  { label: "Documents",  status: "upcoming"  },
  { label: "Summary",    status: "upcoming"  },
];

<Stepper steps={steps} />

Modal

Use for confirmations and short forms only. One action per modal.

const [open, setOpen] = useState(false);

{open && (
  <div className="fixed inset-0 z-50 flex items-center justify-center">
    <div className="absolute inset-0 bg-black/30" onClick={() => setOpen(false)} />
    <div className="relative bg-white rounded-lg border border-gray-200 ...">
      {/* header, body, footer */}
    </div>
  </div>
)}