Design System Governance

Aging
1d ago

Getting Started

This guide will help you install and set up the Rebuy Design System in your project.

Installation

Add the design system to your project:

bash
pnpm add @rebuy/components

This automatically installs @rebuy/design-tokens as a dependency. You can import tokens directly if needed:

typescript
import { colors, spacing } from '@rebuy/design-tokens';

Setup

1. Configure Tailwind

The design system uses Tailwind CSS. Add the component library to your tailwind.config.js:

javascript
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@rebuy/components/dist/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. Import CSS

Import the design tokens CSS in your app's entry point:

typescript
import '@rebuy/design-tokens/css';

3. Use Components

Import and use components in your application:

tsx
import { Button, Card, CardHeader, CardContent } from '@rebuy/components';

export function MyComponent() {
  return (
    <Card>
      <CardHeader>Welcome</CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

Next Steps