Components
This overview showcases the building blocks available for creating stunning pages.
Core UI
The fundamental elements of your user interface.
Buttons
Buttons come in various styles to suit different needs.
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="icon"><Icon /></Button>Sizes
Badges
Use badges to highlight status, tags, or categories.
<Badge>Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="accent" class="...">Custom</Badge>Cards
Versatile containers for content.
Basic Card
A simple card container with padding and rounded corners.
Interactive Card
Pass an href prop to make the card clickable and add hover effects.
<Card href="/somewhere">
<Heading level={4}>Interactive Card</Heading>
<Text>Content goes here...</Text>
</Card>Typography
Consistent typography utilities for headings and body text.
Heading 1
level=1 (h1)Heading 2
level=2 (h2)Heading 3
level=3 (h3)Lead Paragraph
Standard body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small text for captions or secondary information.
Layout
Helpers for structuring your page.
Container & Grid
<Container>
<Grid cols={3}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Grid>
</Container>Feature Components
Pre-built components for common marketing sections.
Feature Items
Fast Performance
Optimized for Core Web Vitals out of the box.
Secure by Default
Built-in security best practices.