Usage
Add class names matching the HTML tag for consistent styling:
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<p class="p">Paragraph text</p>
<ul class="ul"><li>List item</li></ul>
<ol class="ol"><li>Ordered item</li></ol>Headings
| Element | Class | Preview |
|---|---|---|
<h1>
| .h1 | Heading One |
<h2>
| .h2 | Heading Two |
<h3>
| .h3 | Heading Three |
<h4>
| .h4 | Heading Four |
<h5>
| .h5 | Heading Five |
<h6>
| .h6 | Heading Six |
Body Text
Paragraph
This is a paragraph with the .p class applied. It provides comfortable reading with proper line-height and spacing for body copy.
Muted text
Use text-muted-foreground for secondary information, descriptions, and helper text that shouldn't compete with primary content.
Lists
Unordered List
.ul
- Design system fundamentals
- Component architecture patterns
- Theming and customization
- Color tokens
- Typography scale
- Accessibility guidelines
Ordered List
.ol
- Install the component library
- Configure your brand colors
- Copy the components you need
- Start building your application
Inline Elements
| Element | Preview |
|---|---|
<strong>
| Bold text for emphasis |
<em>
| Italic text for emphasis |
<code>
|
Inline code snippets for technical content
|
<a class="link">
| A clickable link with proper styling |
<hr class="hr">
|
|