---
components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
---

<script>
  import { Tabs, Tab, TabContent, TabsSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

### Default

<Tabs>
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" />
  <Tab label="Tab label 3" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
    <TabContent>Content 3</TabContent>
  </svelte:fragment>
</Tabs>

### Auto width

By default, the width of each tab is set to `10rem`.

Set `autoWidth` to `true` for tabs to have an automatically set width.

<Tabs autoWidth>
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" />
  <Tab label="Tab label 3" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
    <TabContent>Content 3</TabContent>
  </svelte:fragment>
</Tabs>

### Reactive example

<FileSource src="/framed/Tabs/TabsReactive" />

### Container type

<Tabs type="container">
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" />
  <Tab label="Tab label 3" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
    <TabContent>Content 3</TabContent>
  </svelte:fragment>
</Tabs>

### Skeleton (default)

<TabsSkeleton count={3} />

### Skeleton (container)

<TabsSkeleton type="container" count={3} />