# tabs — Examples

## basic

```html
<tabs-ui value="overview">
  <tab-ui value="overview" text="Overview">
    <p>This is the overview panel. It provides a high-level summary of the feature.</p>
  </tab-ui>
  <tab-ui value="details" text="Details">
    <p>This panel contains detailed specifications and technical information.</p>
  </tab-ui>
  <tab-ui value="changelog" text="Changelog">
    <p>Version history and recent changes are listed here.</p>
  </tab-ui>
</tabs-ui>
```

## with icons

```html
<tabs-ui value="profile">
  <tab-ui value="profile" text="Profile" icon="user">
    <p>Edit your profile information, display name, and avatar.</p>
  </tab-ui>
  <tab-ui value="settings" text="Settings" icon="gear">
    <p>Configure your account preferences, notifications, and privacy.</p>
  </tab-ui>
  <tab-ui value="billing" text="Billing" icon="credit-card">
    <p>Manage your subscription, payment methods, and invoices.</p>
  </tab-ui>
</tabs-ui>
```

## disabled tab

```html
<tabs-ui value="active">
  <tab-ui value="active" text="Active">
    <p>This tab is active and selectable.</p>
  </tab-ui>
  <tab-ui value="also-active" text="Also Active">
    <p>This tab is also selectable.</p>
  </tab-ui>
  <tab-ui value="locked" text="Locked" disabled>
    <p>This content is locked.</p>
  </tab-ui>
</tabs-ui>
```
