Tabs

Ready

Switch between panels.

Requires radix-ui

Account settings panel.

Installation

$ npx @oratiq-js/ui add tabs

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

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

Variants

Account settings panel.

Every plan.

Daily view.

Props

Prop	Type	Default	Description
`variant`	`"solid" \| "underline" \| "pill"`	`"solid"`	Set on TabsList; triggers inherit it via context.

Tabs are not navigation

Tabs switch panels within one page. If selecting one should change the URL and be linkable, back-buttonable, and shareable, you want links — not tabs.

View source on GitHub → components/ui/tabs.tsx