# Tabs

## Example

```svelte
<script>
	import { Tabs } from '@foxui/all';

	let active = $state('Tab 1');
</script>

<Tabs
	items={[
		{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
		{ name: 'Tab 2', onclick: () => (active = 'Tab 2') },
		{ name: 'Tab 3', onclick: () => (active = 'Tab 3') }
	]}
	active={active}
/>
```

## Documentation

## Usage

```svelte
<!-- alternatively you can also supply a href for each tab -->
<Tabs
	items={[
		{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
		{ name: 'Tab 2', onclick: () => (active = 'Tab 2') }
	]}
	active={active}
/>
```

## API Reference

### Tabs
A horizontal tab navigation component.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| items | `{ name: string; href?: string; onclick?: () => void }[]` | `-` | The list of tab items. Each item can be a link (href) or a button (onclick). (required) |
| active | `string` | `-` | The name of the currently active tab. (required) |
| class | `string` | `-` | Additional CSS classes to apply. |