Brand components
Mode switcher
a tint-2 band asking what brings you to the paper, with two large tabs (solid ink when selected) synced to the URL hash; controlled or uncontrolled.
Preview
What brings you to the paper?
The CV, recent work and how a project runs from brief to release.
Install
bash
npx shadcn add @eloquent/mode-switcherUsage
tsx
import { ModeSwitcher } from "@/components/ui/mode-switcher";
<ModeSwitcher
headlineLead="What brings you"
headlineTail="to the paper?"
label="Choose a path"
modes={[
{ value: "hiring", label: "Hiring for a role?", sublabel: "See the CV and recent work", panel: <p>…</p> },
{ value: "services", label: "Need something built?", sublabel: "Briefs, scope and how we work" },
]}
/>It is a client component. Pass value and onValueChange from your own client component for controlled use; defaultValue for uncontrolled use. Set hashSync={false} to leave the URL alone.
States
Controlled · selected: services
What brings you to the paper?
Scoped builds for web products, with a written brief and regular releases.
Uncontrolled · defaultValue services · no panels
What brings you to the paper?
| State | Treatment |
|---|---|
| Selected tab | Solid ink fill, paper text, aria-selected="true", between two ink rules |
| Unselected tab | Ink text on the tint-2 band |
| Focus | 2px ink outline, 2px offset |
| Press | Ink fill |
| Hover | None |
URL hash
The value is the hash: #hiring or #services. The page loads on the default mode and applies the hash right after hydration, so server and client markup match. A change uses history.replaceState, so it neither scrolls nor adds a history entry, and it fires hashchange so the language switch keeps the hash.
Keyboard
| Key | Action |
|---|---|
| Tab | Moves to the selected tab, then to the open panel |
| Left / Right | Moves to the other tab and selects it |
| Home / End | First / last tab |
| Enter / Space | Selects the focused tab |
Vietnamese
Điều gì đưa bạn đến với tờ báo?
CV, các dự án gần đây và cách một dự án đi từ yêu cầu đến khi phát hành.
Ink adaptation
Brand item with no upstream, built on Tabs (the big variant). A tint-2 band replaces a card; the selected tab is a solid ink fill, never a hue.