@dillingerstaffing/strand-ui

Preact/React component library built on the Strand Design Language. 34 components. Zero-runtime CSS. WCAG 2.2 AA.

Install

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

Import CSS in your app entry point:

@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';

Use components:

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

function App() {
  return (
    <Card variant="elevated" padding="lg">
      <Stack gap={4}>
        <Input placeholder="Enter your email" />
        <Button>Get Started</Button>
      </Stack>
    </Card>
  );
}

Also Available

• Vue 3: @dillingerstaffing/strand-vue
• Svelte: @dillingerstaffing/strand-svelte
• CSS Only: Use classes directly per html-reference.md

Links

• GitHub
• Design Language
• Documentation

Created by Dillinger Staffing