weg-design-system

A React component library built with Tailwind CSS v4 and Base UI.

Documentation (how it works, setup, adding components, styles & types): docs/

Installation

Recommended: pnpm or yarn

pnpm add weg-design-system

yarn add weg-design-system

npm

npm install weg-design-system

Note: If you get Cannot read properties of null (reading 'matches') with npm, it’s a known npm bug (e.g. with Node.js 23.x). Use pnpm or yarn instead, or try: npm install --legacy-peer-deps, clearing the cache (npm cache clean --force), or updating npm (npm install -g npm@latest).

Usage

1. Import styles in your entry file

Import the styles once in your main entry point:

• React (Vite/CRA): src/main.tsx or src/index.tsx
• Next.js (App Router): app/layout.tsx or app/page.tsx
• Next.js (Pages Router): pages/_app.tsx
• Other frameworks: Your main entry point file

import "weg-design-system/styles";

2. Use components

import { Button } from "weg-design-system";

function MyComponent() {
  return <Button variant="outline">Click me</Button>;
}

Agents

This package ships Agent rules to help AI tooling discover available components and follow the intended import patterns.

• Where they are installed: node_modules/weg-design-system/.cursor/rules/*
• How to enable them in your repo: copy them into your project:

mkdir -p .cursor/rules
cp -R node_modules/weg-design-system/.cursor/rules/* .cursor/rules/

Once copied, open your project in Cursor and it will use those rules as persistent guidance.

IntelliSense / types

• Component prop types ship in dist/*.d.ts and are exposed via the package root export.
• If your editor doesn’t pick up new types after upgrading this package, restart the TS server (VS Code/Cursor: “TypeScript: Restart TS Server”).

Development

pnpm install
pnpm run storybook   # Storybook on port 6006
pnpm run build       # Build library (CSS then JS)

License

MIT