Logo

Tabs

Composable tab panels with list, trigger, content, variants, icons, vertical layout, RTL, and router-link support.

Preview

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

Usage

TS 

import { FrTabsModule } from '@frame-ui-ng/components/tabs';

HTML 

<div frTabs defaultValue="account">
  <div frTabsList>
    <button frTabsTrigger value="account">Account</button>
    <button frTabsTrigger value="security">Security</button>
  </div>

  <div frTabsContent value="account">
    Manage account details.
  </div>

  <div frTabsContent value="security">
    Review security settings.
  </div>
</div>

Examples

Basic

Use tabs to switch between closely related panels without navigating away from the current surface.

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

Line

Use the line variant when tabs should feel more like page sections than segmented controls.

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

Vertical

Set orientation to vertical for settings pages or side-by-side editor panels.

Profile

Adjust display name, avatar, and workspace identity from one panel.

Disabled

Disable triggers when a panel is unavailable because of permissions, setup, or plan limits.

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

Icons

Project icons into triggers when the labels benefit from quick visual scanning.

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

Controlled

Bind value and valueChange when parent state should own the selected tab.

Current tab: overview

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

RTL

Tabs use logical spacing, so trigger order and line indicators follow right-to-left documents.

نظرة عامة

تتبع علامات التبويب اتجاه الصفحة وتستخدم خصائص منطقية للتباعد.

Custom Styling

Override tabs tokens on the root or an ancestor to tune list surface, trigger shape, active treatment, line variant, and content spacing.

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

Token Inspector

Hover the root, list, triggers, or content to inspect the tokens that control tabs spacing, surfaces, active state, focus ring, and content rhythm.

Workspace overview

See current work, recent changes, and small signals that help a team orient quickly.

Design Tokens

Use these CSS custom properties to tune root spacing, list surface, trigger shape, active states, line variant, focus ring, and content padding.

SCSS 

--frame-tabs-gap: 1rem;
--frame-tabs-list-gap: 0.25rem;
--frame-tabs-list-padding: 0.25rem;
--frame-tabs-list-bg: var(--frame-muted, #f4f4f5);
--frame-tabs-list-border: transparent;
--frame-tabs-list-radius: var(--frame-radius-lg, 0.75rem);
--frame-tabs-trigger-height: 2.25rem;
--frame-tabs-trigger-padding-x: 0.875rem;
--frame-tabs-trigger-radius: var(--frame-radius-md, 0.5rem);
--frame-tabs-trigger-bg: transparent;
--frame-tabs-trigger-color: var(--frame-muted-foreground, #71717a);
--frame-tabs-trigger-hover-bg: color-mix(in srgb, var(--frame-background, #fff) 62%, transparent);
--frame-tabs-trigger-hover-color: var(--frame-foreground, #09090b);
--frame-tabs-trigger-active-bg: var(--frame-background, #fff);
--frame-tabs-trigger-active-color: var(--frame-foreground, #09090b);
--frame-tabs-trigger-active-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
--frame-tabs-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring, #18181b) 28%, transparent);
--frame-tabs-trigger-disabled-opacity: 0.5;
--frame-tabs-line-color: var(--frame-border, #e5e7eb);
--frame-tabs-line-active-color: var(--frame-primary, #18181b);
--frame-tabs-content-padding: 1rem 0 0;