@redrob/components

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

Installation

npm install @redrob/components
# or
yarn add @redrob/components

Setup

1. Import the CSS

In your app's root file (e.g., _app.tsx or layout.tsx):

import '@redrob/components/styles.css';

2. Configure Tailwind (Optional)

If you want to use the same Tailwind configuration:

// 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],
};

Usage

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

function App() {
  return (
    <Card>
      <Input label="Email" type="email" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Components

• Button: Interactive button with multiple variants and sizes
• Card: Container component with header, body, and footer
• Input: Text input with label, error, and helper text support

Next.js 13+ (App Router)

This package is compatible with Next.js 13+ and the App Router. All components are marked with "use client" directive.

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

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