One library.
Every framework.
The designer toolkit for agentic work: 186 components with the same markup and the same sdf- classes in HTML + CSS, React, Vue, Svelte and Terminal, plus the audits and generators a web team reaches for every day.
Copy it into whatever you build with.
Every component is written once and copied five ways: HTML + CSS, React, Vue, Svelte, or a single block for Terminal. Pick a target in the library and every copy button follows it.
Live
HTML + CSS
Plain markup and a stylesheet. No build step and no dependencies — paste it into any framework or a bare page.
Live
React, Vue and Svelte
A typed .tsx with the same DOM and sdf- class names as every other build, and single-file .vue and .svelte components generated from the same source.
Live
Terminal
Markup and stylesheet as one block, shaped for the Terminal designer. Paste it into its code panel and the component lands as a section.
Paste a component. Keep the craft.
Real props, real variants, clean classes. Pick a target in the library, copy the source, and it is yours to change.
Tools that earn their keep.
Daily-use utilities every web team quietly needs — built into the same surface as the components, so you stop hunting through bookmarks.
Live
Data attributes
Searchable reference for every data-* attribute the components use. Click to copy, paste into your build.
Open reference →
Live
Contrast checker
Paste a foreground and a background — get the ratio, WCAG AA and AAA pass status, and a one-click brand-safe suggestion.
Check contrast →
Live
Site audit
Runs the SEO, accessibility, security-header, schema and build-quality audits against one URL at once, with a combined score and every failing check ranked worst-first.
Run audit →
Built on a few strong opinions.
Baselumen is intentionally narrow. Rather than be everything for everyone, it tries to be very good at the handful of things below.
No demo-ware
Every component here is one we'd ship to a paying client — no placeholder copy, no broken responsive states, no half-finished interactions.
Built to WCAG AA
Semantic markup, keyboard paths, visible focus states and AA contrast are part of how each component is built. Accessibility isn't a future release.
Real version control
Components carry version numbers and changelogs. If a class name changes, you'll know — and know exactly how to update.
Yours when you copy it
Once a component is in your project, it's yours. No license keys, no embed scripts, no “powered by” badges. Restyle and rebrand freely.
Variables everywhere
Every color, font, radius, and spacing step is a CSS custom property. Override at the root, a section, or a single instance — the cascade is the whole model.
Paste anywhere
Framework-free HTML and CSS. Drop it into Terminal, Astro, Next, or a plain page — the markup doesn't care what surrounds it.
Every change, written down.
Reverse chronological, dated from the commit that shipped it. When a class name changes, you know exactly how to update.
One suite, four apps. Each one hands its work to the next.
Let's build something.
Questions about the library, licensing, or a custom component? Send a note — we read every message and usually reply within a business day.
support@stacklumen.com
Response time
Within 1 business day
Based in
Lexington, KY
Ship better client sites, faster.
Free while Baselumen is in public alpha: sign in and every component, template and tool is open. After the alpha, Baselumen is included in every Stacklumen plan: Free includes the free component set, and Pro and Agency include everything. No newsletter, no sales calls — just copy, paste, and ship.