@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 styles (choose one approach)

If your app already uses Tailwind (recommended), import the library styles into your global CSS so Tailwind can generate both your app utilities and the library utilities:

@import "tailwindcss";
@import "adminium/styles/global.css";

If you do not use Tailwind in the host app, import the precompiled CSS instead (your app won't have Tailwind utilities like lg:flex):

import "adminium/styles/adminium.css";

If you need style isolation later, we can reintroduce a scoped build that prefixes selectors with a wrapper class.

2. Use the components

import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  Badge,
} from "adminium";

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Hello from Adminium 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