> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs

> Tabbed content navigation with active/inactive part classes

# Tabs

`Tabs` renders a tab list and text content panels.

```lua theme={"dark"}
ui.tabs({
  {
    label = 'Overview',
    value = 'overview',
    content = 'Tabs, table, carousel, accordion, and controls all come from Lua nodes.'
  },
  {
    label = 'Styling',
    value = 'styling',
    content = 'Runtime utility styles and part classes can customize the surface.'
  }
}, {
  defaultValue = 'overview',
  activeTriggerClassName = 'bg-[#111111] text-white'
})
```

## API

<CodeGroup>
  ```lua Builder theme={"dark"}
  ui.tabs(items, props?)
  ```

  ```lua Declarative theme={"dark"}
  lui.tabs(items, props?)
  ```
</CodeGroup>

## Item shape

| Field                      | Type     | Description                         |
| -------------------------- | -------- | ----------------------------------- |
| `value` or `id`            | `string` | Stable tab id. Defaults to `tab-N`. |
| `label` or `title`         | `string` | Trigger label. Defaults to `value`. |
| `content` or `description` | `string` | Content panel text.                 |

## Props

| Prop                       | Description                                          |
| -------------------------- | ---------------------------------------------------- |
| `defaultValue`             | Initial active tab. Defaults to the first tab value. |
| `listClassName`            | Tab list wrapper class.                              |
| `triggerClassName`         | Shared trigger class.                                |
| `activeTriggerClassName`   | Active trigger class.                                |
| `inactiveTriggerClassName` | Inactive trigger class.                              |
| `labelClassName`           | Shared label class.                                  |
| `activeLabelClassName`     | Active label class.                                  |
| `inactiveLabelClassName`   | Inactive label class.                                |
| `contentClassName`         | Content panel class.                                 |