Tabs

The tabs you can see on the StudioCMS UI landing page ⤴, as a component!

Usage

'Read the “', Usage, '” section'

Preview

Content #1

Content #2

Content #3

Code

TabsExample.astro

---
import { Tabs, TabItem, Card } from '@studiocms/ui/components';
---

<Tabs>
  <TabItem label='Tab #1'>
    <Card fullWidth>
      Content #1
    </Card>
  </TabItem>
  <TabItem label='Tab #2'>
    <Card fullWidth>
      Content #2
    </Card>
  </TabItem>
  <TabItem label='Tab #3'>
    <Card fullWidth>
      Content #3
    </Card>
  </TabItem>
</Tabs>

Customizing the tabs

'Read the “', Customizing the tabs, '” section'

You can add icons and even change the color of the tabs:

Preview

Yellow + Star

Green + Arrow

Red + Bell

Code

TabsCustomizationExample.astro

---
import { Tabs, TabItem, Card } from '@studiocms/ui/components';
---

<Tabs>
  <TabItem label='Yellow + Star' icon='star' color='warning'>
    <Card fullWidth>
      Yellow + Star
    </Card>
  </TabItem>
  <TabItem label='Green + Arrow' icon='arrows-right-left' color='success'>
    <Card fullWidth>
      Green + Arrow
    </Card>
  </TabItem>
  <TabItem label='Red + Bell' icon='bell' color='danger'>
    <Card fullWidth>
      Red + Bell
    </Card>
  </TabItem>
</Tabs>

Variants

'Read the “', Variants, '” section'

For those who don’t like the appearance of the tabs in general, you can change the variant prop to starlight. This will give the tabs the appearance of the tabs that Starlight uses, the same look you can see for the preview cards on this page.

Preview

Content #1

Content #2

Content #3

Code

TabsVariantsExample.astro

---
import { Tabs, TabItem, Card } from '@studiocms/ui/components';
---

<Tabs variant='starlight'>
  <TabItem label='Tab #1'>
    <Card fullWidth>
      Content #1
    </Card>
  </TabItem>
  <TabItem label='Tab #2'>
    <Card fullWidth>
      Content #2
    </Card>
  </TabItem>
  <TabItem label='Tab #3'>
    <Card fullWidth>
      Content #3
    </Card>
  </TabItem>
</Tabs>

Alignment

'Read the “', Alignment, '” section'

In certain cases, you might want to change the alignment of the tabs. You can do this by setting the align prop to left, center or right, with left being the default. Here’s an example of the tabs being aligned to the right:

Preview

Content #1

Content #2

Code

TabsAlignmentExample.astro

---
import { Tabs, TabItem, Card } from '@studiocms/ui/components';
---

<Tabs align='right'>
  <TabItem label='Tab #1'>
    <Card fullWidth>
      Content #1
    </Card>
  </TabItem>
  <TabItem label='Tab #2'>
    <Card fullWidth>
      Content #2
    </Card>
  </TabItem>
</Tabs>

This even works with the starlight variant!

Syncing & Storage

'Read the “', Syncing & Storage, '” section'

To keep a users selection saved and even sync multiple different tab containers with each other, you can set a syncKey. By default, this value will be stored in sessionStorage to comply with GDPR guidelines, however if you want to, you can set the storage prop to persistent to store the value in localStorage.

Preview

Tab Contents #1 (Sync 1)

Tab Contents #2 (Sync 2)

---

Different Element

Tab Contents #3 (Sync 1)

Tab Contents #4 (Sync 2)

Code

TabsSyncExample.astro

---
import { Tabs, TabItem, Card, Divider } from '@studiocms/ui/components';
---

<Tabs syncKey='sync-example'>
  <TabItem label='Tab #1 (Sync 1)' icon='bolt'>
    <Card fullWidth>
      Tab Contents #1 (Sync 1)
    </Card>
  </TabItem>
  <TabItem label='Tab #2 (Sync 2)' icon='bolt-slash' color='success'>
    <Card fullWidth>
      Tab Contents #2 (Sync 2)
    </Card>
  </TabItem>
</Tabs>
<Divider>Different Element</Divider>
<Tabs syncKey='sync-example'>
  <TabItem label='Tab #3 (Sync 1)' icon='bolt'>
    <Card fullWidth>
      Tab Contents #3 (Sync 1)
    </Card>
  </TabItem>
  <TabItem label='Tab #4 (Sync 2)' icon='bolt-slash' color='success'>
    <Card fullWidth>
      Tab Contents #4 (Sync 2)
    </Card>
  </TabItem>
</Tabs>