Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Docs

Account

Make changes to your account here. Click save when you're done.

Installation

Install the following dependencies:

npm install @radix-ui/react-tabs

Copy and paste the following code into your project.

"use client";
 
import { Root, Scrollbar, Thumb, Viewport } from "@radix-ui/react-scroll-area";
import { tv } from "tailwind-variants";
 
export const ScrollAreaStyles = {
  Root: tv({
    base: ["relative overflow-hidden"],
  }),
  Viewport: tv({
    base: ["size-full rounded-[inherit]"],
  }),
  Scrollbar: tv({
    base: ["flex touch-none select-none transition-colors"],
    variants: {
      orientation: {
        vertical: ["h-full w-2.5 border-l border-l-transparent p-px"],
        horizontal: ["h-2.5 flex-col border-t border-t-transparent p-px"],
      },
    },
  }),
  Thumb: tv({
    base: ["relative flex-1 rounded-full bg-border"],
  }),
};
 
export type ScrollAreaRootProps = React.ComponentProps<typeof Root>;
 
export function ScrollAreaRoot({ className, ...props }: ScrollAreaRootProps) {
  return <Root {...props} className={ScrollAreaStyles.Root({ className })} />;
}
 
export type ScrollAreaViewportProps = React.ComponentProps<typeof Viewport>;
 
export function ScrollAreaViewport({
  className,
  ...props
}: ScrollAreaViewportProps) {
  return (
    <Viewport {...props} className={ScrollAreaStyles.Viewport({ className })} />
  );
}
 
export interface ScrollAreaScrollbarProps
  extends React.ComponentProps<typeof Scrollbar> {
  orientation: "vertical" | "horizontal";
}
 
export function ScrollAreaScrollbar({
  className,
  orientation,
  ...props
}: ScrollAreaScrollbarProps) {
  return (
    <Scrollbar
      {...props}
      orientation={orientation}
      className={ScrollAreaStyles.Scrollbar({ className, orientation })}
    />
  );
}
 
export type ScrollAreaThumbProps = React.ComponentProps<typeof Thumb>;
 
export function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps) {
  return <Thumb {...props} className={ScrollAreaStyles.Thumb({ className })} />;
}
 
export const ScrollArea = Object.assign(
  {},
  {
    Root: ScrollAreaRoot,
    Viewport: ScrollAreaViewport,
    Scrollbar: ScrollAreaScrollbar,
    Thumb: ScrollAreaThumb,
  }
);

Update the import paths to match your project setup.

Usage

Single import

import { Tabs } from "~/components/ui/tabs";
<Tabs.Root defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="password">Password</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">
    Make changes to your account here.
  </Tabs.Content>
  <Tabs.Content value="password">Change your password here.</Tabs.Content>
</Tabs.Root>

Multiple imports

import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "~/components/ui/tabs";
<TabsRoot defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</TabsRoot>
TableTextArea