@vibe-labs/design-components-tabs

Tabs component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-tabs";

import { TabsVariants } from "@vibe-labs/design-components-tabs/types";
import type { TabsStyleProps, TabStyleProps } from "@vibe-labs/design-components-tabs/types";

Contents

Tokens (tabs.css)

CSS custom properties defined in @layer vibe.tokens:

Tab List

Token	Default
--tabs-border-color	--border-subtle
--tabs-border-width	--border-width-1
--tabs-gap	0

Tab Item

Token	Default	Description
--tab-height	2.5rem	Tab height
--tab-px	--space-4	Horizontal padding
--tab-font-size	--text-sm	Font size
--tab-font-weight	400	Default weight
--tab-color	--text-secondary	Default text color
--tab-hover-color	--text-primary	Hover text color
--tab-hover-bg	--surface-hover-overlay	Hover background
--tab-active-color	--text-primary	Active text color
--tab-active-font-weight	--font-semibold	Active weight

Indicator

Token	Default
--tab-indicator-height	2px
--tab-indicator-color	--color-accent
--tab-indicator-radius	--radius-full

Pill Variant

Token	Default
--tab-pill-radius	--radius-full
--tab-pill-bg	transparent
--tab-pill-active-bg	--surface-elevated
--tab-pill-active-shadow	--shadow-xs

Panel

Token	Default
--tab-panel-padding	--space-4

Generated Styles (tabs.g.css)

Component classes generated into @layer vibe.components.

Tab List

Flex row with bottom border. Active tab indicator sits precisely on the border via negative offset.

Modifiers

• scrollable — horizontal overflow scroll with hidden scrollbars
• full — tabs stretch evenly with flex: 1

Tab Item

Interactive inline-flex button with hover/focus/disabled states. aria-selected="true" activates the accent underline indicator via ::after.

Tab Slots

• tab-icon — leading icon (accent-colored when selected)
• tab-badge — trailing muted badge

Pill Variant

Completely swaps visual model: no bottom border, contained background with rounded corners, elevated surface + shadow on active tab, indicator hidden.

Tab Panel

Content area with padding. Supports [hidden] attribute for inactive panels.

TypeScript Types (types/)

TabsVariants // ["pill"]
type TabsVariant

interface TabsStyleProps { variant?: TabsVariant; scrollable?: boolean; full?: boolean }
interface TabStyleProps { disabled?: boolean }
interface TabIconStyleProps {}
interface TabBadgeStyleProps {}
interface TabPanelStyleProps {}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
tabs.css	Token definitions
tabs.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, borders, spacing, typography, transitions, elevation).

Build

npm run build