Tabs

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

Account

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

Name

Username

Installation

Install the following dependencies

npm install @radix-ui/react-tabs

Copy and paste the following code into your project

'use client'
 
import { createStyleContext } from '@pallas-ui/style-context'
import type { Assign, WithFixedClassName } from '@pallas-ui/style-context'
import * as RadixTabs from '@radix-ui/react-tabs'
import { type TabsVariantProps, tabs } from '@styled-system/recipes'
import type { ComponentProps, JsxStyleProps } from '@styled-system/types'
import type * as React from 'react'
 
const { withProvider, withContext } = createStyleContext(tabs)
 
export type RootProps = WithFixedClassName<ComponentProps<typeof RadixTabs.Root>>
export const Root = withProvider<
  React.ComponentRef<typeof RadixTabs.Root>,
  Assign<RootProps, TabsVariantProps>
>(RadixTabs.Root, 'root')
 
export const TabList = withContext<
  React.ComponentRef<typeof RadixTabs.List>,
  Assign<WithFixedClassName<ComponentProps<typeof RadixTabs.List>>, JsxStyleProps>
>(RadixTabs.List, 'tabList')
 
export const Trigger = withContext<
  React.ComponentRef<typeof RadixTabs.Trigger>,
  Assign<WithFixedClassName<ComponentProps<typeof RadixTabs.Trigger>>, JsxStyleProps>
>(RadixTabs.Trigger, 'trigger')
 
export const Content = withContext<
  React.ComponentRef<typeof RadixTabs.Content>,
  Assign<WithFixedClassName<ComponentProps<typeof RadixTabs.Content>>, JsxStyleProps>
>(RadixTabs.Content, 'content')
 
const Tabs = {
  Root,
  TabList,
  Trigger,
  Content,
}
 
export default Tabs

Update the import paths to match your project setup

Usage

import Tabs from '@/components/ui/tabs'

<Tabs.Root defaultValue="account">
  <Tabs.TabList>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="password">Password</Tabs.Trigger>
  </Tabs.TabList>
  <Tabs.Content value="account">Account content</Tabs.Content>
  <Tabs.Content value="password">Password content</Tabs.Content>
</Tabs.Root>

Examples

Default

Account

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

Name

Username

Vertical

Content 1

This is the content for Tab 1. You can place any content here that you want to display when Tab 1 is active.

Custom Styles

Content 1