Prism Docs

Tabs

Organize content into separate views where only one view can be visible at a time.

Basic Tabs

The default line style tabs.

Account Settings

Manage your account details here.

Password

Change your password.

Notifications

Configure email preferences.

<prism-tab-group>
  <prism-tab label="Account">...</prism-tab>
  <prism-tab label="Password">...</prism-tab>
  <prism-tab label="Notifications">...</prism-tab>
</prism-tab-group>

Pill Variants

A pill-shaped navigation style.

$19/mo
$190/yr (Save 20%)
<prism-tab-group variant="pill">
  <prism-tab label="Monthly">...</prism-tab>
  <prism-tab label="Yearly">...</prism-tab>
</prism-tab-group>

With Icons

Tabs can contain icons using the PrismIcon component.

Favorites

Your saved items appear here.

Recently Viewed

History of viewed items.

<prism-tab-group>
  <prism-tab label="Favorites">
    <div class="flex items-center gap-3">
      <prism-icon name="heart-line"></prism-icon>
      ...
    </div>
  </prism-tab>
  ...
</prism-tab-group>

Vertical Orientation

Display tabs vertically for sidebar-style navigation.

General Settings Content
Profile Information
Privacy & Security
Billing History
<div class="h-64 flex">
  <prism-tab-group orientation="vertical">
    <prism-tab label="General">...</prism-tab>
    <prism-tab label="Profile">...</prism-tab>
    ...
  </prism-tab-group>
</div>

Playground

Experiment with different variants and orientations.

  • Line
  • Pill
  • Enclosed
  • Horizontal
  • Vertical
Content 1
Content 2
Content 3
<prism-tab-group 
  variant="line" 
  orientation="horizontal">
  <prism-tab label="First Tab">Content 1</prism-tab>
  <prism-tab label="Second Tab">Content 2</prism-tab>
  <prism-tab label="Third Tab">Content 3</prism-tab>
</prism-tab-group>

PrismTabGroupComponent API

NameTypeDefaultDescription
variant'line' | 'pill' | 'enclosed''line'The visual style of the tabs.
orientation'horizontal' | 'vertical''horizontal'Layout direction of the tabs.
selectedIndexnumber0Index of the active tab (supports two-way binding).

PrismTabComponent API

NameTypeDefaultDescription
labelstringundefinedText label displayed in the tab button.