@farohq/ui

Shared UI components and styling for FaroHQ applications.

Installation

npm install @farohq/ui

Usage

Import Components

import { Button, Card, Input } from '@farohq/ui';

Import Styles

@import '@farohq/ui/styles';

Or in your main CSS file:

@import '@farohq/ui/dist/styles.css';

Tailwind Config

The package includes Tailwind CSS configuration. You can extend it in your project:

// tailwind.config.js
const uiConfig = require('@farohq/ui/tailwind');

module.exports = {
  ...uiConfig,
  // Your custom config
};

Components

Button

import { Button } from '@farohq/ui';

<Button>Click me</Button>
<Button variant="outline">Outline</Button>
<Button size="lg">Large</Button>

Card

import { Card, CardHeader, CardTitle, CardContent } from '@farohq/ui';

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>Content</CardContent>
</Card>

Input

import { Input } from '@farohq/ui';

<Input placeholder="Enter text..." />

Badge

import { Badge } from '@farohq/ui';

<Badge>New</Badge>
<Badge variant="secondary">Secondary</Badge>

Alert

import { Alert, AlertTitle, AlertDescription } from '@farohq/ui';

<Alert>
  <AlertTitle>Title</AlertTitle>
  <AlertDescription>Description</AlertDescription>
</Alert>

Styling

The package uses Tailwind CSS with custom design tokens. Make sure Tailwind is configured in your project.

Peer Dependencies

This package requires the following peer dependencies:

• react ^18.0.0
• react-dom ^18.0.0
• tailwindcss ^3.4.0

Additional peer dependencies for specific components:

• react-hook-form ^7.0.0 (for form components)
• react-day-picker ^8.0.0 (for date pickers)
• recharts ^2.0.0 (for charts)
• embla-carousel-react ^8.0.0 (for carousels)
• cmdk ^1.0.0 (for command menu)
• vaul ^1.0.0 (for drawers)

Development

# Build
npm run build

# Watch mode
npm run dev

License

Proprietary - FaroHQ