Northwind Bento
Bento-style grid of tiled feature cards highlighting the product's core capabilities.
The SDF system
One system. Every surface.
Design once and ship to code, Webflow, and Figma from a single source of truth — no drift, no rebuilds.
Accessible
WCAG AA out of the box
Themeable
Re-skin with CSS variables
Fast
Zero runtime, zero deps
Documented
Ships with full documentation
Every component includes an anatomy doc, a prop reference, and copy-paste recipes for each variant.
The full source is for members
Sign in and choose a plan to view and copy northwind-bento.tsx. The live preview above is free to explore.
How to use. Copy northwind-bento.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.
