# Tabs
Use tabs to quickly switch between different views and pages.
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Overview
Key features
Activity
A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
to deeper docs.
List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
theming, integrations).
Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
actionable.
);
}
```
## Controlled
Use the `value` and `onValueChange` props to control state programmatically.
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';
export default function Controlled() {
const [value, setValue] = useState('overview');
return (
setValue(details.value)}>
Overview
Key features
Activity
A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
to deeper docs.
List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
theming, integrations).
Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
actionable.
);
}
```
## Navigation
Use the `element` slot to override the default `button` with an `a` tag for navigation tabs.
```tsx
/**
* Because demonstrating navigation inside a code snippet is not feasible, this example uses local state to simulate URL path changes.
*
* In a real application, you would:
* - Replace the `url` variable with the `url` of the current page.
* - Replace `onValueChange={(details) => setUrl(details.value)}` with `navigate((details) => navigate(details.value))` using your framework's navigation method.
*/
import { Tabs } from '@skeletonlabs/skeleton-react';
import { useState, type ComponentProps } from 'react';
export default function Navigation() {
const [url, setUrl] = useState('#overview');
return (
setUrl(details.value)}>
(
)} href="#overview">
Overview
)}
/>
(
)} href="#key-features">
Key Features
)}
/>
(
)} href="#activity">
Activity
)}
/>
A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
to deeper docs.
List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
theming, integrations).
Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
actionable.
);
}
```
## Fluid Width
Use `flex` utility classes to make the tabs stretch to fill the width of their container.
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Fluid() {
return (
Overview
Key features
Activity
A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
to deeper docs.
List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
theming, integrations).
Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
actionable.
);
}
```
## Orientation
Using the `orientation` prop to control the layout.
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Vertical() {
return (
Overview
Key features
Activity
A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
to deeper docs.
List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
theming, integrations).
Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
actionable.
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Overview
Key features
Activity
A concise overview of the project: usage, goals, and recent highlights. Use this area to orient readers with key metrics and links
to deeper docs.
List the most important features here with short, pragmatic descriptions so readers can scan for what matters (accessibility,
theming, integrations).
Show recent activity or sample data: new releases, PRs merged, or notable user events. This helps examples feel realistic and
actionable.
);
}
```
## Anatomy
Here's an overview of how the Tabs component is structured in code:
```tsx
import { Tabs } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference