Tabs

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

Usage

Preview
Code

Content #1

Content #2

Content #3

1
---
2
import { Tabs, TabItem, Card } from 'studiocms:ui/components';
3
---
4

5
<Tabs>
6
  <TabItem label='Tab #1'>
7
    <Card fullWidth>
8
      Content #1
9
    </Card>
10
  </TabItem>
11
  <TabItem label='Tab #2'>
12
    <Card fullWidth>
13
      Content #2
14
    </Card>
15
  </TabItem>
16
  <TabItem label='Tab #3'>
17
    <Card fullWidth>
18
      Content #3
19
    </Card>
20
  </TabItem>
21
</Tabs>

Customizing the tabs

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

Preview
Code

Yellow + Star

Green + Arrow

Red + Bell

1
---
2
import { Tabs, TabItem, Card } from 'studiocms:ui/components';
3
---
4

5
<Tabs>
6
  <TabItem label='Yellow + Star' icon='star' color='warning'>
7
    <Card fullWidth>
8
      Yellow + Star
9
    </Card>
10
  </TabItem>
11
  <TabItem label='Green + Arrow' icon='arrows-right-left' color='success'>
12
    <Card fullWidth>
13
      Green + Arrow
14
    </Card>
15
  </TabItem>
16
  <TabItem label='Red + Bell' icon='bell' color='danger'>
17
    <Card fullWidth>
18
      Red + Bell
19
    </Card>
20
  </TabItem>
21
</Tabs>

Variants

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
Code

Content #1

Content #2

Content #3

1
---
2
import { Tabs, TabItem, Card } from 'studiocms:ui/components';
3
---
4

5
<Tabs variant='starlight'>
6
  <TabItem label='Tab #1'>
7
    <Card fullWidth>
8
      Content #1
9
    </Card>
10
  </TabItem>
11
  <TabItem label='Tab #2'>
12
    <Card fullWidth>
13
      Content #2
14
    </Card>
15
  </TabItem>
16
  <TabItem label='Tab #3'>
17
    <Card fullWidth>
18
      Content #3
19
    </Card>
20
  </TabItem>
21
</Tabs>

Alignment

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
Code

Content #1

Content #2

1
---
2
import { Tabs, TabItem, Card } from 'studiocms:ui/components';
3
---
4

5
<Tabs align='right'>
6
  <TabItem label='Tab #1'>
7
    <Card fullWidth>
8
      Content #1
9
    </Card>
10
  </TabItem>
11
  <TabItem label='Tab #2'>
12
    <Card fullWidth>
13
      Content #2
14
    </Card>
15
  </TabItem>
16
</Tabs>

This even works with the starlight variant!

Syncing & Storage

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
Code

Tab Contents #1 (Sync 1)

Tab Contents #2 (Sync 2)

Different Element

Tab Contents #3 (Sync 1)

Tab Contents #4 (Sync 2)

1
---
2
import { Tabs, TabItem, Card, Divider } from 'studiocms:ui/components';
3
---
4

5
<Tabs syncKey='sync-example'>
6
  <TabItem label='Tab #1 (Sync 1)' icon='bolt'>
7
    <Card fullWidth>
8
      Tab Contents #1 (Sync 1)
9
    </Card>
10
  </TabItem>
11
  <TabItem label='Tab #2 (Sync 2)' icon='bolt-slash' color='success'>
12
    <Card fullWidth>
13
      Tab Contents #2 (Sync 2)
14
    </Card>
15
  </TabItem>
16
</Tabs>
17
<Divider>Different Element</Divider>
18
<Tabs syncKey='sync-example'>
19
  <TabItem label='Tab #3 (Sync 1)' icon='bolt'>
20
    <Card fullWidth>
21
      Tab Contents #3 (Sync 1)
22
    </Card>
23
  </TabItem>
24
  <TabItem label='Tab #4 (Sync 2)' icon='bolt-slash' color='success'>
25
    <Card fullWidth>
26
      Tab Contents #4 (Sync 2)
27
    </Card>
28
  </TabItem>
29
</Tabs>