@dopomogai/ui

A comprehensive React UI component library built with Tailwind CSS, featuring multi-theme support (Neobrutalism and Liquid Glass).

Installation

pnpm add @dopomogai/ui

Setup & Theming

The library uses a ThemeProvider to manage styles. By default, it renders the Neobrutalism theme (bold borders, high contrast).

1. Wrap your application

import { ThemeProvider } from '@dopomogai/ui';

export const App = () => (
  // 'neobrutalism' is default if not specified
  <ThemeProvider defaultTheme="neobrutalism">
    <YourApp />
  </ThemeProvider>
);

Tailwind required: Components rely on Tailwind classes. Ensure your Tailwind config scans @dopomogai/ui/src or the classes will be purged.

Documentation

Docs ship with the npm package at node_modules/@dopomogai/ui/docs. Source of truth in this repo lives at packages/ui/docs/README.md.

2. Switching Themes

You can switch themes using the useTheme hook:

import { useTheme, Button } from '@dopomogai/ui';

const ThemeSwitcher = () => {
  const { theme, setTheme } = useTheme();
  
  return (
    <Button 
      onClick={() => setTheme(theme === 'neobrutalism' ? 'liquid-glass' : 'neobrutalism')}
    >
      Toggle Theme
    </Button>
  );
};

Component Status

✅ Themed: Supports both Neobrutalism and Liquid Glass. ⚠️ Partial: Functional but may lack full Liquid Glass overrides (falls back to Neobrutalism). ❌ Unthemed: Needs update. N/A Static: Not theme-dependent (branding/utility).

Core & Layout

| Component | Status | Description | |-----------|--------|-------------| | Button | ✅ | Primary, secondary, outline, ghost, danger variants. | | IconButton | ✅ | All variants supported. | | Badge | ✅ | Status indicators and labels. | | Tooltip | ✅ | Popper.js augmented. | | Avatar | ✅ | Basic implementation. | | Logo | N/A | Static branding SVG. | | Icon | N/A | Lucide icon wrapper. | | Spinner | ✅ | Loading indicator. | | SplitScreenLayout| ✅ | Layout wrapper. |

Containers & Overlay

| Component | Status | Description | |-----------|--------|-------------| | Card | ✅ | Base container with customizable header. | | Modal | ✅ | Dialog with backdrop and focus trap. | | Alert | ✅ | Feedback banners (Success/Error/Warning/Info). | | Popover | ✅ | Floating content. | | DropdownMenu | ✅ | Menu surface and items. | | Table | ✅ | Data display with typed columns. | | StatCard | ✅ | Dashboard metric card. | | AgentCard | ✅ | Complex card for Agent display. | | ContentCard | ✅ | Generic content display. | | FeatureCard | ✅ | Feature highlight. | | FundingAgentCard| ✅ | Specific variation. | | TabbedComponent | ✅ | Tab navigation. | | TickerCarousel | ✅ | Data ticker. | | Pagination | ✅ | Page navigation. | | SaveStatusIndicator | ✅ | Save status feedback. | | VisualElement | ⚠️ | Media wrapper (partial glass styling). |

Forms

| Component | Status | Description | |-----------|--------|-------------| | TextField | ✅ | Input with label, error, and description. | | TextareaField | ✅ | Auto-growing text area. | | SelectField | ✅ | Custom dropdown with search/filtering support. | | MultiSelectField| ✅ | Multiple selection dropdown. | | Checkbox | ✅ | Base checkbox. | | CheckboxField | ✅ | Checkbox with label wrapper. | | CheckboxGroup | ✅ | Grouped checkboxes. | | RadioGroup | ✅ | Radio button groups. | | ToggleSwitchField| ✅ | Boolean switches. | | Switch | ✅ | Toggle primitive. | | ColorPickerField| ✅ | Color selection input. | | EditableText | ✅ | Inline edit component. | | CodeEditorField | ⚠️ | CodeMirror-based editor (themes handled separately). | | DropdownPanel | ✅ | Internal dropdown surface for selects. | | Slider | ✅ | Range input. |

Missing / Future Components

The following standard UI components are currently missing and candidates for future development:

• Feedback
  • Toast / Snackbar (Transient notifications)
  • ProgressBar (Generic)
  • Skeleton (Loading placeholders)
• Navigation
  • Breadcrumb
  • Sidebar / NavigationRail
• Data Display
  • Accordion / Collapsible
  • Tag (distinct from Badge, removable)
  • AvatarGroup
• Overlay
  • Drawer / Sheet (Side panels)

Contribution Guide (Theming)

To add theme support to a component, use the clsx pattern with the .theme-liquid-glass descendant selector.

Pattern:

const classes = clsx(
  // 1. Base / Neobrutalism (Default)
  'bg-white border-2 border-black rounded-xl',
  
  // 2. Liquid Glass Overrides
  '[.theme-liquid-glass_&]:bg-white/10',
  '[.theme-liquid-glass_&]:border-white/20',
  '[.theme-liquid-glass_&]:backdrop-blur-xl',
  '[.theme-liquid-glass_&]:rounded-3xl' // Often softer corners
);