npm package: @marcusjonsson2/mcui
Description: Minimal React component library - Tailwind CSS, dark-mode first, WCAG 2.1 compliant.
Latest version: 0.3.0

# McUI

**Minimal code. Maximum UI.**

A React component library built dark-mode first, styled with Tailwind CSS v4, and shipped with TypeScript out of the box.

---

## Requirements

| Dependency | Version |
|---|---|
| `react` / `react-dom` | 18 or 19 |
| `tailwindcss` | ^4 |
| `lucide-react` | ^0.577.0 |
| `framer-motion` | ^12 *(optional — needed for modal, dropdown, toast, etc.)* |

Tailwind must be configured in your own project. McUI ships its own stylesheet for design tokens, but utility classes like `p-6` and `max-w-sm` are resolved by your setup.

---

## Installation

```bash
npm install @marcusjonsson2/mcui
```

Install peer deps you don't already have:

```bash
npm install react react-dom tailwindcss lucide-react
```

Using any animated component (modal, side panel, accordion, toast...)?

```bash
npm install framer-motion@^12
```

---

## Setup

### 1. Import the stylesheet

Import once - in your app entry or global CSS. The package exports its styles at `@marcusjonsson2/mcui/style.css` (not `dist/style.css`).

```ts
// main.tsx
import '@marcusjonsson2/mcui/style.css';
```

```css
/* globals.css (Tailwind v4) */
@import "@marcusjonsson2/mcui/style.css";
```

This brings in McUI's CSS variables and design tokens. It doesn't replace your Tailwind stylesheet — import both.

### 2. Enable dark mode

```html
<html class="dark">
```

McUI uses Tailwind's class-based dark mode strategy. That's all it needs.

---

## Usage

> **Next.js App Router:** McUI components are interactive, so add `"use client";` at the top of any file that imports them.

```tsx
import { McButton, McInput, McCard } from '@marcusjonsson2/mcui';
import { useState } from 'react';

export default function LoginForm() {
  const [email, setEmail] = useState('');

  return (
    <McCard className="p-6 max-w-sm mx-auto mt-10">
      <h2 className="text-xl font-bold text-mc-text-primary mb-4">
        Welcome Back
      </h2>
      <div className="space-y-4">
        <McInput
          label="Email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <McButton variant="primary" className="w-full">
          Sign In
        </McButton>
      </div>
    </McCard>
  );
}
```

### Toasts

Wrap your app with `McToastProvider`, then call `useToast()` anywhere inside it:

```tsx
import { McButton, McToastProvider, useToast } from '@marcusjonsson2/mcui';

function App() {
  return (
    <McToastProvider>
      <YourRoutes />
    </McToastProvider>
  );
}

function SaveButton() {
  const { toast } = useToast();

  return (
    <McButton onClick={() => toast({ message: 'Changes saved!', variant: 'success' })}>
      Save
    </McButton>
  );
}
```

Need more control? `McToastContext` is exported directly for custom integrations.

---

## Components

`McAccordion` · `McAlert` · `McAvatar` · `McBadge` · `McButton` · `McCard` · `McCheckbox` · `McDropdown` · `McInput` · `McModal` · `McPagination` · `McRadioGroup` · `McRadioItem` · `McSelect` · `McSidePanel` · `McSkeleton` · `McStepper` · `McSwitch` · `McTabs` · `McTextarea` · `McTooltip`

**Toast:** `McToastProvider` · `useToast` · `McToastContext`

---

## License

[MIT](./LICENSE)