Tabs

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

Preview

Account

Account

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

Name

Username

Save changes

Password

Code

import Button from '@dinui/react/button'
import Card from '@dinui/react/card'
import Input from '@dinui/react/input'
import Label from '@dinui/react/label'
import Tabs from '@dinui/react/tabs'

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <Tabs.List className="grid w-full grid-cols-2">
        <Tabs.Trigger value="account">Account</Tabs.Trigger>
        <Tabs.Trigger value="password">Password</Tabs.Trigger>
      </Tabs.List>

      <Tabs.Content value="account">
        <Card>
          <Card.Title>Account</Card.Title>
          <Card.Description>
            Make changes to your account here. Click save when you're done.
          </Card.Description>

          <div className="mt-6 space-y-2">
            <div className="space-y-1">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </div>

          <Card.Actions>
            <Button>Save changes</Button>
          </Card.Actions>
        </Card>
      </Tabs.Content>

      <Tabs.Content value="password">
        <Card>
          <Card.Title>Password</Card.Title>
          <Card.Description>
            Change your password here. After saving, you'll be logged out.
          </Card.Description>

          <div className="mt-6 space-y-2">
            <div className="space-y-1">
              <Label htmlFor="current">Current password</Label>
              <Input id="current" type="password" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="new">New password</Label>
              <Input id="new" type="password" />
            </div>
          </div>

          <Card.Actions>
            <Button>Save password</Button>
          </Card.Actions>
        </Card>
      </Tabs.Content>
    </Tabs>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add tabs

   yarn

   yarn dlx @dinui/cli@latest add tabs

   pnpm

   pnpm dlx @dinui/cli@latest add tabs

   bun

   bunx @dinui/cli@latest add tabs

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-tabs tailwind-variants

   yarn

   yarn add @radix-ui/react-tabs tailwind-variants

   pnpm

   pnpm add @radix-ui/react-tabs tailwind-variants

   bun

   bun add @radix-ui/react-tabs tailwind-variants

3. Copy and paste the following code into your project

   'use client'
   
   import * as TabsPrimitive from '@radix-ui/react-tabs'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   
   const tabs = tv({
     slots: {
       list: 'inline-flex h-9 items-center justify-center rounded-lg bg-bg--muted p-1',
       trigger: [
         'transition',
         'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1',
         'text-sm font-medium text-fg-weak',
         'disabled:pointer-events-none disabled:opacity-50',
         'data-[state=active]:bg-bg--contrast data-[state=active]:text-fg data-[state=active]:shadow',
       ],
       content: 'mt-2',
     },
   })
   
   const TabsList = forwardRef<
     React.ElementRef<typeof TabsPrimitive.List>,
     React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
   >((props, ref) => {
     const { list } = tabs()
   
     return (
       <TabsPrimitive.List {...props} ref={ref} className={list({ className: props.className })} />
     )
   })
   TabsList.displayName = TabsPrimitive.List.displayName
   
   const TabsTrigger = forwardRef<
     React.ElementRef<typeof TabsPrimitive.Trigger>,
     React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
   >((props, ref) => {
     const { trigger } = tabs()
   
     return (
       <TabsPrimitive.Trigger
         {...props}
         ref={ref}
         className={trigger({ className: props.className })}
       />
     )
   })
   TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
   
   const TabsContent = forwardRef<
     React.ElementRef<typeof TabsPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
   >((props, ref) => {
     const { content } = tabs()
   
     return (
       <TabsPrimitive.Content
         {...props}
         ref={ref}
         className={content({ className: props.className })}
       />
     )
   })
   TabsContent.displayName = TabsPrimitive.Content.displayName
   
   const Tabs = Object.assign(TabsPrimitive.Root, {
     List: TabsList,
     Trigger: TabsTrigger,
     Content: TabsContent,
   })
   
   export default Tabs
   export { tabs, TabsPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.