apps/www/content/docs/components/tabs.mdx
import { Tabs } from "@chakra-ui/react"
<Tabs.Root>
<Tabs.List>
<Tabs.Trigger />
<Tabs.Indicator />
</Tabs.List>
<Tabs.Content />
</Tabs.Root>
Use the variant prop to change the visual style of the tabs.
Use the lazyMount and/or unmountOnExit prop to only render the tab content
when it is active. This can be useful for performance optimization.
Render the Tabs.Indicator component to display a visual indicator of the
active tab.
Customize the indicator appearance using CSS variables like
--tabs-indicator-bg and --tabs-indicator-shadow.
Pass the asChild to the Tabs.Trigger component to render a link as a tab.
When a tab is clicked, the link will be navigated to.
When using custom router links, you need to set the navigate prop on the
Tabs.Root component.
"use client"
import { Tabs } from "@chakra-ui/react"
import { useNavigate } from "react-router-dom"
const Demo = () => {
const navigate = useNavigate()
return (
<Tabs.Root navigate={({ value, node }) => navigate(`/${value}`)}>
</Tabs.Root>
)
}
Use the fitted prop to make the tabs fit the width of the container.
Use the value and onValueChange prop to control the active tab.
An alternative way to control the tabs is to use the RootProvider component
and the useTabs store hook.
This way you can access the tabs state and methods from outside the tabs.
<ExampleTabs name="tabs-with-store" />Set the disabled prop on the Tabs.Trigger component to disable a tab.
By default, the tabs are selected when the arrow keys are pressed. Disable this
behavior by setting the activationBehavior prop to manual.
In this mode, the tabs will only be selected when clicked or the enter key is pressed.
<ExampleTabs name="tabs-with-manual-activation" />Here's an example of how to dynamically add and remove tabs.
<ExampleTabs name="tabs-with-dynamic-add" />Responsive values are not supported for the orientation prop because it
affects keyboard navigation and aria-orientation behavior, not just styling.
The orientation changes how arrow keys work (horizontal uses left/right,
vertical uses up/down).
To achieve responsive orientation, use the useBreakpointValue hook to change
the orientation based on the screen size.
Use the _open and _close conditional props to animate the tabs.
Use the _selected condition to style the active tab's text and background.
<Tabs.Trigger
_selected={{
bg: "blue.500",
color: "white",
}}
>
Tab
</Tabs.Trigger>
Explore the Tabs component parts interactively. Click on parts in the sidebar
to highlight them in the preview.