@blocksweb/design-system

BlocksWeb unified design system with components, design tokens, and brand guidelines.

Installation

pnpm add @blocksweb/design-system

Usage

Import Components

import { Button, Card, Badge } from '@blocksweb/design-system';

function MyComponent() {
  return (
    <Card>
      <Button>Click me</Button>
      <Badge>New</Badge>
    </Card>
  );
}

Use Tailwind Preset

In your tailwind.config.js:

module.exports = {
  presets: [require('@blocksweb/design-system/tailwind-preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@blocksweb/design-system/dist/**/*.{js,mjs}',
  ],
};

Import Styles

In your app's global CSS:

@import '@blocksweb/design-system/styles';

Or in your root layout/app file:

import '@blocksweb/design-system/styles';

Design Tokens

Access design tokens directly:

import { tokens } from '@blocksweb/design-system';

const primaryColor = tokens.colors.primary.DEFAULT;
const spacing = tokens.spacing[4];

Features

• ✅ shadcn-compatible components
• ✅ TypeScript support
• ✅ Tree-shakeable
• ✅ Dark mode support
• ✅ Accessibility built-in
• ✅ Consistent design tokens
• ✅ Brand voice integration

Documentation

Visit the design system showcase app for complete documentation, examples, and brand guidelines.