MUI Library v0.1.0

A Professional React UI Component Library
Built with 💜 in Africa

Features • Installation • Components • Documentation • Contributing

✨ Features

Modern Design

Responsive

Animated

Customizable

• 🎨 Modern Design System

  • Beautiful, consistent components
  • Carefully crafted with attention to detail
  • Professional color schemes and typography

• 🌓 Dark Mode Support

  • Seamless light/dark mode switching
  • Automatic system preference detection
  • Customizable color schemes

• 📱 Fully Responsive

  • Mobile-first design approach
  • Fluid layouts and breakpoints
  • Touch-friendly interactions

• ⚡ High Performance

  • Optimized bundle size
  • Efficient rendering
  • Lazy loading support

🚀 Quick Start

NPM Installation

npm install muidev

CDN Usage

You can use MuiDev directly in your HTML files via CDN without installing anything:

<!-- Add Tailwind CSS (required for styling) -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Add MuiDev via CDN -->
<script src="https://unpkg.com/muidev@0.1.1/dist/index.umd.js"></script>
<link href="https://unpkg.com/muidev@0.1.1/dist/index.css" rel="stylesheet">

You can also use a specific version or always get the latest:

<!-- Latest version -->
<script src="https://unpkg.com/muidev/dist/index.umd.js"></script>
<link href="https://unpkg.com/muidev/dist/index.css" rel="stylesheet">

<!-- Specific version -->
<script src="https://unpkg.com/muidev@0.1.1/dist/index.umd.js"></script>
<link href="https://unpkg.com/muidev@0.1.1/dist/index.css" rel="stylesheet">

Advanced Example

For a more comprehensive example including navigation, cards, and responsive layout, check out our examples directory.

Key features demonstrated in the advanced example:

• Responsive navigation bar
• Grid layout system
• Cards with gradients
• Buttons with ripple effects
• Dark/light variants
• Hover animations

Component Classes

When using MuiDev via CDN, use these CSS classes:

<!-- Buttons -->
<button class="muidev-button" data-variant="primary|secondary|light|dark" data-ripple="true|false">
    Button Text
</button>

<!-- Cards -->
<div class="muidev-card">
    Card Content
</div>

<!-- Container -->
<div class="container mx-auto">
    Centered Content
</div>

Available data-variant options for buttons:

• primary - Primary color button
• secondary - Secondary color button
• light - Light variant
• dark - Dark variant

React Usage

import { Button, Card } from 'muilibrary';
import 'muilibrary/dist/styles.css';

function App() {
  return (
    <Card className="p-6 max-w-sm mx-auto bg-gradient-to-br from-purple-500 to-indigo-600">
      <h2 className="text-2xl font-bold text-white mb-4">
        Welcome to MUI Library
      </h2>
      <Button 
        variant="light"
        size="large"
        withRipple
        className="w-full"
      >
        Get Started
      </Button>
    </Card>
  );
}

📦 Components

Navigation Components

import { Navbar, Sidebar, Breadcrumb, Tabs } from 'muilibrary';

// Modern Navbar with Animations
<Navbar
  brand={{
    logo: "/logo.svg",
    name: "Your Brand"
  }}
  items={[
    { label: 'Dashboard', href: '/', icon: HomeIcon },
    { label: 'Products', href: '/products', icon: CubeIcon },
    { label: 'Settings', href: '/settings', icon: CogIcon }
  ]}
  theme="gradient"
  animated
/>

// Animated Sidebar with Nested Items
<Sidebar
  items={sidebarItems}
  collapsed={isCollapsed}
  onCollapse={toggleCollapse}
  theme="dark"
  withIcons
  animated
/>

Data Display Components

// Modern Data Table
<Table
  data={users}
  columns={[
    { 
      header: 'Name',
      accessor: 'name',
      sortable: true,
      cell: (value) => (
        <div className="flex items-center gap-2">
          <Avatar src={value.avatar} />
          <span>{value.fullName}</span>
        </div>
      )
    },
    // ... more columns
  ]}
  pagination
  search
  filters
/>

// Interactive Cards
<Card
  hoverable
  withRipple
  className="bg-gradient-to-r from-purple-500 to-pink-500"
>
  <CardHeader
    title="Premium Plan"
    subtitle="Most Popular"
    icon={<CrownIcon className="text-yellow-400" />}
  />
  <CardBody>
    <PriceTag amount={99} currency="USD" period="month" />
    <FeatureList features={premiumFeatures} />
  </CardBody>
  <CardFooter>
    <Button variant="light" fullWidth>
      Choose Plan
    </Button>
  </CardFooter>
</Card>

Form Components

// Modern Form Elements
<Form onSubmit={handleSubmit}>
  <Input
    label="Email"
    type="email"
    placeholder="john@example.com"
    leftIcon={<EmailIcon />}
    validation={{
      required: 'Email is required',
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: 'Invalid email address'
      }
    }}
    animated
  />
  
  <Select
    label="Country"
    options={countries}
    searchable
    multiSelect
    withFlags
    animated
  />
  
  <Button
    type="submit"
    variant="gradient"
    loading={isSubmitting}
    loadingText="Saving..."
    withRipple
  >
    Submit
  </Button>
</Form>

🎨 Customization

Theme Customization

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f5f3ff',
          100: '#ede9fe',
          200: '#ddd6fe',
          300: '#c4b5fd',
          400: '#a78bfa',
          500: '#8b5cf6',
          600: '#7c3aed',
          700: '#6d28d9',
          800: '#5b21b6',
          900: '#4c1d95',
        },
      },
      animation: {
        'ripple': 'ripple 0.6s linear',
        'slide-up': 'slideUp 0.2s ease-out',
        'fade-in': 'fadeIn 0.2s ease-out',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

📖 Documentation

Visit our documentation site for:

• Comprehensive API reference
• Interactive examples
• Theme customization guide
• Best practices
• Migration guides
• Contribution guidelines

🤝 Contributing

We welcome contributions! See our Contributing Guide for details.

👥 Team

Telvin Teum Creator & Maintainer

Samuel Dev Core Contributor

Proudly Made in Kenya

_{Copyright 2024 MUI Library. Released under the MIT License.}