open-index/open-npm huggingface dataset:
npm package: @phaneroo/sophia-ui
Description: A modern React component library built with Tailwind CSS, featuring a beautiful design system with custom colors.
Latest version: 0.1.1

# Sophia UI

A modern React component library built with Tailwind CSS, featuring a beautiful design system with custom colors.

## Installation

```bash
npm install @phaneroo/sophia-ui
# or
yarn add @phaneroo/sophia-ui
```

## Setup

1. Install the required dependencies:
```bash
npm install tailwindcss postcss autoprefixer
# or
yarn add tailwindcss postcss autoprefixer
```

2. Create a `tailwind.config.js` file in your project root:
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@phaneroo/sophia-ui/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#F9A11B',
          light: '#FFB74D',
          dark: '#F57C00',
        },
        secondary: {
          DEFAULT: '#89C630',
          light: '#A5D6A7',
          dark: '#388E3C',
        },
      },
    },
  },
  plugins: [],
}
```

3. Add Tailwind directives to your CSS:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Components

### Button
```tsx
import { Button } from '@phaneroo/sophia-ui';

<Button variant="primary" size="md">Click me</Button>
<Button variant="secondary" size="lg" fullWidth>Large Full Width Button</Button>
<Button variant="outline" size="sm">Small Outline Button</Button>
<Button variant="text">Text Button</Button>
```

### Card
```tsx
import { Card, CardHeader, CardBody, CardFooter } from '@phaneroo/sophia-ui';

<Card>
  <CardHeader>Card Title</CardHeader>
  <CardBody>Card content goes here</CardBody>
  <CardFooter>Card footer content</CardFooter>
</Card>
```

### Input
```tsx
import { Input } from '@phaneroo/sophia-ui';

<Input 
  label="Username"
  placeholder="Enter username"
  error="Username is required"
/>
```

### Badge
```tsx
import { Badge } from '@phaneroo/sophia-ui';

<Badge variant="success" size="md">Active</Badge>
```

### Alert
```tsx
import { Alert } from '@phaneroo/sophia-ui';

<Alert variant="success" onClose={() => console.log('closed')}>
  Operation completed successfully!
</Alert>
```

## Props

### Button
- `variant`: 'primary' | 'secondary' | 'outline' | 'text'
- `size`: 'sm' | 'md' | 'lg'
- `fullWidth`: boolean

### Card
- `CardHeader`, `CardBody`, `CardFooter` accept `className` prop

### Input
- `label`: string
- `error`: string
- `helperText`: string
- `fullWidth`: boolean
- All standard HTML input props

### Badge
- `variant`: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
- `size`: 'sm' | 'md' | 'lg'

### Alert
- `variant`: 'success' | 'error' | 'warning' | 'info'
- `onClose`: () => void

## License

MIT