Dreamy UI Logo

Dreamy UI

Your UI

v2
Sponsor

Discord

Docs
Introduction
Installation
CLI
Charts
LLMs
MCP Server
Skills
Next.js
React Router
Remix
Vite
Customization
Panda Preset
Tokens
Fonts
Gotchas
Accordion
Action Bar
New
Alert
Autocomplete
New
Avatar
Badge
Box
Breadcrumb
Button
Card
Checkbox Card
Checkbox
Close Button
Date Picker
New
Divider
Editable
Empty State
New
Field
Fieldset
New
File Upload
New
Flex
Grid
Group
Heading
Hover Card
New
Icon
Image
Input
Kbd
Link
List
Menu
Updated
Modal
Pagination
New
Pin Input
Popover
Portal
Progress Circular
Progress
Radio Card
New
Radio
Range Slider
New
Select
Skeleton
Slider
Snippet
Span
Spinner
Stat
Stepper
New
Switch
Table
Tabs
Updated
Text
Textarea
Theme
Toast
Tooltip
Transitions
Visually Hidden
Wrap
Use Action Key
Use Can Use Dom
Use Clipboard
Use Color Mode
Use Controllable
Use Event Listener
Use Reduced Motion
Use Safe Layout Effect
Use Update Effect

Tabs

Tabs can be used to display information in a structured way.

Source
Theme Source

#

Installation

pnpm dlx dreamy add tabs

#

Usage

Home content

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab>
      <HStack gap={1.5}><LuHouse />Home</HStack>
    </Tabs.Tab>
    <Tabs.Tab>
      <HStack gap={1.5}><LuSettings />Settings</HStack>
    </Tabs.Tab>
    <Tabs.Tab>
      <HStack gap={1.5}><LuBell />Notifications</HStack>
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>
      <p>Home content</p>
    </Tabs.Panel>
    <Tabs.Panel>
      <p>Settings content</p>
    </Tabs.Panel>
    <Tabs.Panel>
      <p>Notifications content</p>
    </Tabs.Panel>
  </Tabs.Panels>
</Tabs.Root>

#

Variant

You can change the variant of the Tabs by passing the variant prop to the Tabs.Root component.

function TabsVariants() {
    return (
        <VStack gap={6}>
            <Flex col gap={2}>
                {(["filled", "underline", "filled-simple"] as const).map((variant) => (
                    <React.Fragment key={variant}>
                        <Text bold>{capitalize(variant)} Variant</Text>
                        <Tabs.Root variant={variant}>
                            <Tabs.List>
                                <Tabs.Tab>
                                    <HStack gap={1.5}><LuHouse />Home</HStack>
                                </Tabs.Tab>
                                <Tabs.Tab>
                                    <HStack gap={1.5}><LuSettings />Settings</HStack>
                                </Tabs.Tab>
                                <Tabs.Tab>
                                    <HStack gap={1.5}><LuUser />Profile</HStack>
                                </Tabs.Tab>
                            </Tabs.List>
                            <Tabs.Panels>
                                <Tabs.Panel>Home content</Tabs.Panel>
                                <Tabs.Panel>Settings content</Tabs.Panel>
                                <Tabs.Panel>Profile content</Tabs.Panel>
                            </Tabs.Panels>
                        </Tabs.Root>
                    </React.Fragment>
                ))}
            </Flex>
        </VStack>
    );
}

#

Size

You can change the size of the Tabs by passing the size prop to the Tabs.Root component. Available sizes are sm, md and lg.

function SizeTabs() {
    return (
        <VStack gap={6}>
            <Flex col gap={2}>
                {(["sm", "md", "lg"] as const).map((size) => (
                    <React.Fragment key={size}>
                        <Text bold>{size.toUpperCase()} Size</Text>
                        <Tabs.Root size={size}>
                            <Tabs.List>
                                <Tabs.Tab>
                                    <HStack gap={1.5}><LuHouse />Home</HStack>
                                </Tabs.Tab>
                                <Tabs.Tab>
                                    <HStack gap={1.5}><LuSettings />Settings</HStack>
                                </Tabs.Tab>
                                <Tabs.Tab>
                                    <HStack gap={1.5}><LuUser />Profile</HStack>
                                </Tabs.Tab>
                            </Tabs.List>
                            <Tabs.Panels>
                                <Tabs.Panel>Home content</Tabs.Panel>
                                <Tabs.Panel>Settings content</Tabs.Panel>
                                <Tabs.Panel>Profile content</Tabs.Panel>
                            </Tabs.Panels>
                        </Tabs.Root>
                    </React.Fragment>
                ))}
            </Flex>
        </VStack>
    );
}

#

Fit Width

Add fitted prop, to fit the tabs width to the container.

Dashboard content

<Tabs.Root fitted>
  <Tabs.List>
    <Tabs.Tab>
      <HStack gap={1.5}><LuLayoutDashboard />Dashboard</HStack>
    </Tabs.Tab>
    <Tabs.Tab>
      <HStack gap={1.5}><LuMessageSquare />Messages</HStack>
    </Tabs.Tab>
    <Tabs.Tab>
      <HStack gap={1.5}><LuBell />Notifications</HStack>
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>
      <p>Dashboard content</p>
    </Tabs.Panel>
    <Tabs.Panel>
      <p>Messages content</p>
    </Tabs.Panel>
    <Tabs.Panel>
      <p>Notifications content</p>
    </Tabs.Panel>
  </Tabs.Panels>
</Tabs.Root>

#

Controlled

You can control the selected tab by passing the index and onChange props to the Tabs.Root component.

function ControlledTabs() {
    const [index, setIndex] = useState(0);
    const tabs = ["Dashboard", "AI Chat", "Security"];
 
    return (
        <>
            <Text bold>Current Tab: {tabs[index]}</Text>
 
            <Tabs.Root index={index} onChange={setIndex}>
                <Tabs.List>
                    <Tabs.Tab>
                        <HStack gap={1.5}><LuLayoutDashboard />Dashboard</HStack>
                    </Tabs.Tab>
                    <Tabs.Tab>
                        <HStack gap={1.5}><LuBot />AI Chat</HStack>
                    </Tabs.Tab>
                    <Tabs.Tab>
                        <HStack gap={1.5}><LuShield />Security</HStack>
                    </Tabs.Tab>
                </Tabs.List>
                <Tabs.Panels>
                    <Tabs.Panel>Dashboard content</Tabs.Panel>
                    <Tabs.Panel>AI Chat content</Tabs.Panel>
                    <Tabs.Panel>Security content</Tabs.Panel>
                </Tabs.Panels>
            </Tabs.Root>
        </>
    );
}

#

Lazy mount panel

You can lazy mount the panel by passing the isLazy prop to the Tabs.Root component. This will only render the active tab panel, instead of switching the visibility of all panels.

Home content
<Tabs.Root isLazy>
  <Tabs.List>
    <Tabs.Tab>
      <HStack gap={1.5}><LuHouse />Home</HStack>
    </Tabs.Tab>
    <Tabs.Tab>
      <HStack gap={1.5}><LuMessageSquare />Messages</HStack>
    </Tabs.Tab>
    <Tabs.Tab>
      <HStack gap={1.5}><LuSettings />Settings</HStack>
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Home content</Tabs.Panel>
    <Tabs.Panel>Messages content</Tabs.Panel>
    <Tabs.Panel>Settings content</Tabs.Panel>
  </Tabs.Panels>
</Tabs.Root>

#

Overflow

Add overflowX="scroll" to the Tabs.List if your tabs are overflowing the container.

Home content
<Box maxW="xs" w="xs">
  <Tabs.Root>
    <Tabs.List overflowX="scroll">
      <Tabs.Tab><HStack gap={1.5}><LuHouse />Home</HStack></Tabs.Tab>
      <Tabs.Tab><HStack gap={1.5}><LuSettings />Settings</HStack></Tabs.Tab>
      <Tabs.Tab><HStack gap={1.5}><LuMessageSquare />Messages</HStack></Tabs.Tab>
      <Tabs.Tab><HStack gap={1.5}><LuUser />Profile</HStack></Tabs.Tab>
      <Tabs.Tab><HStack gap={1.5}><LuBell />Notifications</HStack></Tabs.Tab>
      <Tabs.Tab><HStack gap={1.5}><LuChartBar />Analytics</HStack></Tabs.Tab>
      <Tabs.Tab><HStack gap={1.5}><LuShield />Security</HStack></Tabs.Tab>
    </Tabs.List>
    <Tabs.Panels>
      <Tabs.Panel>Home content</Tabs.Panel>
      <Tabs.Panel>Settings content</Tabs.Panel>
      <Tabs.Panel>Messages content</Tabs.Panel>
      <Tabs.Panel>Profile content</Tabs.Panel>
      <Tabs.Panel>Notifications content</Tabs.Panel>
      <Tabs.Panel>Analytics content</Tabs.Panel>
      <Tabs.Panel>Security content</Tabs.Panel>
    </Tabs.Panels>
  </Tabs.Root>
</Box>

Previous

Table

Next

Text