---
title: Tabs
---

<script>
  import { Tabs } from 'slender-ui'
  import { ComponentContainer } from '$lib'

</script>

<ComponentContainer>
  <Tabs.Group class="!shadow-none w-56">
    <div class="flex space-x-2">
      <Tabs.Tab label="Anglo" class="w-full text-center whitespace-nowrap data-[active='true']:bg-pink-500 data-[active='true']:text-white" variant="soft" color="primary" />
      <Tabs.Tab label="Saxon" class="w-full text-center whitespace-nowrap data-[active='true']:bg-pink-500 data-[active='true']:text-white" variant="soft" color="primary" />
    </div>

    <div class="px-2 py-1 bg-white rounded shadow mt-2 w-full">
      <Tabs.Panel open>
        Loves me better.
      </Tabs.Panel>

      <Tabs.Panel>
        Makes me feel this way.
      </Tabs.Panel>
    </div>

</Tabs.Group>

  <div slot="code">

<!-- prettier-ignore -->
```svelte
<script>
  import { Tabs } from 'slender-ui'
</script>

<Tabs.Group>
  <div class="flex space-x-2">
    <Tabs.Tab label="Anglo" color="primary" />
    <Tabs.Tab label="Saxon" color="primary" />
  </div>

  <div class="px-2 py-1 bg-white rounded shadow mt-2 w-full">
    <Tabs.Panel open>
      Loves me better.
    </Tabs.Panel>

    <Tabs.Panel>
      Makes me feel this way.
    </Tabs.Panel>
  </div>
</Tabs.Group>
```

  </div>
</ComponentContainer>