Package Exports

@adanyal46/ui-components
@adanyal46/ui-components/dist/index.esm.js
@adanyal46/ui-components/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@adanyal46/ui-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@adanyal46/ui-components

A comprehensive React component library built with JavaScript and Tailwind CSS for building modern, accessible, and responsive user interfaces. Features 11 professional components covering everything from basic UI elements to complex layout components.

🚀 Quick Start

Installation

npm install @adanyal46/ui-components

Usage

import { 
  Button, Card, Input, Grid, Table,
  Modal, Badge, Loading,
  Header, Footer, Sidebar 
} from '@adanyal46/ui-components';

function App() {
  return (
    <Card>
      <h2>Welcome to Our Platform</h2>
      <Input placeholder="Enter your email" />
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

📦 What's Included

Core Components

Button - Versatile button component with multiple variants and sizes
Card - Flexible container component for content grouping
Input - Form input component with validation support
Modal - Accessible modal dialog component
Badge - Status and label component
Loading - Loading states and spinners

Layout Components

Header - Navigation header component
Footer - Page footer component
Sidebar - Collapsible sidebar navigation
Grid - Responsive grid system
Table - Data table component

Form Components

LoginForm - Ready-to-use login form
SignupForm - User registration form

✨ Key Features

🎯 JavaScript First - No TypeScript complexity, pure JavaScript
📱 Responsive Design - Mobile-first responsive components
♿ Accessibility - WCAG 2.1 compliant components
🎨 Customizable - Easy theming and customization
📦 Tree Shakeable - Import only what you need
⚡ Performance Optimized - Lightweight and fast
🔧 Developer Friendly - Excellent DX with clear APIs

🛠️ Technology Stack

React 18.2+ - Modern React with hooks and concurrent features
Tailwind CSS - Utility-first CSS framework
Lucide React - Beautiful, customizable icons
PropTypes - Runtime type checking for React props

📚 Documentation

🏗️ Project Structure

react-component-library/
├── src/
│   ├── components/          # Component library
│   │   ├── Button/         # Button component
│   │   ├── Card/           # Card component
│   │   ├── Input/          # Input component
│   │   └── index.js        # Main exports
│   ├── styles/             # Global styles
│   └── utils/              # Utility functions
├── docs/                   # Documentation
├── examples/               # Usage examples
├── stories/               # Storybook stories
└── tests/                 # Test files

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on how to get started.

📄 License

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

🆘 Support

Built with ❤️ for the React community