# Tabs

Edit tabs, package manager examples, and synchronized tab groups in Starlight, Fumadocs, and Prosefly MDX.

import ContentEditor from '@/components/editor/ContentEditor.astro';

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](/frameworks/astro/), [Starlight](/frameworks/starlight/), [Fumadocs](/frameworks/fumadocs/), and [Prosefly](/frameworks/lotus/) 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.

<ContentEditor content="tabs" />

## Source example

```mdx
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](/docs/editor/components/accordion/) · [Callout](/docs/editor/components/callout/) · [Steps](/docs/editor/components/steps/).