@styloviz/tabs

6 visual styles (underline, pills, boxed, lifted, border-card, unstyled), closable and scrollable tabs, vertical layout, keyboard navigation and lazy panels.

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/tabs

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvTabsComponent } from '@styloviz/tabs';

@Component({
  standalone: true,
  imports: [SvTabsComponent],
  template: `
    <sv-tabs [tabs]="tabs">
      <ng-template svTabPanel="overview">…</ng-template>
    </sv-tabs>
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | tabs | TabItem[] | [] | Tab definitions in display order. | | activeId | string (two-way) | '' | ID of the currently active tab. Use [(activeId)] for two-way binding. | | tabsStyle | TabsStyle | 'underline' | Visual style variant. | | size | TabsSize | 'md' | Size of the tab text and icons. | | layout | TabsLayout | 'horizontal' | Layout direction. | | fullWidth | boolean | false | Whether tab buttons stretch to fill all available width. Only applicable to the 'horizontal' layout. | | scrollable | boolean | false | Allows the tab list to scroll horizontally instead of wrapping/overflowing when there are more tabs than fit the available width. | | customClass | string | '' | Additional CSS classes on the root wrapper. |

Outputs

| Output | Type | Description | | --- | --- | --- | | tabClose | TabItem | Emitted when a tab's close (×) button is clicked. The tab is NOT removed automatically — remove it from tabs yourself. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/tabs

License

MIT