npm package: @rohitkashyap0678/component-library
Description: A comprehensive React component library built with Next.js, Material-UI, and Tailwind CSS
Author: OmnisAI
Latest version: 1.0.0

# OmnisAI Component Library

A comprehensive React component library built with Next.js, Material-UI, and Tailwind CSS. This library provides a collection of reusable UI components for building modern web applications.

## Features

- 🎨 **Rich Component Set**: 60+ pre-built components including tables, forms, charts, and more
- 📱 **Responsive Design**: All components are mobile-first and fully responsive
- 🎯 **TypeScript Support**: Full TypeScript support with type definitions
- 📖 **Storybook Integration**: Interactive component documentation
- 🎨 **Material-UI Based**: Built on top of Material-UI for consistent design
- 🚀 **Next.js Compatible**: Optimized for Next.js applications
- ⚡ **Tree Shaking**: Import only what you need

## Installation

```bash
npm install @rohitkashyap0678/component-library
```

```bash
yarn add @rohitkashyap0678/component-library
```

```bash
pnpm add @rohitkashyap0678/component-library
```

## Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install react react-dom @mui/material @emotion/react @emotion/styled
```

## Quick Start

```tsx
import React from 'react';
import { CommonButton, DashboardCards, Header } from '@rohitkashyap0678/component-library';

function App() {
  return (
    <div>
      <Header title="My Application" />
      <DashboardCards 
        title="Welcome"
        description="Get started with OmnisAI components"
      />
      <CommonButton 
        variant="primary" 
        onClick={() => console.log('Clicked!')}
      >
        Get Started
      </CommonButton>
    </div>
  );
}

export default App;
```

## Available Components

### Common Components
- **Buttons**: CommonButton with multiple variants
- **Forms**: CustomCheckbox, DatePicker, CommonDropdown
- **Navigation**: Header, HeaderSidebar, Breadcrumb, Pagination
- **Data Display**: CommonTable, DashboardCards, BadgesView
- **Feedback**: Alert, EmptyScreen, NoDataFound, SkeletoLoading
- **Layout**: CommonCarousel, FolderStructure, ScrollAreaWithTable

### Chart Components
- **BarGraphAnimation**: Animated bar charts
- **BasicLineChart**: Simple line charts
- **PieChartFullForm**: Interactive pie charts

### Chatbot Components
- **DesktopChatbot**: Full-featured chat interface
- **ChatList**: Message list component
- **ChatBotHeader**: Chat header with controls

### Static Components
- Authentication screens
- User management interfaces
- File upload components

## Component Props and API

Each component comes with comprehensive TypeScript definitions. For detailed API documentation and examples, visit our [Storybook documentation](https://your-storybook-url.com).

## Styling

This library uses a combination of:
- **Material-UI**: For base component styling
- **Tailwind CSS**: For utility-first styling
- **CSS Modules**: For component-specific styles

### Theming

Components inherit from your Material-UI theme. To customize:

```tsx
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { CommonButton } from '@rohitkashyap0678/component-library';

const theme = createTheme({
  palette: {
    primary: {
      main: '#your-color',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CommonButton>Themed Button</CommonButton>
    </ThemeProvider>
  );
}
```

## Development

To contribute to this library:

```bash
# Clone the repository
git clone https://github.com/omnisai-io/ComponentLibraryFrontend.git

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build the library
npm run build:lib
```

## Scripts

- `npm run dev` - Start Next.js development server
- `npm run build:lib` - Build the library for distribution
- `npm run storybook` - Start Storybook development server
- `npm run build-storybook` - Build Storybook for production
- `npm run lint` - Run ESLint

## Browser Support

This library supports all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## License

MIT © [OmnisAI](https://github.com/omnisai-io)

## Support

- 📖 [Documentation](https://your-docs-url.com)
- 🐛 [Issue Tracker](https://github.com/omnisai-io/ComponentLibraryFrontend/issues)
- 💬 [Discussions](https://github.com/omnisai-io/ComponentLibraryFrontend/discussions)