@woobee/ui

WooBee UI component library — reusable React components styled with Tailwind CSS.

Installation

npm install @woobee/ui

Peer Dependencies

• react >= 18
• react-dom >= 18

Setup

1. Wrap your app with ModalProvider

Components like Modal, Drawer, and ConfirmationBox require the ModalProvider context:

import { ModalProvider } from '@woobee/ui'

function App() {
  return (
    <ModalProvider>
      {/* your app */}
    </ModalProvider>
  )
}

2. Configure Custom Tailwind Colors

This library uses custom Tailwind color tokens. Add these to your Tailwind CSS configuration:

Tailwind v4 (app.css or globals.css)

@import "tailwindcss";

@theme {
  /* Primary */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;

  /* Brown */
  --color-brown-500: #8B6914;
  --color-brown-600: #7a5c11;

  /* Charcoal */
  --color-charcoal-50: #f5f5f5;
  --color-charcoal-100: #e0e0e0;
  --color-charcoal-200: #b0b0b0;
  --color-charcoal-300: #808080;
  --color-charcoal-400: #606060;
  --color-charcoal-500: #404040;
  --color-charcoal-600: #333333;
  --color-charcoal-700: #262626;
  --color-charcoal-800: #1a1a1a;
  --color-charcoal-900: #111111;

  /* Cream */
  --color-cream-50: #fefdf8;
  --color-cream-200: #f5f0e1;

  /* Flamingo */
  --color-flamingo-500: #f472b6;

  /* Dark Blue */
  --color-dark-blue-500: #1e3a5f;
}

Note: Adjust the exact color values to match your brand. The values above are defaults — refer to your main app's Tailwind theme for the canonical values.

Available Components

General

| Component | Import | |-----------|--------| | Button | import { Button } from '@woobee/ui' | | Tag | import { Tag } from '@woobee/ui' | | TagGroup | import { TagGroup } from '@woobee/ui' | | Tabs | import { Tabs } from '@woobee/ui' | | Toggle | import { Toggle } from '@woobee/ui' | | Loading | import { Loading } from '@woobee/ui' | | CheckboxList | import { CheckboxList } from '@woobee/ui' | | SortIcon | import { SortIcon } from '@woobee/ui' | | InlinePrompt | import { InlinePrompt } from '@woobee/ui' |

Navigation

| Component | Import | |-----------|--------| | Breadcrumb | import { Breadcrumb } from '@woobee/ui' | | Tab | import { Tab } from '@woobee/ui' | | ButtonGroup | import { ButtonGroup } from '@woobee/ui' |

Overlays

| Component | Import | |-----------|--------| | Modal | import { Modal } from '@woobee/ui' | | Drawer | import { Drawer } from '@woobee/ui' | | ConfirmationBox | import { ConfirmationBox } from '@woobee/ui' | | Transition | import { Transition } from '@woobee/ui' |

HTML Elements

| Component | Import | |-----------|--------| | H1, H2, H3, H4, B | import { H1, H2, H3, H4, B } from '@woobee/ui' |

Table

| Component | Import | |-----------|--------| | Table, Thead, Tbody, Tr, Th, Td | import { Table, Thead, Tbody, Tr, Th, Td } from '@woobee/ui' |

Form

| Component | Import | |-----------|--------| | Input | import { Input } from '@woobee/ui' | | Label | import { Label } from '@woobee/ui' | | Select | import { Select } from '@woobee/ui' | | SelectInput | import { SelectInput } from '@woobee/ui' | | Textarea | import { Textarea } from '@woobee/ui' | | TagInput | import { TagInput } from '@woobee/ui' |

Utilities

| Utility | Import | |---------|--------| | classNames | import { classNames } from '@woobee/ui' | | classNameObject | import { classNameObject } from '@woobee/ui' |

Usage Examples

Button

import { Button } from '@woobee/ui'

<Button variant="primary" size="medium" onClick={() => {}}>
  Click Me
</Button>

<Button variant="secondary" loading={true}>
  Loading...
</Button>

Breadcrumb

Breadcrumb navigation component decoupled from the router (e.g. Next.js) using the linkComponent and onBack props.

import { Breadcrumb } from '@woobee/ui'
import Link from 'next/link' // or any custom Link component

<Breadcrumb
  links={[
    { name: 'Home', href: '/' },
    { name: 'Projects', href: '/projects' },
    { name: 'WooBee', href: '/projects/woobee' }
  ]}
  onBack={() => window.history.back()}
  linkComponent={({ href, className, children }) => (
    <Link href={href} className={className}>
      {children}
    </Link>
  )}
/>

Tab

A navigation/tab component decoupled from the router, supporting redirection using a custom linkComponent or state management via onChange.

import { Tab } from '@woobee/ui'
import Link from 'next/link'

<Tab
  items={[
    { id: 'overview', label: 'Overview', link: '/overview' },
    { id: 'settings', label: 'Settings', link: '/settings' }
  ]}
  label="label"
  value="overview"
  allowRedirect={true}
  onChange={(item) => console.log('Tab changed:', item.id)}
  linkComponent={({ href, className, children, onClick }) => (
    <Link href={href} className={className} onClick={onClick}>
      {children}
    </Link>
  )}
/>

ButtonGroup

A versatile group of buttons or navigation links, supporting custom routing via linkComponent and nested dropdown menus via subgroupModal.

import { ButtonGroup } from '@woobee/ui'
import Link from 'next/link'

<ButtonGroup
  buttons={[
    { id: 'home', label: 'Home', url: '/' },
    {
      id: 'settings',
      label: 'Settings',
      subgroups: [
        { id: 'profile', label: 'Profile Settings', url: '/settings/profile' },
        { id: 'security', label: 'Security', url: '/settings/security' }
      ]
    }
  ]}
  activeId="home"
  direction="horizontal"
  onChange={(id) => console.log('Button clicked:', id)}
  linkComponent={({ href, children }) => (
    <Link href={href}>
      {children}
    </Link>
  )}
  subgroupModal={({ open, label, items, onClose, onChange }) => (
    // Render custom modal here for subgroups
    open ? (
      <div className="subgroup-modal">
        <h4>{label}</h4>
        {items?.map(item => (
          <a key={item.id} href={item.url}>{item.label}</a>
        ))}
        <button onClick={onClose}>Close</button>
      </div>
    ) : null
  )}
/>

Modal

import { Modal } from '@woobee/ui'

<Modal
  open={isOpen}
  title="Edit Item"
  size="medium"
  onClose={() => setIsOpen(false)}
  onCancel={() => setIsOpen(false)}
  onSubmit={handleSave}
  submitText="Save"
>
  <p>Modal content here</p>
</Modal>

Toggle

import { Toggle } from '@woobee/ui'

<Toggle value={isEnabled} onChange={setIsEnabled} />
<Toggle value={isSmall} onChange={setIsSmall} size="small" />

TypeScript

All components export their prop types. Import them alongside the component:

import { Button, type ButtonProps } from '@woobee/ui'

License

MIT