Make MetraUI your own.

MetraUI is a responsive Bootstrap 5 admin template with ready-made dashboards and workflow pages for sales, ecommerce, CRM, finance, logistics, HR, projects, support, and AI. It also includes reusable UI examples, forms, authentication screens, and plugin demos.

1. Install Node.js and npm.

   Use a supported Node.js LTS release. Open a terminal in the project folder containing package.json.

2. Install dependencies.

   npm install

3. Start development.

   npm run dev

   The script compiles SCSS, assembles HTML template parts, copies assets and dependencies, and opens a BrowserSync preview. Keep the terminal running while editing.

4. Make your changes in src.

   Existing HTML, SCSS, and JavaScript files are watched. Restart the command after adding files, changing dependencies, or editing the build configuration.

Pages use HTML include comments to share their layout. Edit top-navigation.html or side-navigation.html in src/html/template-parts/ to update the generated navigation throughout the project.

<!-- include document-head.html"-->
<!-- include top-navigation.html"-->
<!-- include side-navigation.html"-->
<!-- include site-footer.html"-->
<!-- include common-scripts.html"-->

Default document attributes are in template-parts/document-head.html. Saved browser preferences may override them. Explore the switcher to preview layout options. RTL also needs the Bootstrap RTL stylesheet.

Start with src/assets/scss/_variables.scss for theme colors. The main stylesheet entry is src/assets/scss/styles.scss. Add new SCSS modules to its existing import structure.

.my-panel {
  background: var(--theme-custom-white);
  color: var(--theme-default-text-color);
  border: 1px solid var(--theme-default-border);
}
.my-accent {
  color: rgb(var(--theme-secondary-rgb));
}

Reuse fs-* size classes, Bootstrap font weights, text-muted, and spacing utilities. Prefer the existing card, button, table, and form classes. Check your result in light and dark modes and avoid hardcoded white backgrounds.

The component pages provide ready-to-use examples. Where available, select View markup to inspect example code through the existing Prism integration.

<div class="card custom-card">
  <div class="card-header">
    <h2 class="card-title mb-0">Project summary</h2>
  </div>
  <div class="card-body">
    <p class="text-muted">Your content goes here.</p>
    <button class="btn btn-primary" type="button">Continue</button>
  </div>
</div>

Give inputs visible labels. Use unique IDs for tabs, modals, and accordions, and make sure their Bootstrap target attributes match those IDs.

1. Copy a similar page into src/html/.

   Keep its shared includes and retain only the plugins you need.

2. Replace the page content.

   Update its title, breadcrumb, labels, sample records, and component IDs.

3. Add the navigation link.

   Edit src/html/template-parts/side-navigation.html and link to the exact filename.

4. Add page assets.

   Place scripts in src/assets/js/. Add a standalone stylesheet in src/assets/css/, or import a new SCSS module into styles.scss.

5. Restart and verify.

   Restart npm run dev to generate newly added files. Check links, mobile layout, keyboard access, and both theme modes.

Load the plugin stylesheet and library before its page initialization script. Copy asset paths from a working example. Installed versions are recorded in package.json and the lockfile.

Page scripts contain example table records and chart series. Replace them with application data while keeping the structure each plugin expects. Validate API responses and handle loading, empty, and error states.

Use the script theme palette or concrete computed colors for charts. An unresolved CSS variable can produce incorrect plugin colors. Preserve theme updates when modifying chart options.

Google Maps requires your own active browser API key and map ID in src/assets/js/google-maps-config.js. Enable Maps JavaScript API and billing in the associated Google Cloud project. Restrict the browser key to your allowed websites and required APIs.

A deleted project or disabled billing cannot be fixed through page styling. Check the browser console for the service error and correct the account configuration.

Leaflet tile services and other externally loaded assets need a working internet connection. Preserve provider attribution and verify service requirements for your deployment.

The build copies installed dependencies into dist/assets/libs and source assets into dist/assets. Use the plugin paths shown in an existing page rather than guessing a package's output location.

1. Load the required plugin stylesheet in the page head.
2. Load the plugin library before its initialization script.
3. Initialize after the matching page elements exist.
4. Include only the page plugins you actually use.

Keep custom images in src/assets/images. Replace a brand image with a similarly sized asset and update its alternate text. Restart development after adding assets so the initial copy picks them up.

Build layouts with Bootstrap rows and responsive columns. Allow controls to wrap and put wide tables inside table-responsive containers. Avoid fixed page widths and test content at phone, tablet, and desktop sizes.

• Give form inputs visible labels and associate them using for and id.
• Use buttons for actions and links for navigation.
• Keep focus visible and verify every interaction with the keyboard.
• Provide useful image alternative text and hide decorative icons from assistive technology.
• Check chart legends and text contrast in both theme modes.
• Include loading, empty, success, and failure feedback.

1. Generate the latest output.

   Run npm run dev and wait for compilation and copying to finish. This project currently does not define a separate production build command.

2. Upload dist contents.

   Stop the preview and upload the contents of dist to your static host or server. Preserve the html/ and assets/ directory structure.

3. Configure your starting page.

   The main entry is html/index.html. Set your host default route or redirect accordingly.

4. Verify the live application.

   Check asset links, external services, API domain restrictions, backend connections, and responsive layouts.

Keep a backup or version-controlled copy before making broad changes. Separate application-specific scripts and styles from third-party libraries so dependency updates are easier to review.

• Record changes to shared template parts and theme variables.
• Keep the lockfile with the project to preserve dependency resolution.
• Review plugin release notes before updating packages.
• After updates, test navigation, forms, charts, tables, and external services.
• Do not copy private credentials into delivered browser assets.

The package currently has no automated test suite configured. Review console errors and verify your own application workflows before handing over a release.

Before handing over

• Replace sample content, images, and links.
• Connect authentication, APIs, and meaningful button actions.
• Test phone, tablet, desktop, and both theme modes.
• Check labels, keyboard access, loading, and empty states.
• Provide setup notes for your application-specific changes.

This link opens your email application; it does not submit a web form or send your message automatically.

Looking for answers about individual interface components? Browse the full FAQ page.