React components for Redrob AI Design System
npm install @redrob/componentsbash
npm install @redrob/components
`
Quick Start
`tsx
import { Button, Card, Input } from '@redrob/components';
import '@redrob/components/styles.css';
function App() {
return (
Sign Up
);
}
`
Available Components
$3
Interactive button with multiple variants and sizes.
`tsx
`
$3
Container component with optional header and footer.
`tsx
Card Title
Card content goes here
`
$3
Text input with label, error state, and helper text support.
`tsx
label="Username"
placeholder="Enter username"
helperText="Choose a unique username"
/>
label="Email"
type="email"
error="Invalid email address"
/>
`
Tailwind Configuration (Optional)
For consistent styling across your app:
`bash
npm install @redrob/tailwind-config
`
`javascript
// 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.
`tsx
import { Button } from '@redrob/components';
export default function Page() {
return ;
}
``