@vikas-arora/ui-library

A comprehensive, reusable UI component library built with React, TypeScript, and Tailwind CSS. This library provides both base Shadcn UI components and custom eCommerce-specific components with full theming support, variants, and TypeScript integration.

🚀 Features

• Full TypeScript Support: Complete type safety with proper TypeScript definitions
• Theming & Variants: Comprehensive theming system with multiple variants for each component
• Shadcn UI Base: Built on top of the popular Shadcn UI component system
• eCommerce Ready: Custom components specifically designed for eCommerce applications
• Accessible: Built with accessibility in mind using Radix UI primitives
• Customizable: Highly customizable with CSS variables and Tailwind CSS
• Tree Shakeable: Only import what you need for optimal bundle size

📦 Installation

npm install @vikas-arora/ui-library
# or
yarn add @vikas-arora/ui-library
# or
pnpm add @vikas-arora/ui-library

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom

Setup

1. Import the CSS in your main CSS file or app entry point:

@import "@vikas-arora/ui-library/dist/styles.css";

2. Configure Tailwind CSS (if using Tailwind in your project):

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@vikas-arora/ui-library/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of your config
}

3. Add CSS Variables to your CSS for theming:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... other variables */
}

🎨 Components

Base Components (Shadcn UI)

Core UI components based on Shadcn UI:

• Accordion - Collapsible content sections
• Avatar - User profile images with fallbacks
• Badge - Status indicators and labels
• Button - Interactive buttons with multiple variants
• Card - Content containers with header, body, and footer
• Checkbox - Boolean input controls
• Dialog - Modal dialogs and overlays
• Input - Text input fields
• Label - Form labels
• Select - Dropdown selection controls
• Separator - Visual dividers
• Skeleton - Loading placeholders
• Switch - Toggle switches
• Table - Data tables with sorting and styling
• Tabs - Tabbed interfaces
• Textarea - Multi-line text inputs

Custom eCommerce Components

Specialized components for eCommerce applications:

• ProductCard - Product display cards with Pagination
• Sheet - Showing the Custom Contact Form
• Accordion - Showing the example of Accordion with Multiple and Default case

📖 Usage Examples

Basic Button

import { Button } from '@vikas-arora/ui-library';

function App() {
  return (
    <Button variant="default" size="md">
      Click me
    </Button>
  );
}

Product Card

import { ProductCard } from '@ecommerce/ui-library';

const product = {
  id: '1',
  name: 'Premium Headphones',
  price: 299.99,
  originalPrice: 399.99,
  image: '/headphones.jpg',
  rating: 4.5,
  reviewCount: 128,
  inStock: true,
  isNew: true,
};

function ProductList() {
  return (
    <ProductCard
      product={product}
      variant="default"
      size="md"
      showRating={true}
      showDiscount={true}
      onAddToCart={(id) => console.log('Add to cart:', id)}
      onAddToWishlist={(id) => console.log('Add to wishlist:', id)}
      onProductClick={(id) => console.log('View product:', id)}
    />
  );
}

import { RatingStars } from '@ecommerce/ui-library';

function RatingExample() {
  const [rating, setRating] = useState(4);

  return (
    <RatingStars
      rating={rating}
      maxRating={5}
      size="md"
      showValue={true}
      showCount={true}
      count={128}
      onRatingChange={setRating}
      allowHalf={true}
    />
  );
}

Form Components

import { Input, Label, Button, Card, CardContent, CardHeader, CardTitle } from '@ecommerce/ui-library';

function LoginForm() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Login</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        <div>
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" placeholder="Enter your password" />
        </div>
        <Button className="w-full">Sign In</Button>
      </CardContent>
    </Card>
  );
}

🎨 Theming

The library supports comprehensive theming through CSS variables. You can customize the appearance by overriding these variables:

:root {
  /* Base colors */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  
  /* Primary colors */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  
  /* Secondary colors */
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  
  /* Accent colors */
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  
  /* eCommerce specific */
  --success: 142.1 76.2% 36.3%;
  --warning: 47.9 95.8% 53.1%;
  --sale: 0 84.2% 60.2%;
  --new: 142.1 76.2% 36.3%;
  --featured: 217.2 91.2% 59.8%;
}

/* Dark mode */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... other dark mode variables */
}

🔧 Component Props & Variants

<ProductCard size="sm" />
<ProductCard size="md" />
<ProductCard size="lg" />
<ProductCard size="full" />

🛠️ Development

Local Development

# Clone the repository
git clone <repository-url>
cd ui-library

# Install dependencies
npm install

# Start development mode
npm run dev

# Run Storybook
npm run storybook

Building

# Build the library
npm run build

# Type check
npm run type-check

# Lint
npm run lint

📚 Storybook

The library comes with comprehensive Storybook documentation. Run Storybook to explore all components:

npm run storybook

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Shadcn UI - For the excellent base component system
• Radix UI - For accessible UI primitives
• Tailwind CSS - For the utility-first CSS framework
• Lucide React - For beautiful icons

📞 Support

If you have any questions or need support, please:

1. Check the documentation
2. Browse Storybook examples
3. Open an issue

Built with ❤️ for modern eCommerce applications.