bloxa

Tabs

FREE

Tabs with pill and underline styles.

Playground

Change the props and watch the component and its code update live.

Overview content
Props
Code
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

<Tabs defaultValue="a">
  <TabsList>
    <TabsTrigger value="a">Overview</TabsTrigger>
    <TabsTrigger value="b">Usage</TabsTrigger>
  </TabsList>
  <TabsContent value="a">Overview content</TabsContent>
  <TabsContent value="b">Usage content</TabsContent>
</Tabs>

Installation

Terminal
npx @bloxa/cli add tabs
# or: npx shadcn@latest add @bloxa/tabs

Packages installed automatically: radix-ui

Examples

Pill

12 components installed this week.

Underline

Name, email and avatar.

Vertical

Name, email and avatar.

API reference

Every component also accepts the props of the element it renders.

TabsList

PropTypeDefaultDescription
variant"pill" | "line""pill"Tab style.