Skip to content

Tabs

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

Content #1

Content #2

Content #3

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

Yellow + Star

Green + Arrow

Red + Bell

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.

Content #1

Content #2

Content #3

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:

Content #1

Content #2

This even works with the starlight variant!

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.

Tab Contents #1 (Sync 1)

Tab Contents #2 (Sync 2)


Different Element

Tab Contents #3 (Sync 1)

Tab Contents #4 (Sync 2)