npm package: @newmindai/mecellem-ui
Description: Mecellem Design System
Latest version: 0.1.15

<div align="center">
<img src="https://mecellem.com/assets/images/mecellem_ui.png" alt="Mecellem UI Logo" />


  # Mecellem UI

  **Enterprise-Grade React Component Library**

  A production-ready, accessible, and fully customizable React component library built with TypeScript and Tailwind CSS v4.

  [![npm version](https://img.shields.io/npm/v/@newmindai/mecellem-ui?style=flat-square&color=5C4EE5)](https://www.npmjs.com/package/@newmindai/mecellem-ui)
  [![npm downloads](https://img.shields.io/npm/dm/@newmindai/mecellem-ui?style=flat-square&color=5C4EE5)](https://www.npmjs.com/package/@newmindai/mecellem-ui)
  [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-5C4EE5.svg?style=flat-square)](https://opensource.org/licenses/Apache-2.0)
  [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
  [![React](https://img.shields.io/badge/React-19+-61DAFB?style=flat-square&logo=react&logoColor=black)](https://react.dev/)
  [![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-v4-38BDF8?style=flat-square&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)

  [Documentation](#quick-start) · [Components](#components) · [Examples](#usage-examples) · [Contributing](#contributing)
</div>

---

## About

Mecellem UI is the official design system developed by <a href="http://www.newmind.ai" target="_blank" rel="noopener noreferrer">NewMind AI</a> to support <a href="http://www.mecellem.com/" target="_blank" rel="noopener noreferrer">Mecellem Dynamics</a>' mission of delivering actionable insights through a coherent and scalable user experience. Built on Mecellem's design approach, it defines the visual language and interaction patterns that turn complex systems into clear, intuitive interfaces.

Mecellem UI provides a comprehensive set of 56+ React components, designed with accessibility, consistency, and enterprise scalability in mind. By unifying components, icons, and interaction rules, Mecellem UI enables teams to build precise, reliable, and decision-focused applications with minimal friction.

---

## Features

| Feature | Description |
|---------|-------------|
| 56+ Components | Production-ready components from buttons to complex data visualizations |
| TypeScript First | Full type safety with comprehensive type definitions |
| Tailwind CSS v4 | Modern styling with CSS variables for easy customization |
| Accessible | WCAG 2.1 compliant components with keyboard navigation |
| Tree-Shakeable | Import only what you need for optimal bundle size |
| Dark Mode Ready | Built-in support for light and dark themes |

---

## Installation

```bash
npm install @newmindai/mecellem-ui
```

<details>
<summary>Other package managers</summary>

```bash
# Yarn
yarn add @newmindai/mecellem-ui

# pnpm
pnpm add @newmindai/mecellem-ui

# Bun
bun add @newmindai/mecellem-ui
```

</details>

**Requirements:**
- React 19.0.0 or higher
- React DOM 19.0.0 or higher

---

## Quick Start

### 1. Import Styles

Add the global styles to your application entry point:

```tsx
// main.tsx or App.tsx
import '@newmindai/mecellem-ui/styles.css'
```

### 2. Use Components

```tsx
import { Button, Card, Input } from '@newmindai/mecellem-ui'

export default function App() {
  return (
    <Card variant="elevated" className="p-6">
      <h2>Welcome to Mecellem UI</h2>
      <Input placeholder="Enter your email" className="my-4" />
      <Button variant="primary">Get Started</Button>
    </Card>
  )
}
```

---

## Components

### Form Components

| Component | Description |
|-----------|-------------|
| Button | Versatile button with multiple variants and states |
| Input | Text input with validation and addon support |
| Textarea | Multi-line text input |
| Select | Single selection dropdown |
| MultiSelect | Multiple selection component |
| Checkbox | Checkbox with label support |
| Radio | Radio button group |
| Toggle | Toggle/switch component |
| Slider | Single value slider |
| RangeSlider | Range selection slider |
| NumberInput | Numeric input with increment/decrement |
| PasswordInput | Password input with visibility toggle |
| Autocomplete | Input with autocomplete suggestions |
| SegmentedControl | Segmented button group |

### Navigation Components

| Component | Description |
|-----------|-------------|
| Tabs | Tab navigation |
| Breadcrumb | Breadcrumb navigation |
| Pagination | Page navigation |
| SideNav | Sidebar navigation |
| Menu | Dropdown menu |
| Popover | Popover container |
| SearchBar | Search input with suggestions |

### Data Display Components

| Component | Description |
|-----------|-------------|
| Card | Content container |
| StatCard | Statistics display card |
| Table | Data table with sorting and pagination |
| Accordion | Collapsible content panels |
| Avatar | User avatar |
| Badge | Status badge |
| Chip | Tag/chip component |
| Label | Form label |
| Text | Text component with variants |
| Heading | Heading component |
| Indicator | Status indicator |

### Feedback Components

| Component | Description |
|-----------|-------------|
| Modal | Modal dialog |
| ConfirmationModal | Confirmation dialog |
| Drawer | Slide-out panel |
| Toast | Toast notifications |
| Alert | Alert messages |
| Tooltip | Tooltip |
| Spinner | Loading spinner |
| LoadingOverlay | Full-screen loading overlay |

### Layout Components

| Component | Description |
|-----------|-------------|
| PageLayout | Page layout wrapper |
| PageHeader | Page header |
| MainContent | Main content area |
| Section | Content section |
| Container | Responsive container |
| Grid | CSS Grid layout |
| Stack | Flexbox stack |
| HStack | Horizontal stack |
| VStack | Vertical stack |
| Box | Generic container |
| Space | Spacing component |
| Footer | Page footer |

### Chart Components

| Component | Description |
|-----------|-------------|
| SimpleAreaChart | Basic area chart |
| MultiLineChart | Multi-line chart |
| StackedAreaChart | Stacked area chart |
| SimpleBarChart | Basic bar chart |
| HorizontalBarChart | Horizontal bar chart |
| StackedBarChart | Stacked bar chart |
| PieChart | Pie chart |
| DonutChart | Donut chart |
| BubbleChart | Bubble chart |
| MonochromaticHeatmap | Monochromatic heatmap |
| SemanticHeatmap | Semantic heatmap |

---

## Usage Examples

<details>
<summary>Button Variants</summary>

```tsx
import { Button } from '@newmindai/mecellem-ui'

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

// Sizes
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

// States
<Button loading>Loading...</Button>
<Button disabled>Disabled</Button>

// With Icons
<Button leftIcon={<PlusIcon />}>Add Item</Button>
<Button rightIcon={<ArrowRightIcon />}>Continue</Button>
```

</details>

<details>
<summary>Form Example</summary>

```tsx
import { Input, Select, Checkbox, Button } from '@newmindai/mecellem-ui'

function ContactForm() {
  return (
    <form className="space-y-4">
      <Input
        label="Name"
        placeholder="John Doe"
        required
      />

      <Input
        label="Email"
        type="email"
        placeholder="john@example.com"
      />

      <Select
        label="Subject"
        options={[
          { value: 'general', label: 'General Inquiry' },
          { value: 'support', label: 'Technical Support' },
          { value: 'sales', label: 'Sales' },
        ]}
      />

      <Checkbox label="Subscribe to newsletter" />

      <Button type="submit" variant="primary" className="w-full">
        Send Message
      </Button>
    </form>
  )
}
```

</details>

<details>
<summary>Modal Dialog</summary>

```tsx
import { Modal, Button } from '@newmindai/mecellem-ui'
import { useState } from 'react'

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>

      <Modal
        opened={isOpen}
        onClose={() => setIsOpen(false)}
        title="Confirm Action"
      >
        <p>Are you sure you want to proceed with this action?</p>
        <div className="flex gap-2 mt-4 justify-end">
          <Button variant="secondary" onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button variant="primary" onClick={() => setIsOpen(false)}>
            Confirm
          </Button>
        </div>
      </Modal>
    </>
  )
}
```

</details>

<details>
<summary>Data Visualization</summary>

```tsx
import { SimpleBarChart, DonutChart, Card } from '@newmindai/mecellem-ui'

const salesData = [
  { name: 'Jan', value: 4000 },
  { name: 'Feb', value: 3000 },
  { name: 'Mar', value: 6000 },
  { name: 'Apr', value: 8000 },
  { name: 'May', value: 5000 },
]

function Dashboard() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Card variant="elevated" className="p-4">
        <h3>Monthly Sales</h3>
        <SimpleBarChart data={salesData} />
      </Card>

      <Card variant="elevated" className="p-4">
        <h3>Distribution</h3>
        <DonutChart data={salesData} />
      </Card>
    </div>
  )
}
```

</details>

<details>
<summary>Page Layout</summary>

```tsx
import {
  PageLayout,
  PageHeader,
  MainContent,
  SideNav,
  Stack,
  Card
} from '@newmindai/mecellem-ui'

function DashboardPage() {
  return (
    <PageLayout>
      <SideNav>
        {/* Navigation items */}
      </SideNav>
      <PageHeader
        title="Dashboard"
        subtitle="Welcome back, User"
      />
      <MainContent>
        <Stack spacing={16}>
          <Card variant="elevated">Analytics Overview</Card>
          <Card variant="elevated">Recent Activity</Card>
        </Stack>
      </MainContent>
    </PageLayout>
  )
}
```

</details>

---

## Theming

Mecellem UI uses CSS variables for theming, making it easy to customize colors, typography, and spacing.

### Customizing Colors

```css
:root {
  /* Primary Brand Color */
  --color-primary-50: #faf5ff;
  --color-primary-100: #f3e8ff;
  --color-primary-200: #e9d5ff;
  --color-primary-300: #d8b4fe;
  --color-primary-400: #c084fc;
  --color-primary-500: #a855f7;
  --color-primary-600: #9333ea;
  --color-primary-700: #7c3aed;
  --color-primary-800: #6b21a8;
  --color-primary-900: #581c87;

  /* Semantic Colors */
  --color-success-500: #22c55e;
  --color-warning-500: #f59e0b;
  --color-error-500: #ef4444;
  --color-info-500: #3b82f6;
}
```

### Color Scales

| Scale | Default | Usage |
|-------|---------|-------|
| primary | Purple | Brand color, primary actions |
| info | Blue | Informational elements, links |
| success | Green | Success states, confirmations |
| warning | Amber | Warning states, cautions |
| error | Red | Error states, destructive actions |
| text | Gray | Typography, borders |

---

## Icons

Icons are provided through the companion `@newmindai/mecellem-icons` package. Icons are automatically re-exported from this package for convenience:

```tsx
import { Button, SearchIcon, UserIcon } from '@newmindai/mecellem-ui'

<Button leftIcon={<SearchIcon size={16} />}>
  Search
</Button>
```

For standalone icon usage, see the [Mecellem Icons documentation](https://www.npmjs.com/package/@newmindai/mecellem-icons).

---

## TypeScript Support

Mecellem UI is written in TypeScript and provides comprehensive type definitions:

```tsx
import type { ButtonProps, CardProps, InputProps } from '@newmindai/mecellem-ui'

interface MyButtonProps extends ButtonProps {
  customProp?: string
}

const buttonConfig: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  disabled: false,
}
```

---

## Browser Support

| Chrome | Firefox | Safari | Edge |
|--------|---------|--------|------|
| Latest | Latest | Latest | Latest |

---

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

---

## Security

If you discover a security vulnerability, please send an email to admin@newmind.ai. All security vulnerabilities will be promptly addressed.

---

## License

This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.

```
Copyright 2026 Newmind AI

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```

---

## Related Packages

| Package | Description |
|---------|-------------|
| [@newmindai/mecellem-icons](https://www.npmjs.com/package/@newmindai/mecellem-icons) | 765+ production-ready icons |

---

<div align="center">

**Built with care by [NewMind AI](https://newmind.ai)**

*Empowering enterprises with modern, accessible, and beautiful user interfaces.*

[Website](https://newmind.ai) · [GitHub](https://github.com/newmindai) · [npm](https://www.npmjs.com/~newmindai)

</div>