@dillingerstaffing/strand-vue

Vue 3 component library built on the Strand Design Language. 31 components. Zero-runtime CSS. WCAG 2.2 AA.

Quick Start

npm install @dillingerstaffing/strand @dillingerstaffing/strand-vue

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-vue/css/strand-ui.css';

Use components:

<script setup>
import { Button, Card, Stack, Input } from '@dillingerstaffing/strand-vue'
</script>

<template>
  <Card variant="elevated" padding="lg">
    <Stack :gap="4">
      <Input placeholder="Enter your email" />
      <Button variant="primary">Get Started</Button>
    </Stack>
  </Card>
</template>

Components

34 components across 7 categories. Every component includes all interaction states, keyboard navigation, ARIA compliance, and prefers-reduced-motion support.

Input: Button, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, FormField Display: Card, Badge, Avatar, Tag, Table, DataReadout, CodeBlock Layout: Stack, Grid, Container, Divider, Section Navigation: Link, Tabs, Breadcrumb, Nav Feedback: Toast, Alert, Dialog, Tooltip, Progress, Spinner, Skeleton Surface: InstrumentViewport Animation: ScrollReveal

Same CSS, Different Framework

This package produces identical visual output to @dillingerstaffing/strand-ui (Preact/React). Same CSS classes, same ARIA attributes, same design tokens. The only difference is the framework binding.

Links

• GitHub
• Design Language
• HTML Reference (CSS-only API)
• Documentation

Created by Dillinger Staffing