Organize content into separate panels within a single container. Easily switch between sections without leaving the page.
Associate tab labels with icons to visually distinguish different sections.
By default, the tabs will have no horizontal padding around the edges. If you want to add padding you can do by adding Tailwind utilities to the tabs and/or tab.panel components.
Tab through content with visually separated, button-like tabs. Ideal for toggling between views inside a container with a constrained width.
For more compact layouts, you can use the size="sm" prop to make the tabs smaller.