@marcusjonsson2/mcui

v0.2.0

Published

2 days ago

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

0High
0Medium
0Low

marcusjonsson2

react components tailwind ui design-system accessible

McUI

Minimal Code. Maximum UI.

A modern React component library built dark-mode first, styled with Tailwind CSS, and shipped with full TypeScript support. Drop it in and start building — no boilerplate required.

What's included

Dark-mode first — uses Tailwind's standard dark class pattern
Accessible — semantic HTML and ARIA throughout
Composable — small API, import only what you need
Custom design tokens — mc-* colors and shadows via CSS variables
TypeScript ready — full type definitions included out of the box

Requirements

McUI expects the following in your project before you install:

| Dependency | Version | |---|---| | react | React 18 or 19 (^18 \|\| ^19 in package.json) | | react-dom | Same as react | | tailwindcss | ^4 | | lucide-react | ^0.577.0 | | framer-motion | ^12 (optional peer; install if you use components that animate, e.g. modal, dropdown, toast) |

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

Installation

npm install @marcusjonsson2/mcui

Then install peer dependencies if you haven't already:

npm install react react-dom tailwindcss lucide-react

If you use motion-powered components (modal, side panel, dropdown, accordion, toast, etc.), add Framer Motion:

npm install framer-motion@^12

Setup

1. Import the stylesheet

Add this once in your app entry or global stylesheet. The package exports CSS at @marcusjonsson2/mcui/style.css (not dist/style.css).

JavaScript entry (e.g. main.tsx):

import '@marcusjonsson2/mcui/style.css';

Tailwind v4 / global CSS (e.g. globals.css):

@import "@marcusjonsson2/mcui/style.css";

This loads McUI's CSS variables and design tokens. It does not replace your Tailwind stylesheet — import both.

2. Enable dark mode

Set the .dark class on your root element:

<html class="dark">

McUI follows Tailwind's class-based dark mode strategy, so this is all you need.

Usage

Basic example

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

For advanced use cases, McToastContext is exported directly so you can integrate with your own state or event system.

Components

UI

McAccordion · McAlert · McAvatar · McBadge · McButton · McCard · McCheckbox · McDropdown · McInput · McModal · McPagination · McSelect · McSidepanel · McSkeleton · McStepper · McSwitch · McTabs · McTextarea · McTooltip

Toast

McToastProvider · useToast · McToastContext

Development

# Run Storybook — live component docs and visual tests
npm run storybook   # → http://localhost:6006

# Build the library
npm run build       # output goes to dist/

License

MIT