@mhome/ui

A comprehensive React UI component library built with Tailwind CSS, providing a set of reusable and customizable components for building modern web applications.

Installation

Option 1: Install from Git Repository (Recommended for Development)

npm install github:your-username/pallas-cat-examples#packages/ui

Or add to your package.json:

{
  "dependencies": {
    "@mhome/ui": "github:your-username/pallas-cat-examples#packages/ui"
  }
}

You can also specify a specific branch or tag:

npm install github:your-username/pallas-cat-examples#main:packages/ui

Option 2: Install from NPM (When Published)

npm install @mhome/ui

Quick Start

1. Import CSS

Import the component styles in your main entry file (e.g., index.js or App.jsx):

import '@mhome/ui/dist/index.css';

2. Import and Use Components

import { Button, Menu, MenuItem, MenuItemText } from '@mhome/ui';

function App() {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  return (
    <div>
      <Button onClick={(e) => setAnchorEl(e.currentTarget)}>
        Open Menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={() => setAnchorEl(null)}
      >
        <MenuItem onClick={() => setAnchorEl(null)}>
          <MenuItemText>Profile</MenuItemText>
        </MenuItem>
        <MenuItem onClick={() => setAnchorEl(null)}>
          <MenuItemText>Settings</MenuItemText>
        </MenuItem>
      </Menu>
    </div>
  );
}

Requirements

• React ^18.2.0
• React DOM ^18.2.0
• Tailwind CSS - Must be configured in your project

Available Components

Layout Components

• Box - Container component with flexible styling
• Container - Responsive container component
• Stack - Flexbox layout component
• Grid - Grid layout system
• Paper - Surface component with elevation
• Divider - Separator component

Navigation Components

• Menu, MenuItem, MenuItemIcon, MenuItemText - Menu system
• Tabs, Tab - Tab navigation
• Drawer - Side navigation drawer
• AppBar - Application bar
• Toolbar - Toolbar component

Form Components

• Button - Button component with variants
• IconButton - Icon-only button
• TextField - Text input field
• Select, FormControl, SelectMenuItem - Select dropdown
• Checkbox - Checkbox input
• Radio, RadioGroup - Radio button group
• Slider - Range slider
• DatePicker - Date picker component
• Autocomplete - Autocomplete input
• FormControlLabel - Form control with label
• FormLabel - Form label
• FormGroup - Form control group
• InputLabel - Input label
• InputAdornment - Input adornment (icons, text)

Data Display Components

• Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardActionArea - Card components
• List, ListItem, ListItemIcon, ListItemText, ListItemButton, ListItemAvatar - List components
• Table, TableContainer, TableHead, TableBody, TableRow, TableCell - Table components
• Chip - Chip component
• Avatar - Avatar component
• Typography - Typography component
• Alert - Alert/notification component

Feedback Components

• Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogActions, DialogContentText - Dialog components
• Tooltip - Tooltip component
• Collapse - Collapsible content

Other Components

• Accordion, AccordionSummary, AccordionDetails - Accordion component
• ToggleButton, ToggleButtonGroup - Toggle button components

Styling

This component library uses Tailwind CSS and CSS variables for theming. Make sure your project has Tailwind CSS configured and includes the CSS variables defined in src/index.css.

Required CSS Variables

The components rely on CSS variables for theming. Ensure your project includes these variables (they are defined in src/index.css):

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  /* ... and more */
}

Development

Building the Package

cd packages/ui
npm run build

This will generate the dist directory with:

• index.cjs.js - CommonJS format
• index.esm.js - ES Module format
• index.css - Compiled styles

Project Structure

packages/ui/
├── src/
│   ├── components/     # Component source files
│   ├── lib/            # Utility functions
│   ├── index.js        # Main entry point
│   └── index.css       # CSS variables and Tailwind imports
├── dist/               # Built files (generated)
├── package.json
└── README.md

Examples

Visit the Storybook documentation for interactive examples and component API documentation.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.