# antuikit / Tabs

> Tabs in neutral colors by default, with `floating`, `padded` and `docked` types, a `color` switch to antd's primary paint, and the overflow icon from the icon pack.

Docs: https://antuikit.com/docs/components/tabs

## Install

npx antuikit@latest init
npx antuikit@latest add tabs

## Import

import { Tabs } from "@/components/ui/tabs";

## Demos

- [Basic](https://ui.antuikit.com/embed/tabs/basic.md): Pass `items` with a `key`, `label` and `children` for each tab, and set `defaultActiveKey` to choose the one that opens first.
- [Playground](https://ui.antuikit.com/embed/tabs/playground.md): Try the options together on one tab bar: `type`, `color`, `tabPlacement`, `size`, icons, `centered` and a disabled tab.
- [Floating](https://ui.antuikit.com/embed/tabs/floating.md): Set `type="floating"` for an underline as wide as the label, with a rounded highlight behind the label on hover.
- [Padded](https://ui.antuikit.com/embed/tabs/padded.md): Set `type="padded"` for a highlight that covers the whole padded tab on hover, with the underline spanning the same width.
- [Docked](https://ui.antuikit.com/embed/tabs/docked.md): Set `type="docked"` for padded tabs that fill down to the bar on hover, with a thicker indicator under the icon and label.
- [Vertical docked tabs](https://ui.antuikit.com/embed/tabs/docked-vertical.md): Set `type="docked"` with `tabPlacement="end"` for a side rail, where each tab is rounded on the side away from the rail.
- [Stacked icon](https://ui.antuikit.com/embed/tabs/stacked-icon.md): Pass `classNames.item` to stack each tab's icon above its label, like the tabs of a bottom navigation bar.
- [Color](https://ui.antuikit.com/embed/tabs/color.md): Set `color="primary"` to paint the indicator and the active label in the primary color on any `type`, instead of the neutral default.
- [Card](https://ui.antuikit.com/embed/tabs/card.md): Set `type="card"` to put each tab in a box and join the active one to its panel, like the tabs of a file folder.
- [Editable cards](https://ui.antuikit.com/embed/tabs/editable-card.md): Set `type="editable-card"` and handle `onEdit` to add tabs with the plus button and close them with the cross on each tab.
- [Size](https://ui.antuikit.com/embed/tabs/sizes.md): Set `size` to `small`, `medium` or `large` to scale the tab bar, where `large` suits a page header and `small` a modal.
- [Placement](https://ui.antuikit.com/embed/tabs/placement.md): Set `tabPlacement` to `top`, `end`, `bottom` or `start` to move the tab bar to any side, with every `type`, `card` included.
- [Centered](https://ui.antuikit.com/embed/tabs/centered.md): Set `centered` to center the tabs in the bar, which suits a short set of tabs over a wide panel.
- [Disabled](https://ui.antuikit.com/embed/tabs/disabled.md): Set `disabled` on an item in `items` to keep its tab visible but stop the reader from selecting it.
- [Icon tabs](https://ui.antuikit.com/embed/tabs/icon-tabs.md): Pass an `Icon` to an item's `icon` to put a glyph before its label, and it follows the active icon pack.
- [Icon only](https://ui.antuikit.com/embed/tabs/icon-only.md): Leave `label` empty and put the icon with hidden text in `icon` for icon-only tabs that screen readers can still name.
- [Extra content](https://ui.antuikit.com/embed/tabs/extra.md): Pass `tabBarExtraContent` a node for the end of the bar, or `{ left, right }` for both ends, like a title and a New button.
- [Custom add button](https://ui.antuikit.com/embed/tabs/add-trigger.md): Set `hideAdd` to remove the built-in plus button and add tabs from your own control, like a New tab button at the end of the bar.
- [Overflow](https://ui.antuikit.com/embed/tabs/overflow.md): Tabs that do not fit the bar scroll, and the ones out of view go into a menu at the end of the bar, like twenty sections.
- [Indicator](https://ui.antuikit.com/embed/tabs/indicator.md): Pass `indicator` a `size`, as a number or a function of the tab's width, and an `align` of `start`, `center` or `end`.
- [Sticky tab bar](https://ui.antuikit.com/embed/tabs/sticky-bar.md): Pass `renderTabBar` to wrap the default bar in a sticky element, so it stays in view while a long panel scrolls.
- [Unmount hidden panels](https://ui.antuikit.com/embed/tabs/destroy-on-hidden.md): Set `destroyOnHidden` to unmount a panel when its tab is not active, so anything typed in it is cleared when the reader comes back.
- [classNames and styles](https://ui.antuikit.com/embed/tabs/semantic-dom.md): Pass `classNames` or `styles` to style one part of the tabs, like a tinted `header` and `body` with a colored `indicator`.
- [Workspace settings](https://ui.antuikit.com/embed/tabs/settings-tabs.md): Workspace settings with a count `Badge` in the tab labels, listing members, pending invitations, requests and an audit log.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/tabs`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Tabs` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.