SDF Topics
Documentation topic browser with a three-up grid of hover-lift cards showing icon, count, title, and description.
Six areas. Forty-plus guides.
Getting started
Install, configure, and ship your first SDF page in ten minutes flat.
Tokens · Theming
Override CSS variables to re-skin every component without touching the source.
Components
Every component, every variant, with copy-paste recipes for common use cases.
Layout primitives
Stacks, grids, and container patterns that compose into every page in the library.
Migrating
Move from Tailwind, Bootstrap, or hand-rolled CSS into SDF without rewriting the world.
Recipes
Real-world implementation patterns: dark mode, RTL, motion, and accessibility.
The full source is for members
Sign in and choose a plan to view and copy BaselumenTopics.tsx. The live preview above is free to explore.
How to use. Copy BaselumenTopics.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.
