Components¶
MetrePay UI components are the building blocks of every product interface. Each component is documented with live examples, usage rules, and code for both Bulma and Tailwind.
Component Library¶
| Component | Description |
|---|---|
| Buttons | Primary, purple, gradient, outline, ghost, sizes |
| Forms | Inputs, labels, validation, grouped inputs |
| Cards | Product card, checkout card, selectable card |
| Hero | Gradient hero, blue variant, purple variant |
| Tags & Badges | Status tags, semantic badges |
| Alerts | Error, success, warning, info |
| Tabs | Pill-style tab navigation |
| Metrics | Dashboard stat blocks |
| Empty States | No data, error, loading patterns |
Component Principles¶
- Consistent — every component uses the same tokens
- Accessible — focus states, ARIA labels, keyboard navigation
- Responsive — all components adapt to mobile
- Framework-agnostic — documented in CSS, Bulma, and Tailwind