Package Exports

adminium

Readme

@metronic/ui

A beautiful, reusable React component library built with Tailwind CSS, based on the Metronic theme design system.

Features

🎨 25+ UI Components - Buttons, Cards, Dialogs, Forms, Tables, and more
🌙 Dark Mode Support - Built-in light and dark mode theming
📦 Tree Shakeable - Only import what you need
💪 TypeScript - Full type definitions included
🎯 Tailwind CSS v4 - Modern CSS with CSS variables
⚡ Radix UI Primitives - Accessible and unstyled components

Installation

npm install @metronic/ui

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom tailwindcss

Quick Start

1. Import the theme CSS

Add the theme CSS to your global styles or root layout:

// In your root layout or _app.tsx
import "@metronic/ui/styles";

Or import directly in your CSS:

@import "@metronic/ui/src/styles/theme.css";

2. Use the components

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  Badge,
} from "@metronic/ui";

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Hello from Metronic UI!</p>
        <Button variant="primary" size="md">
          Get Started
        </Button>
        <Badge variant="success" appearance="light">
          New
        </Badge>
      </CardContent>
    </Card>
  );
}

Components

Form Components

Button - Buttons with multiple variants and sizes
Input - Text inputs with addons and grouping
Textarea - Multi-line text input
Checkbox - Checkbox with indeterminate state
RadioGroup - Radio button groups
Select - Dropdown select with search
Switch - Toggle switch
Slider - Range slider
Label - Form labels

Layout Components

Card - Content container with header/footer
Separator - Visual dividers
Tabs - Tab navigation
Accordion - Collapsible content sections
ScrollArea - Custom scrollbar container

Overlay Components

Dialog - Modal dialogs
Popover - Floating content
Tooltip - Hover tooltips
DropdownMenu - Context menus

Display Components

Badge - Status indicators
Avatar - User avatars
Alert - Feedback messages
Progress - Progress indicators
Skeleton - Loading placeholders
Table - Data tables
Breadcrumb - Navigation breadcrumbs

Hooks

import { useIsMobile, useCopyToClipboard, useMounted } from "@metronic/ui";

// Detect mobile viewport
const isMobile = useIsMobile();

// Copy to clipboard with feedback
const { isCopied, copyToClipboard } = useCopyToClipboard();

// Track component mount state
const mounted = useMounted();

Utility Functions

import { cn } from "@metronic/ui";

// Merge Tailwind classes intelligently
const className = cn("bg-primary text-white", isActive && "ring-2", className);

Theming

The library uses CSS custom properties for theming. Override them in your CSS:

:root {
  --primary: hsl(220, 90%, 56%);
  --primary-foreground: hsl(0, 0%, 100%);
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(240, 10%, 3.9%);
  /* ... more variables */
}

.dark {
  --primary: hsl(220, 90%, 56%);
  --primary-foreground: hsl(0, 0%, 100%);
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
}

Building the Package

# Install dependencies
npm install

# Build the package
npm run build

# Development mode with watch
npm run dev

License

MIT

adminium