Components
Browse all available components in the Yellow Card Design System.
Core Components
Atomic building blocks for interfaces.
| Component | Description |
|---|---|
| Alert | Contextual feedback messages |
| Avatar | User or entity representation |
| Badge | Status indicators and counts |
| Banner | Page-level announcements |
| Breadcrumbs | Navigation hierarchy |
| Button | Actions and form submission |
| Checkbox | Binary and group selection |
| Chip | Tags and filters |
| CurrencyIcon | Crypto and fiat currency icons |
| DatePicker | Date and range selection |
| Dialog | Modal overlays |
| Dropdown | Select from a list of options |
| FlagIcon | Country flag icons |
| Icon | Lucide icon wrapper |
| Inputs | Text, amount, phone, pin, number inputs |
| Link | Navigation links |
| ListItem | Structured list rows |
| Pagination | Page navigation |
| Progress | Progress bars, circles, dots, and steppers |
| Radio | Single selection from options |
| Snackbar | Toast notifications |
| Table | Data tables |
| Tabs | Content section switching |
| Textarea | Multi-line text input |
| Toggle | On/off switches |
| Tooltip | Contextual hover information |
Block Components
Higher-level composed patterns for specific use cases.
| Component | Description |
|---|---|
| Balance | Currency balance display |
| BalanceCard | Balance with card container |
| DataSummaryCard | Key metric display cards |
| InfoRow | Label-value pair rows |
| RateCard | Exchange rate display |
| TotalBalance | Aggregate balance display |
| TradeInput | Currency amount input with picker |
Typography
Text rendering components with consistent sizing.
| Component | Sizes |
|---|---|
| Display | 8 sizes (2xs–3xl) |
| Heading | 10 sizes (3xs–4xl) |
| Body | 6 sizes (xs–2xl) |
| Label | 9 sizes (3xs–3xl) |
| PriceHeading | 8 sizes (2xs–3xl) |
| ArticleBody | 7 sizes (xs–3xl) |
| ArticleHeading | 6 sizes (xs–3xl) |