@vibe-labs/design-components-tabs

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

Installation

@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

---

Usage Guide

Import

@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";

Variants

Attribute / Flag	Values	Notes
data-variant	pill	Pill style (no underline, elevated active)
data-scrollable	boolean flag	Horizontal scroll with hidden scrollbar
data-full	boolean flag	Tabs stretch evenly (flex: 1)
aria-selected	true on tab	Activates accent underline indicator
disabled	on tab	Reduced opacity, pointer-events: none

Examples

Basic tabs with panels

<div class="tabs" role="tablist">
  <button class="tab" role="tab" aria-selected="true" aria-controls="panel-overview">Overview</button>
  <button class="tab" role="tab" aria-selected="false" aria-controls="panel-details">Details</button>
  <button class="tab" role="tab" aria-selected="false" aria-controls="panel-history">History</button>
</div>

<div class="tab-panel" id="panel-overview" role="tabpanel">Overview content</div>
<div class="tab-panel" id="panel-details" role="tabpanel" hidden>Details content</div>
<div class="tab-panel" id="panel-history" role="tabpanel" hidden>History content</div>

Tabs with icons and badges

<div class="tabs" role="tablist">
  <button class="tab" role="tab" aria-selected="true">
    <svg class="tab-icon" aria-hidden="true"><!-- icon --></svg>
    Inbox
    <span class="tab-badge">12</span>
  </button>
  <button class="tab" role="tab" aria-selected="false">
    <svg class="tab-icon" aria-hidden="true"><!-- icon --></svg>
    Sent
  </button>
  <button class="tab" role="tab" aria-selected="false" disabled>
    <svg class="tab-icon" aria-hidden="true"><!-- icon --></svg>
    Archived
  </button>
</div>

Pill variant

<div class="tabs" data-variant="pill" role="tablist">
  <button class="tab" role="tab" aria-selected="true">Monthly</button>
  <button class="tab" role="tab" aria-selected="false">Quarterly</button>
  <button class="tab" role="tab" aria-selected="false">Yearly</button>
</div>

Full-width tabs

<div class="tabs" data-full role="tablist">
  <button class="tab" role="tab" aria-selected="true">Tab One</button>
  <button class="tab" role="tab" aria-selected="false">Tab Two</button>
  <button class="tab" role="tab" aria-selected="false">Tab Three</button>
</div>

Scrollable tabs (many items)

<div class="tabs" data-scrollable role="tablist">
  <button class="tab" role="tab" aria-selected="true">January</button>
  <button class="tab" role="tab" aria-selected="false">February</button>
  <button class="tab" role="tab" aria-selected="false">March</button>
  <button class="tab" role="tab" aria-selected="false">April</button>
  <button class="tab" role="tab" aria-selected="false">May</button>
  <button class="tab" role="tab" aria-selected="false">June</button>
</div>

With Vue

<template>
  <div class="tabs" :data-variant="variant || undefined" :data-full="full || undefined" role="tablist">
    <button
      v-for="tab in tabs"
      :key="tab.id"
      class="tab"
      role="tab"
      :aria-selected="activeTab === tab.id"
      :disabled="tab.disabled"
      @click="activeTab = tab.id"
    >
      <component v-if="tab.icon" :is="tab.icon" class="tab-icon" />
      {{ tab.label }}
      <span v-if="tab.badge" class="tab-badge">{{ tab.badge }}</span>
    </button>
  </div>
  <div v-for="tab in tabs" :key="tab.id" class="tab-panel" :hidden="activeTab !== tab.id" role="tabpanel">
    <component :is="tab.panel" />
  </div>
</template>