METRA UI BOOTSTRAP 5 ADMIN TEMPLATE

Everything your admin interface needs
starts here.

Explore responsive dashboards, business apps and reusable UI components built with Bootstrap 5, SCSS and JavaScript. Make the MetraUI foundation your own and bring your next product to life.

Explore dashboards Browse dashboard pages
HTML PAGES189
DASHBOARD TYPES9
THEME MODES2
LAYOUT SUPPORTRTL
INCLUDED IN METRAUI
Bootstrap 5 ApexCharts SCSS RTL support Vanilla JavaScript
LIVE METRAUI DASHBOARDS

Dashboards for every team.
One familiar system.

Select a dashboard card to load its actual MetraUI page in the live preview.

A FLEXIBLE PRODUCT FOUNDATION

A complete toolkit for every team.

Dashboards, pages and practical interface tools to take your next admin product from idea to launch.

9 business dashboards

Explore sales, commerce, CRM, finance, projects, HR, logistics, support and AI workflows.

189 ready-to-use pages

Start with complete application pages, tables, forms, charts, authentication and settings.

Reusable UI components

Build consistent screens with buttons, modals, kanban boards, data tables, timelines and more.

Light and dark themes

Switch appearance and preview a comfortable workspace for different teams and environments.

Bootstrap 5 and SCSS

Use familiar Bootstrap utilities and organized SCSS to adapt the interface to your product.

Interactive data views

Present key metrics and trends with the project charts, widgets and analytics pages.

Responsive and RTL-ready

Support desktop, tablet and mobile layouts, plus right-to-left reading direction.

Business apps included

Give everyday tasks a home with project pages for chat, calendar, email, files and task management.

YOUR TEAM'S DAILY TOOLKIT

Complete application suite.

Preview the actual chat, calendar, mail and task pages. Select any preview to open the complete app.

Open app ↗

Chat & collaboration

Keep conversations close to the work.

01
Open app ↗

Calendar

Keep events and deadlines in view.

02
Open app ↗

Email & inbox

Stay on top of what needs a reply.

03
Open app ↗

Tasks & projects

Make the next step feel obvious.

04
Open app ↗

AI Image Generator

Create images from the AI workspace.

06
Open app ↗

Profile

Manage profile details and preferences.

07
Open page ↗

Error page

Show a helpful path when a page is missing.

08
Open page ↗

Coming Soon

Build anticipation for an upcoming launch.

09
A SOLID UI TOOLKIT

Everything to build a complete workspace.

Explore the components, data visualizations and interactions included with MetraUI.

UI KIT

60+ ready-to-use components

Explore Bootstrap components and custom interface patterns demonstrated in the MetraUI project.

ButtonsBadgesAlertsModalsTabsAccordionsDropdownsTooltipsOffcanvasToastsProgressPaginationFormsFile uploadsDate pickersTablesChartsAvatarsCarousel
DATA VISUALIZATION

Charts for business insights

Explore ApexCharts, Chart.js and ECharts examples styled to follow the active theme.

Explore charts ↗
INTERACTIONS

Motion with a clear purpose

Small, responsive interactions help users understand what changed and where to go next.

Scroll revealHover statesTheme switchResponsive previewsDropdown menusPreview transitionsOffcanvas navigationProgress feedback
METRAUI HELP CENTER

Answers for your next build.

Find quick guidance on the project structure, included pages, customization and getting started.

Project documentation HTML, SCSS & JavaScript Dashboards and app pages
Read the documentation
What is MetraUI built with?+

MetraUI is an HTML admin template built with Bootstrap 5, SCSS and vanilla JavaScript. Its pages use a shared project structure and reusable interface patterns.

What is included in the project?+

The project includes business dashboards, application pages, form and UI examples, chart pages, authentication screens and documentation. Browse the live dashboard and toolkit sections for previews.

How do I find a specific page or component?+

Use the project HTML pages as examples. The documentation page explains the project structure and where to find the included templates and assets.

Can I customize themes and layouts?+

Yes. Adapt SCSS variables and component styles, then use the appearance controls to preview light or dark themes, RTL direction and available layouts. Pages are designed to respond across desktop, tablet and mobile sizes.

Where can I get setup and license information?+

Read the included documentation for setup guidance. License terms depend on the marketplace license you choose; check the current ThemeForest license details before purchasing.

YOUR NEXT PROJECT STARTS HERE

Build your next admin experience with MetraUI.

Start with a complete Bootstrap admin template: explore the live dashboards, adapt the included app pages, and shape the interface around your product.

Responsive layouts Business dashboards Application pages Light and dark themes
Explore live dashboard ↗ Read the documentation