Documentation · Metaroic

Getting started

Metaroic is a Vite + Tailwind CSS v4 + Alpine.js admin template. Every page is plain HTML built from shared partials, so there is no framework to learn before you can ship.

You need Node.js 20 or newer and npm.

Installation

Unzip the package, then install dependencies and start the dev server.

cd metaroic
npm install
npm run dev

The site opens on http://localhost:5180. Edits to HTML, CSS and JS hot-reload.

Project structure

metaroic/
  index.html            landing page linking every demo
  auth/                 sign-in, sign-up, 2FA, forgot/reset password
  utility/              404, 500, maintenance, coming soon
  dashboards/ apps/ pages/   demo content by type
  components/ forms/ tables/ charts/ modals/ widgets/
  starter-kit/          empty shell to copy for new pages
  docs/                 this documentation
  src/partials/         shared HTML (sidebar, topbar, footer...)
  src/js/               main.js, theme.js, components/, pages/
  src/styles/           tokens.css (design tokens), main.css
  plugins/html-includes.js   the include resolver
  vite.config.js        one entry per page

Partials & includes

Vite has no built-in HTML templating, so plugins/html-includes.js replaces each include comment with the file it points to, in dev and in the production build.

<!--@include ../src/partials/sidebar-dark.html -->

Paths starting with / resolve from the project root; other paths resolve from the including file.

Starter kit

starter-kit/index.html is an empty shell with a sidebar, topbar, theming, RTL and the command palette wired up. To add a page:

Copy starter-kit/index.html to a new file, e.g. pages/reports.html.
Change the <title>, the page heading and the content inside <main>.
Register it in vite.config.js so it is included in production builds:

'pages-reports': 'pages/reports.html',

Keep the x-data="{}" on <body>; without an ancestor scope Alpine directives can silently fail to bind on large pages.

Colors & design tokens

All color, type, spacing, radius and shadow values live in src/styles/tokens.css as CSS custom properties. main.css maps them into Tailwind utilities, so changing one value re-themes every component.

:root {
  --color-brand-600: #24746a;   /* primary buttons, links */
  --color-accent-500: #f8800a;  /* highlights, badges */
}

Dark mode overrides sit under [data-theme="dark"]. The theme choice (light, dark, system) is stored in localStorage under metaroic:theme.

Fonts

The kit ships with no external font requests. Text uses the "Metaroic Sans" family name, which falls back to the system stack. To use your own font, add an @font-face rule for that family name:

@font-face {
  font-family: 'Metaroic Sans';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
}

RTL & dark mode

Layouts use logical properties (ms-, ps-, start-, end-) so right-to-left works without a separate stylesheet. Toggle it from the topbar, or set dir="rtl" on <html>. Add rtl:rotate-180 to directional icons.

Icons

Icons are Lucide, tree-shaken through src/js/icons.js. Use <i data-lucide="name"></i> in markup, then add the PascalCase import to icons.js. A missing import renders a blank icon rather than an error.

Authentication pages

Demo login for testing: demo@metaroic-demo.com / Demo@12345 (two-step code 123456). These are hard-coded for demonstration; remove them when you connect a backend.

The pages in auth/ validate on the client and fake the network call with a short delay and a toast. To connect a real backend, replace the setTimeout in submit() inside src/js/components/auth.js with your API request.

Framework editions

The metaroic-editions/ folder contains starter editions for React, Vue, Next.js, Angular, Flask, Django, Laravel and ASP.NET Core. Each has the app shell, dashboard, orders table, validated sign-in and a 404 page, using the same design tokens as this Core edition.

React, Vue, Next.js, Angular, Flask and Django were built and run during development. The Laravel and ASP.NET editions are provided as source but were not executed. See metaroic-editions/README.md for per-edition setup.

Build & deploy

npm run build     # outputs static files to dist/
npm run preview   # serves dist/ locally

Upload dist/ to any static host. Nothing runs on a server.

Browser support

Current Chrome, Edge, Firefox and Safari. Tailwind v4 requires Safari 16.4+, Chrome 111+ and Firefox 128+.

License & support

Your license is listed on your purchase receipt. For help, use the Support link on the marketplace product page.

Metaroic documentation