Adminium

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

Features

• 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
• CVA Variants - Type-safe component variants with Class Variance Authority

Tech Stack

• React 19+ / TypeScript 5.8
• Tailwind CSS v4 (CSS variables approach)
• Radix UI primitives
• Storybook 10 with Vitest integration
• TSUP for bundling
• Next.js 16 for demo app

Installation

npm install adminium
# or
yarn add adminium

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";

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 "adminium";

// 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 "adminium";

// 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%);
}

Development

Commands

yarn run dev          # Start Next.js development server
yarn run dev:lib      # Watch mode for library development
yarn run build        # Build library (tsup + PostCSS for CSS)
yarn run storybook    # Start Storybook dev server on port 6006
yarn run lint         # Run ESLint
yarn run format       # Format with Prettier
yarn run typecheck    # TypeScript type checking

Folder Structure

src/
├── components/
│   ├── Button/
│   │   ├── button.tsx           # Component implementation
│   │   └── Button.stories.ts    # Storybook stories
│   ├── Card/
│   │   ├── Card.tsx
│   │   └── Card.stories.tsx
│   ├── [ComponentName]/         # Each component follows this pattern
│   └── index.ts                 # Barrel export for all components
├── hooks/
│   ├── use-mobile.tsx
│   ├── use-copy-to-clipboard.ts
│   ├── use-mounted.ts
│   └── index.ts
├── lib/
│   └── utils.ts                 # cn() utility
├── styles/
│   ├── global.css               # Main CSS entry
│   └── config.reui.css          # Theme CSS variables
└── index.ts                     # Main library entry point

Build Output

• ESM: dist/index.js
• CJS: dist/index.cjs
• Types: dist/index.d.ts
• CSS: dist/styles/adminium.css

The build automatically adds "use client" directive to the bundled output for Next.js compatibility.

License

MIT