Tabs

A switcher for views that share a context. Comes in three variants.

Production
sivir-ui.vercel.app
Deployed 2h ago by aidan-neel
Uptime
100%
Edge Requests
12.4k

Installation

Copy the command below and run it in your terminal.

bunx @sivir/ui add tabs

Usage

Import Tabs and use it in your component:

import * as Tabs from '$lib/sivir/components/tabs';

<Tabs.Root bind:value={tab}>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Content 1</Tabs.Content>
  <Tabs.Content value="tab2">Content 2</Tabs.Content>
</Tabs.Root>

Examples

Explore Tabs in different variants.

Default

Ghost

Segmented