Strand Design Language

Open Source
STRAND

Design tokens + UI components. Zero-runtime CSS. Ship faster.

GitHub Get Started
Showcases

Built with Strand

Agent Dashboard

A fleet operations dashboard for autonomous agents, built entirely from Strand primitives with zero custom CSS.

22 components 0 custom CSS WCAG 2.2 AA
View Live
Agents 6
Error Rate 0.3%
Throughput 847/hr
Cost Today $12.40
ONLINE IDLE ERROR

Install

npm install @dillingerstaffing/strand @dillingerstaffing/strand-ui

Or run npx strand-ui init to auto-detect your framework. CDN also available.

Features

Components 47

Input, display, layout, navigation, feedback, surface, and animation. Every interaction state.

Runtime CSS 0

All tokens are CSS custom properties. No ThemeProvider. No CSS-in-JS. No runtime cost.

Accessibility AA

WCAG 2.2 AA. Every color pairing passes contrast. WAI-ARIA compliant. Reduced motion.

Bundle 47KB

Total gzipped. Static CSS. Tree-shakeable. Framework-agnostic tokens.

Setup

Get running in three steps

1

Install

npm install @dillingerstaffing/strand @dillingerstaffing/strand-ui
2

Import CSS

@import '@dillingerstaffing/strand/css/reset.css';
@import '@dillingerstaffing/strand/css/tokens.css';
@import '@dillingerstaffing/strand/css/base.css';
@import '@dillingerstaffing/strand-ui/css/strand-ui.css';

Components are unstyled without these imports.

3

Use

import { Button, Card, Stack } from '@dillingerstaffing/strand-ui';

<Card variant="elevated">
  <Stack gap={4}>
    <Button>Get Started</Button>
  </Stack>
</Card>

Preact: Works natively, no configuration needed.

React: Alias preact in your bundler; see framework setup.

Vue 3: Use strand-vue; components register as native Vue SFCs.

Svelte: Use strand-svelte; components register as native Svelte components.

CSS Only: Use classes directly per HTML Reference.

Bulma: Load the Strand Bulma theme for visual cohesion.

AI Agents

Building with an AI coding agent? Point it here.

AGENTS.md llms.txt

Strand component reference

The Right Person. The Right Role.

Matches that last, by understanding what actually matters about a role, a team, and a person.

Start Your Profile Need to hire? Describe your role