npm

Tabs

Tabs organize content into panels shown one at a time, with a row of triggers to switch between them.

Make changes to your account here.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/tabs.

Usage

tabs-demo.tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@viliha/vui-ui/tabs";

export function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Make changes to your account.</TabsContent>
      <TabsContent value="password">Change your password here.</TabsContent>
    </Tabs>
  );
}

API Reference

Built on the Radix Tabs primitive. TabsList also takes a variant of "default" or "line".

PropTypeDefault
defaultValuestring
valuestring
onValueChange(value: string) => void
orientation"horizontal" | "vertical""horizontal"
TabsList variant"default" | "line""default"