npm package: @ourcodelab/oclui
Description: A beautiful React component library with Tailwind CSS theming
Author: OurCodeLab
Latest version: 0.1.2

# @ourcodelab/oclui

A beautiful React component library from **OurCodeLab** with Tailwind CSS theming, supporting multiple themes with light and dark mode.

**Contact:** developers@ourcodelab.com | https://www.ourcodelab.com

## Installation

```bash
npm install @ourcodelab/oclui
# or
pnpm add @ourcodelab/oclui
# or
yarn add @ourcodelab/oclui
```

## Quick Start

### 1. Import the styles

In your app's entry point (e.g., `main.tsx` or `App.tsx`), import the base styles:

```tsx
import '@ourcodelab/oclui/styles.css'
```

### 2. Choose a theme (optional)

Import a theme CSS file to apply a specific theme:

```tsx
// Default theme (already included in styles.css)
// No additional import needed

// Or use the corporate theme
import '@ourcodelab/oclui/themes/corporate.css'

// Or use the minimal theme
import '@ourcodelab/oclui/themes/minimal.css'
```

### 3. Set up the ThemeProvider

Wrap your app with the `ThemeProvider` to enable theme switching and dark mode:

```tsx
import { ThemeProvider } from '@ourcodelab/oclui'

function App() {
  return (
    <ThemeProvider defaultTheme="default" defaultColorMode="system">
      <YourApp />
    </ThemeProvider>
  )
}
```

### 4. Use components

```tsx
import { Button, Card, CardHeader, CardTitle, CardContent } from '@oclui/react'

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}
```

## Themes

OCLUI comes with three beautiful themes, each supporting light and dark mode:

- **Default** - A clean, modern theme with neutral colors
- **Corporate** - A professional blue-based theme
- **Minimal** - A grayscale minimalistic theme

### Switching themes at runtime

Use the `useTheme` hook to switch themes:

```tsx
import { useTheme } from '@oclui/react'

function ThemeSwitcher() {
  const { theme, setTheme, colorMode, setColorMode, resolvedColorMode } = useTheme()

  return (
    <div>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="default">Default</option>
        <option value="corporate">Corporate</option>
        <option value="minimal">Minimal</option>
      </select>

      <select value={colorMode} onChange={(e) => setColorMode(e.target.value)}>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="system">System</option>
      </select>
    </div>
  )
}
```

## Tailwind CSS Integration

If you're using Tailwind CSS in your project, you can use the OCLUI preset:

```js
// tailwind.config.js
module.exports = {
  presets: [require('@oclui/react/tailwind.preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@oclui/react/dist/**/*.js',
  ],
}
```

## Components

OCLUI includes 45+ components across multiple categories:

### Primitives
- Button
- Input
- Checkbox
- Radio / RadioGroup
- Select
- Textarea
- Switch
- Slider
- Label

### Feedback
- Alert
- Badge
- Spinner
- Progress
- Skeleton
- Toast
- Notification

### Overlay
- Modal
- Tooltip
- Dropdown
- Drawer
- Popover
- ContextMenu

### Navigation
- Tabs
- Breadcrumb
- Pagination
- Steps
- Navbar

### Data Display
- Card
- Avatar / AvatarGroup
- Table
- Accordion
- Timeline
- Rating
- Chip
- Tag
- ListGroup
- Carousel
- ImageGallery
- CodeSnippet
- Collapse

### Forms
- FormField
- FileUpload
- SearchBar
- PasswordStrengthMeter

### Layout
- ResponsiveGrid

### Utilities
- BackToTop
- InfiniteScroll
- FAB (Floating Action Button)

## TypeScript Support

OCLUI is written in TypeScript and includes full type definitions. All components have proper TypeScript interfaces for props.

## License

MIT

## Credits
OCLUI is developed and maintained by the OurCodeLab. OCLUI is used in various projects in OurCodeLab and is actively maintained by the company. 

## Support
For support, please contact
[support@ourcodelab.com](mailto:support@ourcodelab.com)
[https://www.ourcodelab.com](https://www.ourcodelab.com)