Command line

The library, one command away.

The Baselumen CLI pulls any component into your project from the terminal — the same SDF build you see on the site, dropped in as self-contained code. No package to depend on at runtime, no build step, no lock-in.

zsh — baselumen

~/app npx @baselumen/cli add cta

✓ Resolved sdf-cta from the Baselumen library

✓ Wrote components/SdfCta.tsx (self-contained · 1 file)

✓ No dependencies added

Done in 0.4s — paste <SdfCta /> and ship.

~/app ▋

Browse components Read the docs

Every command you'll reach for

A small, predictable surface. Run it with npx, or install it globally with npm i -g @baselumen/cli.

add

Add a component

Drops a self-contained component into your project — markup + scoped CSS, or a single TSX file. No dependencies, no config.

npx @baselumen/cli add cta

list

List the library

Prints every component in the library (165 and counting), grouped by category, with status and a one-line description.

npx @baselumen/cli list

Search

Fuzzy-match by name, category, or description to find the component you need without leaving the terminal.

npx @baselumen/cli search pricing

add --target

Pick a surface

Choose how it lands — webflow (HTML embed) or react (TSX). Same SDF build, your framework of choice.

npx @baselumen/cli add hero --target react

init

Set up tokens

Scaffolds an sdf-tokens.css with the design tokens so every component you add inherits your brand.

npx @baselumen/cli init

diff

Stay in sync

Shows what changed upstream against your local copy, so you can pull fixes without clobbering your edits.

npx @baselumen/cli diff cta

How it works

One source of truth

The CLI reads the same registry that powers this site. What you preview here is exactly what lands in your repo — no drift between docs and code.

Self-contained output

Each component ships its own scoped sdf- styles. Files are copied into your project — you own them, edit them, and they never break on a dependency bump.

Themed by tokens

Set --sdf-* custom properties once and every component you add inherits your brand — color, radius, and type — through the cascade.

Beta

In active development

The library is already CLI-ready — every component on this site is addressable by id. The published @baselumen/cli package is rolling out with the Webflow Marketplace launch. Want early access? Tell us what you're building.