Minimal Selectors
Editorial and typographic selector system with 7 patterns — editorial slash links, monospace strip, dot trail pager, number sequence selector, thin serif tab row, dot separator inline, and arrow step control. Pure typographic aesthetics with zero decoration.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for editorial magazines, light for clean blog interfaces. |
| compact | boolean | false | Hides the Typography-Led section and reduces padding. |
When to Use
Perfect for editorial platforms, portfolio sites, blogs, and any interface where typography IS the design. Use when decorative UI elements would compete with content.
Best Practices
Pair serif tabs and editorial slash links with editorial or sans-serif body fonts for maximum typographic contrast. The Dot Trail and Arrow Step work well for multi-step onboarding.
Why This Component Matters
Minimal selectors prove that interaction does not require decoration. When used intentionally, the absence of UI chrome lets content breathe and communicates editorial maturity.
FAQ
QDo the Serif Tabs use web fonts?
They use the browser's default font-serif stack (Georgia/Times). For a custom serif, add a Google Font or local font to your font-family.
QHow does the Dot Trail expand?
The active dot uses a CSS width transition from 6px to 20px — a classic pill-stretch pattern that communicates direction and position simultaneously.
QCan Arrow Step Control replace a stepper component?
Yes — for linear onboarding flows it replaces a traditional stepper with a minimal progress bar + prev/next control. Add actual step content below the component.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.