---
url: /api/renderers/web-components/src/variables/tabs.md
---
[pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / tabs

# Variable: tabs

> `const` **tabs**: [`ElementDefinition`](../interfaces/ElementDefinition.md)

Alpha

`<instui-tabs>` — a light-DOM tabbed panel set. It keeps the existing `.instui-tabs` CSS contract
intact while adding selection, panel visibility, and keyboard behavior through the shared tabs
interaction. Load `@pantoken/components/components.css` for the tab visuals.

## Example

```html
<instui-tabs>
  <div class="list" role="tablist" aria-label="Settings">
    <button role="tab" aria-selected="true" aria-controls="general">General</button>
    <button role="tab" aria-selected="false" aria-controls="advanced">Advanced</button>
  </div>
  <div id="general" role="tabpanel">General settings</div>
  <div id="advanced" role="tabpanel" hidden>Advanced settings</div>
</instui-tabs>
```