Redot Design System

A design system monorepo used in Redot's project. Provides UI components, design tokens, themes, utilities, and more.

---

Packages(Github packages)

• @redotlabs/ui
• @redotlabs/tokens
• @redotlabs/themes
• @redotlabs/utils
• @redotlabs/sdui-renderer

---

Installation

1. Add .npmrc file to project

# .npmrc
@redotlabs:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${REDOT_PAT}

2. Add REDOT_PAT to environment variable

Please set GitHub Personal Access Token as an environment variable.

export REDOT_PAT=ghp_your_token_here

3. Installing the package

Install the required package.

pnpm install @redotlabs/ui @redotlabs/themes

---

Usage

Preferences

First, add theme providers and styles to the application.

// main.tsx
import { ThemeProvider } from '@redotlabs/themes';

function App() {
  return (
    <ThemeProvider color="blue">
      <YourApp />
    </ThemeProvider>
  );
}

Setting Tailwind

// tailwind.config.ts
import { colors, typography } from '@redotlabs/tokens';
import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        ...colors,
        primary: {
          DEFAULT: 'var(--color-primary-600)',
          100: 'var(--color-primary-100)',
          200: 'var(--color-primary-200)',
          300: 'var(--color-primary-300)',
          400: 'var(--color-primary-400)',
          500: 'var(--color-primary-500)',
          600: 'var(--color-primary-600)',
          700: 'var(--color-primary-700)',
          800: 'var(--color-primary-800)',
          900: 'var(--color-primary-900)',
        },
      },
      fontSize: typography.size,
      fontWeight: typography.weight,
    },
  },
  plugins: [],
} satisfies Config;

/* index.css or globals.css */
@import 'tailwindcss';
@config '../../tailwind.config.ts';
@source '../../node_modules/@redotlabs/ui';

/* other css... */

---

License

ISC License