@newmindai/mecellem-ui

v0.1.15

Published

2 days ago

Mecellem Design System

0High
0Medium
0Low

newmindai

mecellem ui react components design-system tailwindcss

Mecellem UI

Enterprise-Grade React Component Library

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

Documentation · Components · Examples · Contributing

About

Mecellem UI is the official design system developed by NewMind AI to support Mecellem Dynamics' 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

npm install @newmindai/mecellem-ui

# Yarn
yarn add @newmindai/mecellem-ui

# pnpm
pnpm add @newmindai/mecellem-ui

# Bun
bun add @newmindai/mecellem-ui

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:

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

2. Use Components

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

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>

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="[email protected]"
      />

      <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>
  )
}

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>
    </>
  )
}

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>
  )
}

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>
  )
}

Theming

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

Customizing Colors

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

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

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

For standalone icon usage, see the Mecellem Icons documentation.

TypeScript Support

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

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 for details.

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

Security

If you discover a security vulnerability, please send an email to [email protected]. All security vulnerabilities will be promptly addressed.

License

This project is licensed under the Apache License 2.0 - see the 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 | 765+ production-ready icons |

Built with care by NewMind AI

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

Website · GitHub · npm