Tabs

Tabs let readers switch between alternative content, package managers, OSes, or languages, without leaving the page.

Example

pnpm add axerity

The first tab is selected by default.

Icons

Give a Tab an icon (any Lucide name) to show a glyph next to its label:

export const x: number = 1;

Shared & persistent groups

Give multiple Tabs the same group and they sync, picking a tab in one switches every other group on the page, and the choice is remembered across reloads (via localStorage). Tabs are matched by title.

pnpm add axerity

pnpm dev

Switch one of the two blocks above, the other follows.

Usage

Import Tabs and Tab, then give each Tab a title. Remember the blank lines around tab content so the Markdown inside is parsed:

<script>	import { Tabs, Tab } from '$lib';</script><Tabs>	<Tab title="pnpm">    ```bash    pnpm add axerity    ```    </Tab>    <Tab title="npm">    ```bash    npm install axerity    ```    </Tab></Tabs>

Props