Tabs

A component for creating tabbed content sections. Useful for showing multiple code examples, alternative approaches, or organizing related content.

Usage

Create tabs using the ::tabs and ::tabs-item components:

::tabs
  ::tabs-item{label="First Tab"}
  Content for the first tab.
  ::

  ::tabs-item{label="Second Tab"}
  Content for the second tab.
  ::
::

Content for the first tab.

Code Examples

Tabs are useful for showing code in different languages or frameworks:

::tabs
  ::tabs-item{label="Vue"}
  \`\`\`vue
  <script setup>
  const count = ref(0)
  </script>

  <template>
    <button @click="count++">{{ count }}</button>
  </template>
  \`\`\`
  ::

  ::tabs-item{label="React"}
  \`\`\`tsx
  function Counter() {
    const [count, setCount] = useState(0)
    return <button onClick={() => setCount(c => c + 1)}>{count}</button>
  }
  \`\`\`
  ::
::

<script setup>
const count = ref(0)
</script>

<template>
  <button @click="count++">
    {{ count }}
  </button>
</template>

Package Manager Example

Use the sync prop to remember the user's choice across tabs:

::tabs{sync="pm"}
  ::tabs-item{label="npm"}
  \`\`\`bash
  npm install @pleaseai/docs
  \`\`\`
  ::

  ::tabs-item{label="pnpm"}
  \`\`\`bash
  pnpm add @pleaseai/docs
  \`\`\`
  ::

  ::tabs-item{label="bun"}
  \`\`\`bash
  bun add @pleaseai/docs
  \`\`\`
  ::
::


bun add @pleaseai/docs

With Icons

Add icons to tab triggers using the icon prop:

::tabs
  ::tabs-item{label="Vue" icon="i-logos-vue"}
  Vue content here.
  ::

  ::tabs-item{label="React" icon="i-logos-react"}
  React content here.
  ::
::

Components

Tabs

The root container for the tab system.

Prop	Type	Default	Description
`defaultIndex`	`number`	`0`	Initially active tab index (0-based)
`sync`	`string`	-	Sync tab selection across tabs with this key via localStorage
`class`	`string`	-	Additional CSS classes

TabsItem

Individual tab content panel with its trigger label.

Prop	Type	Default	Description
`label`	`string`	required	The label displayed in the tab trigger
`icon`	`string`	-	Optional icon name for the tab
`class`	`string`	-	Additional CSS classes

Styling

The tabs component uses an underline style for the active tab indicator. Active tabs show a primary-colored bottom border with smooth transitions on hover and selection.