Strand Design Language

Open Source

STRAND

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

GitHub Get Started

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

Components 31

Input, display, layout, navigation, and feedback. Every interaction state. Keyboard accessible.

Runtime CSS 0

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

Accessibility AA

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

Bundle <50KB

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

Patterns

What are you building?

A form

FormField + Input + Button

A dashboard

Users 12,847

Revenue $94K

Grid + Card + DataReadout

Navigation

Breadcrumb + Tabs

User feedback

Changes saved successfully.

Connection lost. Retrying...

Alert + Toast

Content layout

New

Feature Update

Components now support reduced motion preferences.

Card + Tag + Stack + Button

Setup

Get running in three steps

Install

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

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.

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: Install preact and alias in your bundler. See framework setup.

Reference

Every component, rendered

Input

Button

Primary action trigger. 4 variants, 3 sizes, loading state.

Disabled

Prop	Type	Default
`variant`	"primary" \| "secondary" \| "ghost" \| "danger"	"primary"
`size`	"sm" \| "md" \| "lg"	"md"
`loading`	boolean	false
`iconOnly`	boolean	false
`fullWidth`	boolean	false
`disabled`	boolean	false

<Button variant="primary" size="md">Submit</Button>

Input

Single-line text entry. 5 types, leading/trailing addons, error state.

Prop	Type	Default
`type`	"text" \| "email" \| "password" \| "search" \| "number"	"text"
`error`	boolean	false
`leadingAddon`	ReactNode	-
`trailingAddon`	ReactNode	-
`disabled`	boolean	false

<Input type="email" placeholder="you@company.com" />

Textarea

Multi-line text entry. Auto-resize, character count, error state.

Prop	Type	Default
`autoResize`	boolean	false
`showCount`	boolean	false
`maxLength`	number	-
`error`	boolean	false

<Textarea autoResize placeholder="Message" />

Select

Option selection. Native select with custom styling and error state.

Prop	Type	Default
`options`	SelectOption[]	[]
`value`	string	-
`error`	boolean	false
`placeholder`	string	-

<Select options={items} onChange={handleChange} />

Checkbox

Binary toggle for multiple selections. Supports indeterminate state.

Unchecked Checked Mixed Disabled

Prop	Type	Default
`checked`	boolean	false
`indeterminate`	boolean	false
`label`	string	-
`disabled`	boolean	false

<Checkbox checked={value} onChange={fn} label="Accept terms" />

Radio

Single selection from a set. Group with shared name attribute.

Option A Option B Disabled

Prop	Type	Default
`checked`	boolean	false
`name`	string	-
`value`	string	-
`label`	string	-

<Radio name="plan" value="pro" label="Pro plan" />

Switch

Binary toggle for a single setting. On/off with inline label.

Off On Disabled

Prop	Type	Default
`checked`	boolean	false
`label`	string	-
`onChange`	(checked: boolean) => void	-

<Switch checked={enabled} onChange={setEnabled} label="Notifications" />

Slider

Range value selection with single thumb.

Prop	Type	Default
`min`	number	0
`max`	number	100
`step`	number	1
`value`	number	50

<Slider min={0} max={100} value={vol} onChange={setVol} />

FormField

Wraps any input with label, hint text, error message, and required indicator.

Full name

As it appears on your ID.

Email is required.

Prop	Type	Default
`label`	string	-
`hint`	string	-
`error`	string	-
`required`	boolean	false

<FormField label="Email" error={err} required>
  <Input type="email" />
</FormField>

Display

Card

Content container. Elevated, outlined, or interactive with hover lift.

Elevated

Outlined

Interactive (hover lifts)

Prop	Type	Default
`variant`	"elevated" \| "outlined" \| "interactive"	"elevated"
`padding`	"none" \| "sm" \| "md" \| "lg"	"md"

<Card variant="elevated" padding="lg">...</Card>

Badge

Status dot or count indicator. 5 status colors.

5 99+

Prop	Type	Default
`variant`	"dot" \| "count"	"dot"
`status`	"default" \| "teal" \| "blue" \| "amber" \| "red"	"default"
`count`	number	-

<Badge variant="count" status="red" count={notifications} />

Avatar

User or entity representation. Image, initials fallback. 4 sizes.

Prop	Type	Default
`src`	string	-
`initials`	string	-
`size`	"sm" \| "md" \| "lg" \| "xl"	"md"

<Avatar src="/photo.jpg" alt="Jane" size="lg" />

Tag

Categorization label. Solid or outlined, removable, 5 status colors.

Default Teal Blue Amber Red Remove

Prop	Type	Default
`variant`	"solid" \| "outlined"	"solid"
`status`	"default" \| "teal" \| "blue" \| "amber" \| "red"	"default"
`removable`	boolean	false

<Tag status="blue" removable onRemove={fn}>React</Tag>

Table

Tabular data display. Sortable headers, responsive horizontal scroll.

Name	Role	Status
Jane Smith	Engineer	Active
Alex Chen	Designer	Away

Prop	Type	Default
`columns`	TableColumn[]	-
`data`	T[]	-
`onSort`	(key, direction) => void	-

<Table columns={cols} data={rows} onSort={handleSort} />

DataReadout

Monospace instrument readout. Overline label + large value display.

Active Users 12,847

Uptime 99.97%

Latency 12ms

Prop	Type	Default
`label`	string	-
`value`	string \| number	-

<DataReadout label="Revenue" value="$94,200" />

Layout

Stack

Flex layout primitive. Vertical or horizontal stacking with gap control.

Prop	Type	Default
`direction`	"vertical" \| "horizontal"	"vertical"
`gap`	number	0
`align`	"start" \| "center" \| "end" \| "stretch"	"stretch"
`wrap`	boolean	false

<Stack direction="horizontal" gap={4} align="center">...</Stack>

Grid

CSS grid layout primitive. Column count and gap control.

Prop	Type	Default
`columns`	number	1
`gap`	number	0

<Grid columns={3} gap={6}>...</Grid>

Container

Width constraint. 4 tiers: narrow (640px), default (768px), wide (1024px), full (1280px).

							full 1280wide 1024default 768narrow 640
						

Prop	Type	Default
`size`	"narrow" \| "default" \| "wide" \| "full"	"default"

<Container size="wide">...</Container>

Divider

Visual separator. Horizontal or vertical, with optional label.

Prop	Type	Default
`direction`	"horizontal" \| "vertical"	"horizontal"
`label`	string	-

<Divider label="or" />

Section

Page section with consistent padding rhythm. Standard or hero variant.

Standard

Hero

Prop	Type	Default
`variant`	"standard" \| "hero"	"standard"
`background`	"primary" \| "elevated" \| "recessed"	"primary"

<Section variant="hero" background="elevated">...</Section>

Navigation

Link

Inline navigation with underline-grow-from-left hover animation.

Internal link External link

Prop	Type	Default
`href`	string	-
`external`	boolean	false

<Link href="/about">About us</Link>

Tabs

Content switching. Full WAI-ARIA tabs with keyboard arrow navigation.

Prop	Type	Default
`tabs`	TabItem[]	-
`activeTab`	string	-
`onChange`	(id: string) => void	-

<Tabs tabs={items} activeTab={current} onChange={setTab} />

Breadcrumb

Hierarchical location indicator with custom separator.

Prop	Type	Default
`items`	BreadcrumbItem[]	-
`separator`	string	"/"

<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Page" }]} />

Nav

Site or app navigation bar. Responsive hamburger collapse on mobile.

Prop	Type	Default
`logo`	ReactNode	-
`items`	NavItem[]	-
`actions`	ReactNode	-

<Nav logo={<Logo />} items={navItems}>
  <Button size="sm">Sign In</Button>
</Nav>

Feedback

Toast

Transient notification. 4 statuses. Auto-dismiss. Use with ToastProvider + useToast().

Info: New version available.

Success: Profile saved.

Warning: Low storage.

Error: Save failed.

Prop	Type	Default
`status`	"info" \| "success" \| "warning" \| "error"	"info"
`message`	string	-
`duration`	number (ms)	5000

const { toast } = useToast();
toast({ message: "Saved!", status: "success" });

Alert

Persistent inline notification. 4 statuses, optional dismiss.

Tip: You can sort columns by clicking the header.

Changes saved successfully.

Your session expires in 5 minutes.

Failed to load data. Try again.

Prop	Type	Default
`status`	"info" \| "success" \| "warning" \| "error"	"info"
`dismissible`	boolean	false
`onDismiss`	() => void	-

<Alert status="success" dismissible onDismiss={fn}>Saved!</Alert>

Dialog

Modal overlay. Focus trap, escape-to-close, portal rendering, scroll lock.

Prop	Type	Default
`open`	boolean	false
`onClose`	() => void	-
`title`	string	-
`closeOnEscape`	boolean	true

<Dialog open={show} onClose={close} title="Confirm">
  Are you sure?
</Dialog>

Tooltip

Contextual hint on hover/focus. 4 positions, configurable delay.

Prop	Type	Default
`content`	string	-
`position`	"top" \| "right" \| "bottom" \| "left"	"top"
`delay`	number (ms)	200

<Tooltip content="More info" position="top">
  <Button>Hover me</Button>
</Tooltip>

Progress

Completion indicator. Bar or ring variant, determinate or indeterminate.

Prop	Type	Default
`variant`	"bar" \| "ring"	"bar"
`value`	number (0-100)	- (indeterminate)
`size`	"sm" \| "md" \| "lg"	"md"

<Progress variant="ring" value={75} />

Spinner

Loading indicator. Thin ring animation with screen reader text.

Loading Loading Loading

Prop	Type	Default
`size`	"sm" \| "md" \| "lg"	"md"

<Spinner size="md" />

Skeleton

Content placeholder with shimmer animation. Text, rectangle, or circle.

Prop	Type	Default
`variant`	"text" \| "rectangle" \| "circle"	"text"
`width`	string	"100%"
`height`	string	"1em"

<Skeleton variant="text" width="200px" />
<Skeleton variant="circle" width="40px" height="40px" />

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

Strand Design Language

Install

Features

What are you building?

Get running in three steps

Install

Import CSS

Use

Every component, rendered

Input

Button

Input

Textarea

Select

Checkbox

Radio

Switch

Slider

FormField

Display

Card

Badge

Avatar

Tag

Table

DataReadout

Layout

Stack

Grid

Container

Divider

Section

Navigation

Link

Tabs

Breadcrumb

Nav

Feedback

Toast

Alert

Dialog

Tooltip

Progress

Spinner

Skeleton

The Right Person. The Right Role.