UI ProKit

A modern, reusable UI component library built with React, TypeScript, and Tailwind CSS.

Installation

npm install ui-prokit

Usage

Import Styles

First, import the styles in your app entry point (e.g., main.tsx or App.tsx):

import 'ui-prokit/styles.css';

Using Components

import { Card, Button } from 'ui-prokit';

function App() {
  return (
    <Card padding="lg">
      <h2>Welcome to UI ProKit</h2>
      <Button variant="primary" size="lg">
        Get Started
      </Button>
    </Card>
  );
}

Components

Card

A container component for displaying content in an elevated surface.

Props:

• padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl' - Padding size (default: 'md')
• hoverable?: boolean - Show hover effect (default: true)
• onClick?: () => void - Click handler
• className?: string - Additional CSS classes

Example:

<Card padding="lg" onClick={() => console.log('clicked')}>
  <h3>Card Title</h3>
  <p>Card content</p>
</Card>

Button

A button component with multiple variants and sizes.

Props:

• variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'ghost' - Visual style (default: 'primary')
• size?: 'sm' | 'md' | 'lg' - Button size (default: 'md')
• loading?: boolean - Show loading spinner (default: false)
• leftIcon?: ReactNode - Icon before text
• rightIcon?: ReactNode - Icon after text
• fullWidth?: boolean - Take full width (default: false)

Example:

<Button variant="primary" size="lg" loading={isLoading}>
  Submit
</Button>

<Button variant="secondary" leftIcon={<IconComponent />}>
  With Icon
</Button>

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode for development
npm run dev

License

MIT