Tabs

Base UI (Angular) 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.

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 base-ui-cli add tabs.

free

Tabs Types

Use type="" to change the tab view. Base theme supports 3 types, "folder", "underline" and "pills".

Folder Type

First Tab Body

HTML

Underline Type

First Tab Body

HTML

Pills Type

First Tab Body

HTML

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

Folder Type Labels position center

First Tab Body

HTML

Underline Type Labels position center

First Tab Body

HTML

Pills Type Labels position center

First Tab Body

HTML

Labels position right hand side

Example Tabs Labels positioned in the middle below

Folder Type Labels position right hand side

First Tab Body

HTML

Underline Type Labels position right hand side

First Tab Body

HTML

Pills Type Labels position right hand side

First Tab Body

HTML

Labels position full-width

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

Folder Type Labels distributed with equal width

First Tab Body

HTML

Underline Type Labels distributed with equal width

First Tab Body

HTML

Pills Type Labels distributed with equal width

First Tab Body

HTML

Tab Labels with Icons

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

Folder Type Labels with icons

First Tab Body

HTML

Underline Type Labels with icons

First Tab Body

HTML

Pills Type Labels with icons

First Tab Body

HTML

Installation

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

bash

npx base-ui-cli add tabs

API Reference

For AI agents

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

bash

npx -y base-ui-mcp

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

typescript (Example)

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

Base UI (Angular) — base-ui.net — is a CLI-first Angular + Tailwind CSS component library with 208 components and blocks (119 free), delivered shadcn-style: npx base-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).