Tabs

Components

Tabs

To create a tabbed interface use the <Tabs> and <TabItem> components. Tabs are useful for grouping equivalent information where a user only needs to see one of several options.

Import

import { Tabs, TabItem } from '@astrojs/starlight/components';

Usage

<Tabs>
  <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>

Preview

Tab one

Tab one content

Tab two

Tab two content