React component design system for the Wireweave product line.
npm install @wireweave/ui
# or
pnpm add @wireweave/uiPeer dependencies: react@^19, react-dom@^19, tailwindcss@^4.
import { Button, Card, CardContent } from '@wireweave/ui';
import '@wireweave/ui/styles';
export function Example() {
return (
<Card>
<CardContent>
<Button variant="primary">Get started</Button>
</CardContent>
</Card>
);
}The package ships a single source of truth for the Wireweave design system tokens.
Light theme is the default; dark theme activates when the .dark class is present
on a parent element (or via prefers-color-scheme: dark).
<html className={isDark ? 'dark' : ''}>
<body>{/* … */}</body>
</html>Semantic tokens (--color-foreground, --color-background, --color-muted, …) are
defined in the package's @theme block and overridden under .dark. Consumers must
not hardcode hex values; reference tokens via Tailwind arbitrary values such as
bg-[var(--color-paper-1)] or via the documented utility classes.
Browse all components, variants, and dark/light token previews at ui.wireweave.org.
pnpm storybook # local dev (port 6006)
pnpm build-storybook # static buildThis package follows the same release flow as @wireweave/core:
developbranch →--tag beta(preRelease)mainbranch →--tag latest- Conventional commits +
release-it+ npm provenance via Trusted Publishing.
MIT © Wireweave