@webbyx/metronic

Themeable, configurable React UI library — 78 primitives, 7 prebuilt layouts, and one provider that wires color mode, theme overrides, and your router. Built on Tailwind CSS v4, shadcn/ui, and Radix UI.

📘 Official docs & live playground: https://docs-webbyx-metronic.vercel.app 📦 npm: https://www.npmjs.com/package/@webbyx/metronic

Installation

yarn add @webbyx/metronic

The barrel bundle imports every peer eagerly, so npm 7+ will auto-install them. If you're on an older client (or pnpm with strict peers), install them yourself:

yarn add \
  react react-dom \
  tailwindcss tailwind-merge tw-animate-css \
  class-variance-authority clsx \
  radix-ui lucide-react @remixicon/react \
  motion \
  react-hook-form @hookform/resolvers zod \
  input-otp react-aria-components react-day-picker date-fns \
  @tanstack/react-query @tanstack/react-table \
  @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable \
  @headless-tree/core @headless-tree/react \
  embla-carousel-react embla-carousel-autoplay \
  react-resizable-panels react-aspect-ratio \
  recharts apexcharts react-apexcharts \
  leaflet react-leaflet \
  sonner cmdk vaul \
  react-wrap-balancer react-i18next

Grouped by what they're for:

| Group | Packages | | ------------ | --------------------------------------------------------------------------------- | | React + CSS | react, react-dom, tailwindcss (v4), tailwind-merge, tw-animate-css, class-variance-authority, clsx | | Primitives | radix-ui, lucide-react, @remixicon/react | | Animation | motion | | Forms | react-hook-form, @hookform/resolvers, zod, input-otp, react-aria-components, react-day-picker, date-fns | | Tables / DnD | @tanstack/react-query, @tanstack/react-table, @dnd-kit/{core,modifiers,sortable}, @headless-tree/{core,react} | | Carousel / panels | embla-carousel-react, embla-carousel-autoplay, react-resizable-panels, react-aspect-ratio | | Charts | recharts, apexcharts, react-apexcharts | | Maps | leaflet, react-leaflet | | Overlays | sonner (toaster), cmdk (command palette), vaul (drawer) | | Misc | react-wrap-balancer, react-i18next |

Optional: @tanstack/react-query-devtools (only if you mount the devtools panel yourself).

Tailwind v4 required. globals.css does @import 'tailwindcss'; — make sure your app is on Tailwind v4 (tailwindcss@^4). The package will not work on Tailwind v3.

yarn add \
  react react-dom \
  tailwindcss tailwind-merge tw-animate-css \
  class-variance-authority clsx \
  radix-ui lucide-react @remixicon/react \
  motion \
  react-hook-form @hookform/resolvers zod \
  input-otp react-aria-components react-day-picker date-fns \
  @tanstack/react-query @tanstack/react-table \
  @dnd-kit/core @dnd-kit/modifiers @dnd-kit/sortable \
  @headless-tree/core @headless-tree/react \
  embla-carousel-react embla-carousel-autoplay \
  react-resizable-panels react-aspect-ratio \
  recharts apexcharts react-apexcharts \
  leaflet react-leaflet \
  sonner cmdk vaul \
  react-wrap-balancer react-i18next

Grouped by what they're for:

| Group | Packages | | ------------ | --------------------------------------------------------------------------------- | | React + CSS | react, react-dom, tailwindcss (v4), tailwind-merge, tw-animate-css, class-variance-authority, clsx | | Primitives | radix-ui, lucide-react, @remixicon/react | | Animation | motion | | Forms | react-hook-form, @hookform/resolvers, zod, input-otp, react-aria-components, react-day-picker, date-fns | | Tables / DnD | @tanstack/react-query, @tanstack/react-table, @dnd-kit/{core,modifiers,sortable}, @headless-tree/{core,react} | | Carousel / panels | embla-carousel-react, embla-carousel-autoplay, react-resizable-panels, react-aspect-ratio | | Charts | recharts, apexcharts, react-apexcharts | | Maps | leaflet, react-leaflet | | Overlays | sonner (toaster), cmdk (command palette), vaul (drawer) | | Misc | react-wrap-balancer, react-i18next |

Optional: @tanstack/react-query-devtools (only if you mount the devtools panel yourself).

Tailwind v4 required. globals.css does @import 'tailwindcss'; — make sure your app is on Tailwind v4 (tailwindcss@^4). The package will not work on Tailwind v3.

Next steps

The full setup walkthrough — globals.css wiring, MetronicProvider mount for the Pages Router and the App Router, picking a layout, customizing the theme, and toggling dark mode — lives in docs/getting-started.md. Browse it in the live playground at https://docs-webbyx-metronic.vercel.app/docs/getting-started.

Scaffolder CLI

A zero-dependency Node CLI ships in the package — same scaffolds, no AI tokens, runs identically on macOS / Windows / Ubuntu (Node ≥ 18):

npx webbyx-metronic-scaffold setup --router=app --storage-key=acme:settings
npx webbyx-metronic-scaffold layout --layout=Crm --brand=Acme
npx webbyx-metronic-scaffold component --name=Button

npx webbyx-metronic-scaffold --help prints the full reference.

Claude Code skills

Four installable Claude Code skills wrap the workflows above — webbyx-metronic-setup, webbyx-metronic-layout, webbyx-metronic-component, webbyx-metronic-theme. The first three lead with the CLI; the last covers the judgment-heavy theming case. After install:

mkdir -p ~/.claude/skills
cp -R node_modules/@webbyx/metronic/skills/webbyx-metronic-* ~/.claude/skills/

See skills/README.md for per-project install, Windows instructions, and what each skill does.

License

MIT