My UI Components

A beautiful React component library built with Tailwind CSS, providing a comprehensive set of reusable UI components for modern web applications.

Features

• 🎨 Beautiful Design - Modern, clean components with thoughtful styling
• 🔧 TypeScript Support - Full TypeScript support with type definitions
• 🎯 Tailwind CSS - Built with Tailwind CSS for easy customization
• 📱 Responsive - Mobile-first responsive design
• ♿ Accessible - Built with accessibility in mind
• 🌳 Tree Shakable - Import only what you need
• 📦 Lightweight - Minimal bundle size impact

Installation

npm install my-ui-components

Make sure you have the required peer dependencies:

npm install react react-dom

Setup

Tailwind CSS Configuration

Add the library's source path to your tailwind.config.js to ensure proper styling:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/my-ui-components/dist/**/*.{js,ts,jsx,tsx}"
  ],
  // ... rest of your config
}

Components

Button

import { Button } from 'my-ui-components';

<Button variant="solid" color="primary" size="md">
  Click me
</Button>

Props:

• variant: 'solid' | 'outline' | 'ghost' | 'link'
• color: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral'
• size: 'sm' | 'md' | 'lg' | 'xl'
• isLoading: boolean
• leftIcon, rightIcon: React.ReactNode

Input

import { Input } from 'my-ui-components';
import { Search } from 'lucide-react';

<Input 
  label="Search"
  placeholder="Enter search term..."
  leftIcon={<Search size={16} />}
/>

Props:

• size: 'sm' | 'md' | 'lg' | 'xl'
• error: boolean
• helperText: string
• label: string
• leftIcon, rightIcon: React.ReactNode

Card

import { Card } from 'my-ui-components';

<Card padding="md" shadow="md">
  <h3>Card Title</h3>
  <p>Card content goes here...</p>
</Card>

Props:

• padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'
• shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl'
• border: boolean

Badge

import { Badge } from 'my-ui-components';

<Badge variant="solid" color="success">
  New
</Badge>

Props:

• variant: 'solid' | 'outline' | 'subtle'
• color: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral'
• size: 'sm' | 'md' | 'lg' | 'xl'

Modal

import { Modal } from 'my-ui-components';

<Modal 
  isOpen={isOpen} 
  onClose={() => setIsOpen(false)}
  title="Modal Title"
  size="md"
>
  Modal content here...
</Modal>

Props:

• isOpen: boolean
• onClose: () => void
• title: string
• size: 'sm' | 'md' | 'lg' | 'xl' | 'full'
• closeOnOverlay: boolean

Spinner

import { Spinner } from 'my-ui-components';

<Spinner size="md" color="primary" />

Props:

• size: 'sm' | 'md' | 'lg' | 'xl'
• color: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral'

Typography

import { Typography } from 'my-ui-components';

<Typography variant="h1" color="primary" weight="bold">
  Heading Text
</Typography>

Props:

• as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div'
• variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption' | 'overline'
• color: 'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'error'
• weight: 'light' | 'normal' | 'medium' | 'semibold' | 'bold'
• align: 'left' | 'center' | 'right'

Development Commands

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build

# Link for local development
npm run link:local

# Unlink local package
npm run unlink:local

Publishing to NPM

1. Build the library:

   npm run build

2. Login to NPM:

   npm login

3. Publish:

   npm publish

4. Update version and publish:

   npm version patch  # or minor, major
   npm publish

Local Development & Testing

To test your library in another project locally:

1. In your library project:

   npm run build
   npm link

2. In your test project:

   npm link my-ui-components

3. To unlink:

   npm unlink my-ui-components  # in test project
   npm unlink                   # in library project

License

MIT