Tabs

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

API Reference

Make changes to your account here.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/tabs.tsx

Import from@viliha/vui-react/tabs

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

tabs-demo.tsx

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@viliha/vui-react/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".

Prop	Type	Default
defaultValue	string	—
value	string	—
onValueChange	(value: string) => void	—
orientation	"horizontal" \| "vertical"	"horizontal"
TabsList variant	"default" \| "line"	"default"

Tabs props

It takes no props of its own. Everything you pass reaches the underlying TabsPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

TabsContent props

It takes no props of its own. Everything you pass reaches the underlying TabsPrimitive.Content primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

TabsList props

Plus everything React.ComponentProps<typeof TabsPrimitive.List> accepts, passed straight through to the underlying element.

Prop	Type	Default
variant?	"default" \| "line"	"default"

TabsTrigger props

It takes no props of its own. Everything you pass reaches the underlying TabsPrimitive.Trigger primitive, so every attribute it accepts works here unchanged and nothing is invented on top.