Tabs

Use Prosefly’s MDX component editor to edit tabbed instructions while keeping the syntax used by your Starlight, Fumadocs, or Prosefly site.

Supported profiles

The same editor supports the Astro, Starlight, Fumadocs, and Prosefly profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

Edit in Visual

Select a tab to edit its content. Edit the tab title in the component, and use the add-tab control to create another tab. Tab controls support arranging and removing items. Open the group options for the profile’s supported synchronization or default-selection properties.

tabs.mdx

StarlightFumadocsProsefly

VisualSource

Reset example

Loading editor…

An interactive example. Changes stay on this page.

Source example

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';

<Tabs items={['npm', 'pnpm']}>
  <Tab value="npm">Install the package with npm.</Tab>
  <Tab value="pnpm">Prefer pnpm? Use this alternative command.</Tab>
</Tabs>

Profile differences

Starlight and Prosefly use Tabs with TabItem. Fumadocs uses Tabs with Tab and an items list on the group. Starlight and Prosefly support their syncKey syntax; Fumadocs has its own groupId and persistence options.

Selecting a tab while editing does not itself change the published default. Keep titles and values consistent in Source, and check the final tab behavior in your website preview.

Related MDX guides

Read next: Accordion · Callout · Steps.