@marcusjonsson2/mcui

v0.3.0

Published

3 months ago

Minimal React component library - Tailwind CSS, dark-mode first, WCAG 2.1 compliant.

Downloads

0High
0Medium
0Low

marcusjonsson2

react components tailwind ui design-system accessible

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

npm install @marcusjonsson2/mcui

Install peer deps you don't already have:

npm install react react-dom tailwindcss lucide-react

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

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

// main.tsx
import '@marcusjonsson2/mcui/style.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 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.

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:

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme