Components Overview
Component showcase for the e-INFRA CZ Design System built with shadcn/ui
Install the e-INFRA Design System package:
npm install @e-infra/design-systemThen import components as shown in the "Copy Component" dropdowns below each section.
Typography
Main Heading
The quick brown fox jumps
Section Heading (H2)
The quick brown fox jumps
Sub-heading (H3)
The quick brown fox jumps
Sub-section (H4)
The quick brown fox jumps
Body Text
The quick brown fox jumps over the lazy dog. This is standard body text that should be used for most content. It provides good readability and comfortable reading experience.
Bold Paragraph
The quick brown fox jumps over the lazy dog. This is emphasized body text for important information that needs to stand out.
Small Text
The quick brown fox jumps over the lazy dog. This is smaller text used for captions, helper text, or secondary information.
Extra Small / Caption
The quick brown fox jumps over the lazy dog. Used for timestamps, labels, and micro-copy.
Code / Monospace
const greeting = "Hello World";Alerts
Buttons
Cards
Card Content goes here.
John Doe
2 minutes ago
Form Elements
Badges & Avatars
Accordion
Tabs
Collapsible
Breadcrumb
Calendar
Carousel
Toggle & Toggle Group
Tooltip
Skeleton
Tables
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Paid | Bank Transfer | $350.00 |
| INV004 | Failed | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
Dialogs
Aspect Ratio
