Components
Tab switcher
Two-tab toggle. Dots expand to icons on hover, or always-on text pills.
A two-tab control ported from Atlas. The icon variant collapses to dots and
expands on hover; labels live in a Tooltip. The label variant is always-on
pills. The well is bg-surface-sunken with one border-stroke. Active lifts onto
bg-surface-raised with shadow-sm (same as Tabs). Expects exactly two tabs.
Icon — hover to expand.
Icon — list / grid.
Label — always-on pills.
Usage
import { Moon, Sun } from '@phosphor-icons/react';
import { TabSwitcher } from '@/components/ui/tab-switcher';
<TabSwitcher
tabs={[
{ id: 'light', label: 'Light mode', icon: Sun, isActive: true },
{ id: 'dark', label: 'Dark mode', icon: Moon },
]}
onTabChange={setId}
/>Install
shadcn add @gesso/tab-switcher