@redrob/components

React components for the Redrob AI Design System. Built with React, TypeScript, and Tailwind CSS.

🎨 Live Demo

View Interactive Demo →

Installation

npm install @redrob/components

Quick Start

import { Button, Card, Input } from '@redrob/components';
import '@redrob/components/styles.css';

function App() {
  return (
    <Card>
      <h2>Sign Up</h2>
      <Input label="Email" type="email" placeholder="[email protected]" />
      <Input label="Password" type="password" />
      <Button variant="primary">Create Account</Button>
    </Card>
  );
}

Available Components

Button

Interactive button with multiple variants and sizes.

<Button variant="primary" size="md">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>

Card

Container component with optional header and footer.

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

Input

Text input with label, error state, and helper text support.

<Input 
  label="Username" 
  placeholder="Enter username"
  helperText="Choose a unique username"
/>

<Input 
  label="Email" 
  type="email"
  error="Invalid email address"
/>

Tailwind Configuration (Optional)

For consistent styling across your app:

npm install @redrob/tailwind-config

// tailwind.config.js
import redrobConfig from '@redrob/tailwind-config';

export default {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@redrob/components/**/*.{js,ts,jsx,tsx}',
  ],
  presets: [redrobConfig],
};

TypeScript Support

Full TypeScript support included with type definitions for all components.

Next.js 13+ Compatible

Works seamlessly with Next.js App Router. Components are client-side by default.

import { Button } from '@redrob/components';

export default function Page() {
  return <Button>Click me</Button>;
}

License

MIT