Introduction

MNEE UI is the official component library for the MNEE ecosystem. It enforces the visual language of the merchant portal — colors, typography, spacing, and states are owned by the design team and delivered as finished, unchangeable parts.

Engineers compose components and wire up data. The design system controls every pixel.

Installation

npm install @mnee-ui/ui

Then add one line to your project's globals.css:

@import "tailwindcss";
@import "@mnee-ui/ui/styles";

That's it. All design tokens are loaded from the package — you do not define or modify them.

Usage

import { Button, Badge, Card, CardHeader, CardTitle, CardContent } from "@mnee-ui/ui"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Payment received</CardTitle>
      </CardHeader>
      <CardContent>
        <Badge variant="success">Completed</Badge>
        <Button variant="primary">View details</Button>
      </CardContent>
    </Card>
  )
}

The className contract

All components accept a className prop for layout utilities only — margin, padding, width, flex, grid. It is not for overriding colors, typography, or state styles.

// ✅ Layout — correct use
<Button className="mt-4 w-full">Submit</Button>

// ❌ Style override — do not do this
<Button className="bg-purple-900 text-red-500">Submit</Button>

Color, typography, and spacing inside components are set by the design system and are not overridable via className.

Available components

| Component | Import | |-----------|--------| | Button, ButtonIcon | import { Button, ButtonIcon } from "@mnee-ui/ui" | | Badge | import { Badge } from "@mnee-ui/ui" | | Card, CardContainer | import { Card, CardContainer } from "@mnee-ui/ui" | | Input | import { Input } from "@mnee-ui/ui" | | Alert | import { Alert } from "@mnee-ui/ui" | | Skeleton | import { Skeleton } from "@mnee-ui/ui" | | Toast, ToastProvider, useToast | import { Toast, ToastProvider, useToast } from "@mnee-ui/ui" | | Modal, ModalHeader, ModalBody, ModalFooter | import { Modal } from "@mnee-ui/ui" | | Drawer | import { Drawer } from "@mnee-ui/ui" | | Table family | import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@mnee-ui/ui" | | Banner | import { Banner } from "@mnee-ui/ui" | | Icons | import { WalletIcon, ZapIcon, ... } from "@mnee-ui/ui" |

Requirements

• React 18+
• Tailwind CSS v4 (with @theme token support)
• clsx and tailwind-merge (included as dependencies)

Principles

Design-owned — Colors, typography, and spacing are set by the design team. Engineers compose components, not style them.

Semantic over literal — Components use design tokens (bg-brand, text-success-fg) rather than hardcoded hex values. Change a token once, update everywhere.

Merchant portal parity — Every component is visually identical to its counterpart in the portal. There is no design drift between the library and the product.