Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Composable tab panels with list, trigger, content, variants, icons, vertical layout, RTL, and router-link support.
See current work, recent changes, and small signals that help a team orient quickly.
Three reviews were completed and one release note is waiting for approval.
Capture lightweight context without sending users away from the current surface.
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>Use tabs to switch between closely related panels without navigating away from the current surface.
See current work, recent changes, and small signals that help a team orient quickly.
Three reviews were completed and one release note is waiting for approval.
Capture lightweight context without sending users away from the current surface.
Use the line variant when tabs should feel more like page sections than segmented controls.
See current work, recent changes, and small signals that help a team orient quickly.
Three reviews were completed and one release note is waiting for approval.
Capture lightweight context without sending users away from the current surface.
Set orientation to vertical for settings pages or side-by-side editor panels.
Adjust display name, avatar, and workspace identity from one panel.
Review sessions, passkeys, and recovery methods.
Manage invoices, seats, and plan limits.
Disable triggers when a panel is unavailable because of permissions, setup, or plan limits.
See current work, recent changes, and small signals that help a team orient quickly.
Project icons into triggers when the labels benefit from quick visual scanning.
See current work, recent changes, and small signals that help a team orient quickly.
Switch between live output and implementation details without changing layout.
Bind value and valueChange when parent state should own the selected tab.
See current work, recent changes, and small signals that help a team orient quickly.
Three reviews were completed and one release note is waiting for approval.
Use anchor triggers with routerLink and routerLinkActive for route-backed tabs. Bind the active input to routerLinkActive when you need ARIA/data-active state too.
Tabs use logical spacing, so trigger order and line indicators follow right-to-left documents.
تتبع علامات التبويب اتجاه الصفحة وتستخدم خصائص منطقية للتباعد.
Override tabs tokens on the root or an ancestor to tune list surface, trigger shape, active treatment, line variant, and content spacing.
See current work, recent changes, and small signals that help a team orient quickly.
Hover the root, list, triggers, or content to inspect the tokens that control tabs spacing, surfaces, active state, focus ring, and content rhythm.
See current work, recent changes, and small signals that help a team orient quickly.
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);
--frame-tabs-list-border: transparent;
--frame-tabs-list-radius: var(--frame-radius-lg);
--frame-tabs-trigger-height: 2.25rem;
--frame-tabs-trigger-padding-x: 0.875rem;
--frame-tabs-trigger-radius: var(--frame-radius-md);
--frame-tabs-trigger-bg: transparent;
--frame-tabs-trigger-color: var(--frame-muted-foreground);
--frame-tabs-trigger-hover-bg: color-mix(in srgb, var(--frame-background) 62%, transparent);
--frame-tabs-trigger-hover-color: var(--frame-foreground);
--frame-tabs-trigger-active-bg: var(--frame-background);
--frame-tabs-trigger-active-color: var(--frame-foreground);
--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) 28%, transparent);
--frame-tabs-trigger-disabled-opacity: 0.5;
--frame-tabs-line-color: var(--frame-border);
--frame-tabs-line-active-color: var(--frame-primary);
--frame-tabs-content-padding: 1rem 0 0;