Tabs

Ply tabs switch panels in place: pills, underline, or default chrome, optional icons, and overflow scroll. Copy tabs in and project tab, tab-label, and tab-body. They are for sibling views on one URL, not for routing between pages. For morphing panels, wrap the state change in document.startViewTransition() — cookbook: view-transitions.

When to use

Settings, docs, and product pages with a handful of peer sections.
When the URL should stay the same while the panel changes.

When not to use

Top-level app areas that need URLs and back-button history — use the router.
Accordion-style stacked FAQs — use accordion.

Install with npx ply-ui-cli add tabs.

freeView Transitions

Tabs Types

Use type="" to change the tab view. Base theme supports 3 types, "folder", "underline" and "pills". Morph in-page panels with document.startViewTransition() — View Transitions cookbook.

First Tab Body

HTML

<ply-tabs type="folder">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="underline">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="pills">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

Tabs Labels position

Control Tabs Labels position with position="" choose between "left", "right" and "center" or "full-width". By default the tabs labels are positioned on left hand side.

Tabs position center

Example Labels positioned in the middle below

First Tab Body

HTML

<ply-tabs type="folder" position="center">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="underline" position="center">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="pills" position="center">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

Labels position right hand side

Example Tabs Labels positioned in the middle below

First Tab Body

HTML

<ply-tabs type="folder" position="center">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="underline" position="right">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="pills" position="right">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

Labels position full-width

Examples Tabs Labels distributed horizontally with equal width in the middle below

First Tab Body

HTML

<ply-tabs type="folder" position="full-width">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="underline" position="full-width">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="pills" position="full-width">
  <ply-tab>
    <ply-tab-label>First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

Tab Labels with Icons

Add icon="" with the preferred icon name chosen from our Base Icon Pack

First Tab Body

HTML

<ply-tabs type="folder" position="full-width">
  <ply-tab>
    <ply-tab-label icon="home">First Tab</ply-tab-label>
    <ply-tab-body icon="settings">First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label icon="user">Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label>Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="underline" position="full-width">
  <ply-tab>
    <ply-tab-label icon="home">First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label icon="settings">Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label icon="user">Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

First Tab Body

HTML

<ply-tabs type="pills" position="full-width">
  <ply-tab>
    <ply-tab-label icon="home">First Tab</ply-tab-label>
    <ply-tab-body>First Tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label icon="settings">Second Tab</ply-tab-label>
    <ply-tab-body>Second tab Body</ply-tab-body>
  </ply-tab>
  <ply-tab>
    <ply-tab-label icon="user">Third Tab </ply-tab-label>
    <ply-tab-body>Third Tab Body</ply-tab-body>
  </ply-tab>
</ply-tabs>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-tabs-example',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class TabsExampleComponent {}

Install

bash

npx ply-ui-cli add tabs

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add tabs

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add tabs
// Paths are relative to aliases.components (default: src/app/components)
import { TabBodyComponent } from './tabs/tab-body/tab-body.component';
import { TabLabelComponent } from './tabs/tab-label/tab-label.component';
import { TabComponent } from './tabs/tab/tab.component';
import { TabsComponent } from './tabs/tabs.component';

@Component({
  selector: 'app-your-component',
  imports: [
    TabBodyComponent,
    TabComponent,
    TabLabelComponent,
    TabsComponent
  ],
  template: `...`
})
export class YourComponent {}

API for tabs — generated from JSDoc in the library source.

API reference for tabs
API	Member	Type	Default	Description
`ply-tab`	`label`	`string`	`''`	A simple string label for the tab. If complex HTML is needed, project a `ply-tab-label` inside instead.
`ply-tab`	`isActive`	`boolean`	`false`	Tracks whether this tab is currently selected.
`ply-tab`	`tabClass`	`unknown`	`'cursor-pointer'`	Additional CSS classes to apply to the tab trigger.
`ply-tab-body`	`—`	`—`	—	The actual content wrapper for a `ply-tab`. Content inside this tag is only rendered/visible when the parent tab is active.
`ply-tab-label`	`—`	`—`	—	A custom label for a `ply-tab`. Allows you to add rich content (icons, badges, etc.) as the tab label.
`ply-tabs`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-tabs`	`defaultTab`	`number`	`0`	—
`ply-tabs`	`type`	`string \| undefined`	`undefined`	—
`ply-tabs`	`position`	`string \| undefined`	`undefined`	—
`ply-tabs`	`icon`	`string \| undefined`	`undefined`	—
`ply-tabs`	`scrollRestricted`	`boolean`	`false`	—
`ply-tabs`	`ariaLabel`	`string`	`''`	Accessible name for the tab list when a visible label is not present elsewhere.
`ply-tabs`	`labelledBy`	`string`	`''`	ID of an external element that labels this tab list.
`ply-tabs`	`(tabChanged)`	`TabComponent`	—	Emitted whenever the active tab changes.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).