JLDSOwn your components.

A light-first, deep-emerald design system (dark theme opt-in). Copy the components you need into your project and build a clean, coherent interface without starting from scratch.

Get Started

View on GitHub

Own your code

Components are copied into your project as plain source files — no npm package, no version lock-in. Read it, edit it, ship it.

React & Vue

jlds init auto-detects your framework (including Next.js and Nuxt) and scaffolds jlds.json accordingly.

No Tailwind required

Every component ships self-contained .jl-* CSS classes built on CSS variable design tokens — Tailwind is optional.

HTML too

Skip the CLI entirely — link css/index.css and css/.css from jsDelivr and use the same classes directly.

Responsive by default

Resize the window and watch it adapt — columns collapse, buttons stretch full-width, and dialogs rise from the bottom as sheets on small screens. Same components, nothing extra to wire up.

See how it adapts

Dark theme built in

A calm, off-white canvas to start, with a full dark theme one attribute away. Flip data-theme="dark" and every component follows along — no extra setup, no flash of the wrong colors.

Theming guide