# Tabs
{"Overview"} {"Analytics"} {"Reports"} {"Settings"} {"Overview"} {" View key metrics and recent activity across active projects. "} {" You have 12 active projects and 3 pending tasks. "} {"Analytics"} {" Track engagement trends and performance over time. "} {" Page views are up 25% compared to last month. "} {"Reports"} {" Generate detailed exports for sharing and analysis. "} {" You have 5 reports ready to export. "} {"Settings"} {" Manage account preferences and personalization options. "} {" Configure notifications, security, and themes. "}
```astro
---
---
Overview
Analytics
Reports
Settings
Overview
View key metrics and recent activity across active projects.
You have 12 active projects and 3 pending tasks.
Analytics
Track engagement trends and performance over time.
Page views are up 25% compared to last month.
Reports
Generate detailed exports for sharing and analysis.
You have 5 reports ready to export.
Settings
Manage account preferences and personalization options.
Configure notifications, security, and themes.
```
## Installation
```bash
bunx bejamas add tabs
```
```bash
npx bejamas add tabs
```
```bash
pnpm dlx bejamas add tabs
```
```bash
yarn dlx bejamas add tabs
```
## Usage
```astro nocollapse
---
---
Overview
Analytics
Overview content...
Analytics content...
```
## Props
| Prop | Type | Default |
|---|---|---|
| class | `string` | `""` |
| orientation | `"horizontal" \| "vertical"` | `"horizontal"` |
| defaultValue | `string` | |
## Examples
### Line Animated
{"Overview"} {"Analytics"} {"Reports"} {"Line variant content."} {"Analytics content."} {"Reports content."}
```astro
---
---
Overview
Analytics
Reports
Line variant content.
Analytics content.
Reports content.
```
### Vertical
{"Profile"} {"Billing"} {"Notifications"} {" Profile settings content. "} {" Billing settings content. "} {" Notifications settings content. "}
```astro
---
---
Profile
Billing
Notifications
Profile settings content.
Billing settings content.
Notifications settings content.
```
### Disabled
{"Active"} {"Disabled"} {"Secondary"} {"Active tab content."} {"Disabled tab content."} {"Secondary tab content."}
```astro
---
---
Active
Disabled
Secondary
Active tab content.
Disabled tab content.
Secondary tab content.
```
### Overflow
{"Monday"} {"Tuesday"} {"Wednesday"} {"Thursday"} {"Friday"} {"Saturday"} {"Sunday"} {"Monday content."} {"Tuesday content."} {"Wednesday content."} {"Thursday content."} {"Friday content."} {"Saturday content."} {"Sunday content."}
```astro
---
---
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
Monday content.
Tuesday content.
Wednesday content.
Thursday content.
Friday content.
Saturday content.
Sunday content.
```
### Direction Animation
{"Overview"} {"Analytics"} {"Reports"} {"Direction-aware overview."} {"Direction-aware analytics."} {"Direction-aware reports."}
```astro
---
---
Overview
Analytics
Reports
Direction-aware overview.
Direction-aware analytics.
Direction-aware reports.
```
### Sizes
{"Account"} {"Password"} {"Account"} {"Password"} {"Account"} {"Password"}
```astro
---
---
Account
Password
Account
Password
Account
Password
```
## API Reference
### Events
The tabs component emits custom events that you can listen to:
| Event | Detail | Description |
|-------|--------|-------------|
| `tabs:change` | `{ value: string }` | Fired when the selected tab changes |
{"Tab 1"} {"Tab 2"} {"Content 1"} {"Content 2"}
```astro nocollapse console
Tab 1
Tab 2
Content 1
Content 2
```
### Programmatic Control
You can control the tabs programmatically by dispatching a `tabs:set` event:
```js nocollapse
const tabs = document.getElementById('my-tabs');
// Select a tab
tabs.dispatchEvent(new CustomEvent('tabs:set', {
detail: { value: 'tab2' }
}));
```
### Variants
| Prop | Element | Values | Default |
|------|---------|--------|---------|
| `variant` | tabs-list | `indicator`, `default`, `line`, `line-animated` | `indicator` |
| `size` | tabs-list | `sm`, `default`, `lg` | `default` |
| `animation` | tabs-content | `none`, `fade`, `slide`, `direction` | `none` |
### Data Attributes
The tabs component sets these data attributes that you can use for styling or querying state:
| Attribute | Element | Description |
|-----------|---------|-------------|
| `data-orientation` | tabs | Current orientation (`horizontal` or `vertical`) |
| `data-variant` | tabs-list | Current list variant (`indicator`, `default`, `line`, or `line-animated`) |
| `data-activation-direction` | tabs-content | Last activation direction after tab change (`left`, `right`, `up`, or `down`, not set on initial mount) |
| `data-state` | tabs-trigger | Current state (`active` or `inactive`) |
### CSS Variables
The tabs indicator exposes CSS variables for animation:
| Variable | Element | Description |
|----------|---------|-------------|
| `--active-tab-left` | tabs-indicator | Left position of active tab |
| `--active-tab-width` | tabs-indicator | Width of active tab |
| `--active-tab-top` | tabs-indicator | Top position of active tab |
| `--active-tab-height` | tabs-indicator | Height of active tab |