Beta

UI

Tabs

A collection of content layers called tab panels, shown individually.

Radix DocsAPI ReferenceGitHubStorybook

You have 60 days from the time we've shipped your order to return any part of it to us for a refund, provided it is still in its original, unused condition: we do not accept returns of used items.

No return authorization (RMA) is required. If you are within the United States, a pre-paid shipping label will be generated. For direct returns, a flat fee of $10 is deducted from your return for shipping and processing costs.

Installation

  1. 1

    Install dependencies:

    npm install @radix-ui/react-tabs
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    import * as TabsPrimitives from '@radix-ui/react-tabs';import React from 'react';
import { cx, focusRing } from './utils';
const Tabs = (  props: Omit<    React.ComponentPropsWithoutRef<typeof TabsPrimitives.Root>,    'orientation'  >) => {  return <TabsPrimitives.Root {...props} />;};
Tabs.displayName = 'Tabs';
type TabsListVariant = 'line' | 'solid';
const TabsListVariantContext = React.createContext<TabsListVariant>('line');
interface TabsListProps  extends React.ComponentPropsWithoutRef<typeof TabsPrimitives.List> {  variant?: TabsListVariant;}
const variantStyles: Record<TabsListVariant, string> = {  line: cx(    // base    'flex items-center justify-start border-b',    // border color    'border-gray-200 dark:border-gray-800'  ),  solid: cx(    // base    'inline-flex items-center justify-center rounded-md p-1',    // border color    // "border-gray-200 dark:border-gray-800",    // background color    'bg-gray-100 dark:bg-gray-800'  ),};
const TabsList = React.forwardRef<  React.ElementRef<typeof TabsPrimitives.List>,  TabsListProps>(({ className, variant = 'line', children, ...props }, forwardedRef) => (  <TabsPrimitives.List    ref={forwardedRef}    className={cx(variantStyles[variant], className)}    {...props}  >    <TabsListVariantContext.Provider value={variant}>      {children}    </TabsListVariantContext.Provider>  </TabsPrimitives.List>));
TabsList.displayName = 'TabsList';
function getVariantStyles(tabVariant: TabsListVariant) {  switch (tabVariant) {    case 'line':      return cx(        // base        '-mb-px items-center justify-center whitespace-nowrap border-b-2 border-transparent px-3 pb-3 text-sm font-medium transition-all',        // text color        'text-gray-500 dark:text-gray-500',        // hover        'hover:text-gray-700 hover:dark:text-gray-400',        // border hover        'hover:border-gray-300 hover:dark:border-gray-400',        // selected        'data-[state=active]:border-gray-900 data-[state=active]:text-gray-900',        'data-[state=active]:dark:border-gray-50 data-[state=active]:dark:text-gray-50',        // disabled        'disabled:pointer-events-none',        'disabled:text-gray-300 disabled:dark:text-gray-700'      );    case 'solid':      return cx(        // base        'inline-flex items-center justify-center whitespace-nowrap rounded px-3 py-1 transition-all text-sm font-medium',        // text color        'text-gray-500 dark:text-gray-400',        // hover        'hover:text-gray-700 hover:dark:text-gray-200',        // selected        ' data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow',        'data-[state=active]:dark:bg-gray-900 data-[state=active]:dark:text-gray-50',        // disabled        'disabled:pointer-events-none disabled:text-gray-400 disabled:dark:text-gray-600 disabled:opacity-50'      );  }}
const TabsTrigger = React.forwardRef<  React.ElementRef<typeof TabsPrimitives.Trigger>,  React.ComponentPropsWithoutRef<typeof TabsPrimitives.Trigger>>(({ className, children, ...props }, forwardedRef) => {  const variant = React.useContext(TabsListVariantContext);  return (    <TabsPrimitives.Trigger      ref={forwardedRef}      className={cx(getVariantStyles(variant), focusRing, className)}      {...props}    >      {children}    </TabsPrimitives.Trigger>  );});
TabsTrigger.displayName = 'TabsTrigger';
const TabsContent = React.forwardRef<  React.ElementRef<typeof TabsPrimitives.Content>,  React.ComponentPropsWithoutRef<typeof TabsPrimitives.Content>>(({ className, ...props }, forwardedRef) => (  <TabsPrimitives.Content    ref={forwardedRef}    className={cx('outline-none', focusRing, className)}    {...props}  />));
TabsContent.displayName = 'TabsContent';
export { Tabs, TabsContent, TabsList, TabsTrigger };

Example: Tabs solid variant

You have 60 days from the time we've shipped your order to return any part of it to us for a refund, provided it is still in its original, unused condition: we do not accept returns of used items.

No return authorization (RMA) is required. If you are within the United States, a pre-paid shipping label will be generated. For direct returns, a flat fee of $10 is deducted from your return for shipping and processing costs.

Example: Tabs with disabled trigger

Tab 1 content

Example: Tabs with icons

Tab 1 content

Tab 1 content

Example: Streched tabs

Tab 1 content

Tab 1 content

API Reference: Tabs

This component uses the Radix UI API.

Note: The orientation prop has been removed.

API Reference: TabsList

This component uses the Radix UI API.

variant
"line" | "solid"
Set a predefined look.

Default: "line"

API Reference: TabsTrigger

This component uses the Radix UI API.

API Reference: TabsContent

This component uses the Radix UI API.