Documentation

Getting Started

MergeUi is a dashboard design subscription service built for developers. Get production-ready HTML/CSS templates and components that work with any tech stack.

Framework independent -- works with React, Vue, Angular, Svelte, or plain HTML.
CSS variable based -- change --merge-* variables to match your brand in seconds.
Accent color presets -- each theme ships with multiple color presets you can switch instantly.
Accessible -- ARIA labels, keyboard navigation, and WCAG AA color contrast.

Installation

Getting MergeUi into your project takes under 5 minutes.

1 Download the theme ZIP from your dashboard after subscribing.

2 Extract and copy the HTML/CSS files into your project directory.

3 Optionally customize CSS variables to match your brand colors.

4 Open the HTML file in your browser. Done!

/* Project structure after install */
your-project/
  ├── index.html
  ├── css/
  │   └── mergeui-theme.css
  └── assets/
      └── icons/

Customization

All visual values are controlled through CSS custom properties. Override them in your own stylesheet or inline to rebrand instantly.

Variable	Default	Description
--merge-color-primary	#6C5CE7	Primary brand color
--merge-color-secondary	#A78BFA	Secondary accent color
--merge-color-accent	#22D3EE	Highlight / link color
--merge-bg-primary	#06060A	Main background
--merge-bg-surface	#16161E	Card / panel background
--merge-text-primary	#F4F4F5	Primary text color
--merge-text-muted	#71717A	Secondary / muted text
--merge-border	rgba(255,255,255,0.06)	Default border color

/* Example: rebrand to your company colors */
:root {
  --merge-color-primary: #E11D48;
  --merge-color-accent: #F59E0B;
  --merge-bg-primary: #0F172A;
}

Themes

Each theme is a self-contained HTML file with all styles inlined or bundled in a single CSS file. Themes include:

Full dashboard layout (sidebar, topbar, content grid)
Pre-built widgets and chart placeholders
Multiple accent color presets
Responsive breakpoints for desktop, tablet, and mobile

Browse available themes on the Themes page.

Components

Components are individual UI pieces you can mix and match. Each component is independent with zero cross-dependencies.

Charts -- Line, Bar, Donut, Area with tooltip support
Tables -- Sortable, paginated data tables
Cards -- Stat cards, profile cards, revenue cards
Forms -- Login, search, settings forms with validation
Navigation -- Sidebar, breadcrumb, tabs
Widgets -- Calendar, activity feed, notifications

Explore all components in the Component Browser.

Responsive Design

All templates use three breakpoints following an 8px grid system:

Device	Width	Sidebar Behavior
Desktop	1280px+	Fixed sidebar
Tablet	768px - 1279px	Collapsible sidebar
Mobile	below 767px	Bottom navigation

Frequently Asked Questions

Can I use MergeUi with React / Vue / Angular?

Yes. MergeUi templates are plain HTML and CSS. You can copy the markup into JSX, Vue templates, or Angular components. All styles use CSS variables with no framework dependency.

Do I get updates after purchase?

Pro subscribers receive all new themes, components, and updates as long as the subscription is active.

Can I use MergeUi for client projects?

Yes. The Pro license allows usage in unlimited personal and client projects. Redistribution of the source files as a template product is not permitted.

How do I get support?

Reach out through our Discord community or use the contact form on the website. We typically respond within 24 hours.