@redrob-ui/react

React components for the Redrob AI Design System, built with Vite and Tailwind CSS.

Installation

npm install @redrob-ui/react @redrob-ui/tailwind-config
# or
yarn add @redrob-ui/react @redrob-ui/tailwind-config
# or
pnpm add @redrob-ui/react @redrob-ui/tailwind-config

Setup

1. Configure Tailwind CSS:

// tailwind.config.js
const redrobConfig = require('@redrob-ui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrob-ui/react/**/*.{js,ts,jsx,tsx}',
  ],
};

2. Import styles:

/* src/index.css or src/App.css */
@import '@redrob-ui/react/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

import { Button, Card, Input } from '@redrob-ui/react';
import { HomeIcon } from '@redrob-ui/icons';

function App() {
  const [email, setEmail] = React.useState('');

  return (
    <Card>
      <h1>Welcome</h1>
      <Input
        label="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="[email protected]"
      />
      <Button
        variant="primary"
        leftIcon={<HomeIcon className="w-4 h-4" />}
      >
        Submit
      </Button>
    </Card>
  );
}

Components

Button

<Button
  variant="primary"      // 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
  size="md"              // 'sm' | 'md' | 'lg'
  fullWidth={false}
  isLoading={false}
  disabled={false}
  leftIcon={<Icon />}
  rightIcon={<Icon />}
>
  Click me
</Button>

Card

<Card>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>

Input

<Input
  label="Email"
  placeholder="Enter email"
  helperText="We'll never share your email"
  error="This field is required"
  size="md"              // 'sm' | 'md' | 'lg'
  disabled={false}
  type="text"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Development

Start dev server

npm run dev

This starts the Vite dev server at http://localhost:3000 with Hot Module Replacement (HMR).

Build

npm run build

Builds the library to dist/ folder with:

• ES modules (.mjs)
• CommonJS (.js)
• TypeScript declarations (.d.ts)
• Compiled CSS (styles.css)

Preview

npm run preview

Preview the production build locally.

TypeScript

Full TypeScript support with exported types:

import type { ButtonProps, CardProps, InputProps } from '@redrob-ui/react';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Vite Features

• ⚡ Lightning Fast HMR - Instant feedback during development
• 🎯 Optimized Build - Tree-shaking and code splitting
• 📦 Multiple Formats - ESM and CJS outputs
• 🔍 Source Maps - For debugging
• 🎨 CSS Processing - PostCSS with Tailwind

Customization

Extending Components

import { Button, ButtonProps } from '@redrob-ui/react';

interface MyButtonProps extends ButtonProps {
  icon?: React.ReactNode;
}

export const MyButton: React.FC<MyButtonProps> = ({ icon, ...props }) => {
  return <Button leftIcon={icon} {...props} />;
};

Custom Styling

// Use className for custom styles
<Button className="my-custom-class">
  Custom Button
</Button>

Tailwind Extension

// tailwind.config.js
const redrobConfig = require('@redrob-ui/tailwind-config');

module.exports = {
  presets: [redrobConfig],
  theme: {
    extend: {
      colors: {
        brand: '#your-color',
      },
    },
  },
};

Best Practices

1. Import styles once - In your main entry file
2. Use design tokens - Instead of hardcoded values
3. Leverage variants - Use variant props instead of custom styling
4. Type safety - Utilize TypeScript types for better DX
5. Composability - Compose complex UIs from simple components

Examples

See the React example app for a complete implementation.

Related Packages

• @redrob-ui/tokens - Design tokens
• @redrob-ui/tailwind-config - Tailwind preset
• @redrob-ui/icons - Icon library
• @redrob-ui/vue - Vue 3 components

License

MIT