Sophia UI

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

Installation

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

Setup

1. Install the required dependencies:

npm install tailwindcss postcss autoprefixer
# or
yarn add tailwindcss postcss autoprefixer

2. Create a tailwind.config.js file in your project root:

/** @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:

@tailwind base;
@tailwind components;
@tailwind utilities;

Components

Button

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

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

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

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

Badge

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

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

Alert

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