SDF Tabs
An underlined tab interface with an animated active indicator and full keyboard/ARIA support.
How it works
Baselumen ships framework-free components you can paste into any project. Each one is class-namespaced, dependency-free, and themed entirely through CSS custom properties.
The full source is for members
Sign in and choose a plan to view and copy SdfTabs.tsx. The live preview above is free to explore.
How to use. Copy SdfTabs.tsx into your project (it's self-contained — the styles ship with it and dedupe across instances in React 19). Theme it by setting --sdf-* tokens on any ancestor. No dependencies, no build step.
