This component can help you create a tabbed interface to show related information more efficiently. Use it when there are different ways of getting the same thing done:
- Dashboard / API / Terraform
- Different code syntax styles
- Account-level vs zone-level navigation
- GRE / IPsec tunnels
The primary answer or core instruction should always appear in the main content flow, not exclusively inside a tab or collapsible section.
Use tabs for platform-specific variations (for example, Dashboard versus API versus Terraform) only after stating the general concept. Use Details for supplementary information, not for the primary answer.
import { Tabs, TabItem } from "~/components";
<Tabs>
<TabItem label="Stars" icon="ph:star">
Sirius, Vega, Betelgeuse
</TabItem>
<TabItem label="Moons" icon="ph:moon">
Io, Europa, Ganymede
</TabItem>
</Tabs>Optionally, you can choose a corresponding icon from Starlight’s Icons ↗ for tab labels.
If you have tabs that follow a particular pattern (Dashboard / API / Terraform), add a syncKey parameter that includes a string value.
We use the following syncKey values in our docs:
dashPlusAPI: Dashboard / API / TerraformworkersExamples: For different code language tabs in the Workers docs (JavaScript, TypeScript, Python, Rust)
import { Tabs, TabItem } from "~/components";
<Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">
Dash instructions
</TabItem> <TabItem label="API">
API instructions
</TabItem> </Tabs>Will synchronize with:
Dash instructions
API instructions