A design system and React component library for building modern web applications.
QW provides accessible, design-system-compliant UI components built on Base UI. It handles keyboard navigation, focus management, and ARIA attributes so you can build accessible applications without thinking through every detail.
pnpm add @qw/design-systempnpm add react react-dom @phosphor-icons/reactimport { Button, Input, Dialog } from "@qw/design-system";
import "@qw/design-system/styles";import { Button } from "@qw/design-system/components/button";QW re-exports all Base UI primitives for advanced use cases:
import { Popover } from "@qw/design-system/primitives/popover";Query component documentation from the command line:
npx @qw/design-system ls # List all components
npx @qw/design-system doc Button # Get component docs
npx @qw/design-system docs # Get all docsSee AGENTS.md for comprehensive development documentation including:
- Component patterns and styling system
- Semantic color tokens
- Development workflows
- CI/CD pipeline
- Figma plugin
pnpm install
pnpm dev # Start docs site at localhost:4321
pnpm --filter @qw/design-system test# Optional: enable token sync during build
# cp packages/qw-figma/scripts/.env.example packages/qw-figma/scripts/.env
# $EDITOR packages/qw-figma/scripts/.env # set FIGMA_TOKEN (and optionally FIGMA_FILE_KEY)
pnpm --filter @qw/design-system-figma build
# In Figma: Plugins > Development > Import plugin from manifest...
# Select: packages/qw-figma/src/manifest.jsonpnpm --filter @qw/design-system new-component- AI/Agent Guide: AGENTS.md