A production component library·Now in private beta
stable Content

SDF Quickstart

Sticky aside beside a numbered list of install steps, each with a code block and note.

Sign in to copy
Quickstart

From zero to first page in three steps.

No framework required. The CDN build works in any HTML file. The npm build works in any modern stack.

  1. 01

    Install or link the library.

    npm install @sdf/core

    Prefer no build step? Use the CDN: https://cdn.sdf.dev/v3/core.css

  2. 02

    Drop a component into your markup.

    <section class="sdf-hero">
  <h1 class="sdf-hero__title">Hello, world.</h1>
</section>

    Every component is plain HTML + BEM classes. No JSX, no compilation.

  3. 03

    Theme it with CSS variables.

    :root {
  --sdf-accent: #005fff;
  --sdf-radius: 4px;
}

    Six tokens reskin the whole library. The rest is incremental.

BaselumenQuickstart.tsx 64 lines · TypeScript

The full source is for members

Sign in and choose a plan to view and copy BaselumenQuickstart.tsx. The live preview above is free to explore.

Sign in

How to use. Copy BaselumenQuickstart.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.

All React components
A Stacklumen Product