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.

<Card href="/somewhere">
  <Heading level={4}>Interactive Card</Heading>
  <Text>Content goes here...</Text>
</Card>

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>

Bento Items

Demonstrating Bento Items for structuring your page.

Vertical Tabs

Tables