Tabs

Segmented navigation. Built from two Figma components in sequence: the Tab Item (Active, Default, Hover states) and the Tabs container that groups them. All values pulled directly from the LUSTER Figma variables.

Home

State (Variant)

Figma Properties
State: Active
Background: #6741D9
Text / Icon: #F2EDFF
Padding: 8px 12px · Gap: 8px
Font: Inter 400 / 16px

Component · Tab Item (Variants)

A single tab pill with a label and chevron. Three states: Active (filled purple), Default (grey), Hover (grey with purple text).

Home

Active

Home

Default

Home

Hover

Component · Tabs

A row of Tab Items grouped in the Tabs container. Click a tab to make it active.

Home

Profile

Messages

Design Tokens

Token names mirror the LUSTER Figma variable paths one-to-one. Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

Token Name	Figma Variable	Default Value
--tabsItemActiveBgColor	tabs/Item/active/bg/color	#6741D9
--tabsItemActiveTitleFontColor	tabs/Item/active/title/font/color	#F2EDFF
--tabsItemActiveIconColor	tabs/Item/active/icon/color	#F2EDFF
--tabsItemDefaultBgColor	tabs/Item/default/bg/color	#ACADB2
--tabsItemDefaultTitleFontColor	tabs/Item/default/title/font/color	#24242C
--tabsItemDefaultIconColor	tabs/Item/default/icon/color	#24242C
--tabsItemHoverBgColor	tabs/Item/hover/bg/color	#ACADB2
--tabsItemHoverTitleFontColor	tabs/Item/hover/title/font/color	#794DFF
--tabsItemHoverIconColor	tabs/Item/hover/icon/color	#794DFF
--tabsBgColor	tabs/bg/color	#ACADB2
--tabsBorderRadius	tabs/border/radius	0px
--tabsItemsBorderRadius	tabs/Items/border/radius	0px
--tabGap	tab/gap	8px
--tabPaddingX	tab/padding/x	12px
--tabPaddingY	tab/padding/y	8px
--tabItemsGap	tab/items/gap	20px
--tabItemsPaddingX	tab/items/padding/x	4px
--tabItemsPaddingY	tab/items/padding/y	4px
--bodyFontSize	typography/body/font/size	16px
--bodyFontLineHeight	typography/body/font/lineHeight	19px
--bodyFontWeight	typography/body/font/weight	400
--bodyFontFamily	body/font/family	Inter

Usage Guidelines

✓ DO

Keep exactly one tab Active at a time within a Tabs group.

✓ DO

Use short, parallel labels so tabs read as a set.

✗ DON'T

Don't use Tabs for unrelated destinations — use the Navbar.

✗ DON'T

Don't exceed ~5 tabs — consider a dropdown for overflow.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import './Tabs.css';

export const Tabs = ({ items, value, onChange }) => (
  <div className="tabs" role="tablist">
    {items.map(it => (
      <button
        key={it.value}
        role="tab"
        aria-selected={value === it.value}
        className={`tab-item ${value === it.value ? 'active' : 'default'}`}
        onClick={() => onChange(it.value)}
      >
        {it.label}{it.hasMenu && <ChevronDown/>}
      </button>
    ))}
  </div>
);

/* Tabs tokens — Diamond brand, Light mode */
:root {
  /* tabs container */
  --tabsBgColor: #ACADB2; --tabsBorderRadius: 0px; --tabsItemsBorderRadius: 0px;
  --tabItemsGap: 20px; --tabItemsPaddingX: 4px; --tabItemsPaddingY: 4px;
  /* tab item — Component Brand */
  --tabsItemActiveBgColor: #6741D9;   --tabsItemActiveTitleFontColor: #F2EDFF;  --tabsItemActiveIconColor: #F2EDFF;
  --tabsItemDefaultBgColor: #ACADB2;  --tabsItemDefaultTitleFontColor: #24242C; --tabsItemDefaultIconColor: #24242C;
  --tabsItemHoverBgColor: #ACADB2;    --tabsItemHoverTitleFontColor: #794DFF;   --tabsItemHoverIconColor: #794DFF;
  /* tab item — Density */
  --tabGap: 8px; --tabPaddingX: 12px; --tabPaddingY: 8px;
  /* Typography */
  --bodyFontFamily: 'Inter', sans-serif; --bodyFontSize: 16px; --bodyFontLineHeight: 19px; --bodyFontWeight: 400;
}

.tabs {
  display: inline-flex; gap: var(--tabItemsGap);
  background: var(--tabsBgColor);
  padding: var(--tabItemsPaddingY) var(--tabItemsPaddingX);
  border-radius: var(--tabsBorderRadius);
}
.tab-item {
  display: inline-flex; align-items: center; gap: var(--tabGap);
  padding: var(--tabPaddingY) var(--tabPaddingX);
  border-radius: var(--tabsItemsBorderRadius); border: none;
  font-family: var(--bodyFontFamily); font-weight: var(--bodyFontWeight); font-size: var(--bodyFontSize); line-height: var(--bodyFontLineHeight);
  cursor: pointer; background: var(--tabsItemDefaultBgColor);
  color: var(--tabsItemDefaultTitleFontColor); transition: all 0.15s ease;
}
.tab-item:hover { background: var(--tabsItemHoverBgColor); color: var(--tabsItemHoverTitleFontColor); }
.tab-item.active { background: var(--tabsItemActiveBgColor); color: var(--tabsItemActiveTitleFontColor); }

<div class="tabs" role="tablist">
  <button class="tab-item" role="tab">Home</button>
  <button class="tab-item active" role="tab" aria-selected="true">Profile</button>
  <button class="tab-item" role="tab">Messages</button>
</div>

import { useState } from 'react';
import { Tabs } from '@luster/ui';

export default function Profile() {
  const [tab, setTab] = useState('profile');
  return (
    <Tabs
      value={tab} onChange={setTab}
      items={[
        { value: 'home', label: 'Home' },
        { value: 'profile', label: 'Profile' },
        { value: 'messages', label: 'Messages' },
      ]}
    />
  );
}