@ourcodelab/oclui

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

Contact: [email protected] | https://www.ourcodelab.com

Installation

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:

import '@ourcodelab/oclui/styles.css'

2. Choose a theme (optional)

Import a theme CSS file to apply a specific theme:

// 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:

import { ThemeProvider } from '@ourcodelab/oclui'

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

4. Use components

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:

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:

// 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 [email protected] https://www.ourcodelab.com