DOCUMENTATION
Home Components Tools GitHub
GETTING STARTED

TEMPLIX
DOCS.

Templix is a library of standalone HTML & CSS components. Every template is a single self-contained file — no build step, no npm install, no framework. Open the browser, copy, paste, ship.

Zero setup

No package manager, no bundler, no config file. Every template opens in a browser as-is.

MIT licensed

Use in personal and commercial projects. No attribution required, though it's appreciated.

Copy-paste workflow

See a component you like, hit copy in the viewer, paste it into your project. Done.

Open source

Fork it, extend it, submit templates. The library grows better with community contributions.

Quick Start

The fastest way to use a Templix component is the copy-paste method. No install required.

1
Browse the component library
Go to components.html and filter by category or theme to find what you need.
2
Open the viewer
Click any card to open the full-screen preview with HTML, CSS, and JS split into separate tabs.
3
Copy the code
Hit the Copy button on the tab you need. HTML, CSS, and JS are extracted separately so you can take only what's relevant.
4
Paste into your project
Drop the markup into your HTML, the styles into your CSS file (or a style block), and the script at the bottom of your body.
Tip: You can also clone or download the repo and open any template file directly in your browser — each one is fully self-contained.

Clone the repo

BASH
git clone https://github.com/muaves/templix.git cd templix # open any template directly open navbars/glass.html

File Structure

Templates are organised by category. Each template is a single .html file that includes its own styles and scripts inline.

templix/ ├── index.html ← landing page ├── components.html ← full component browser ├── viewer.html ← template preview + code view ├── about.html ├── assets/ │ └── templates.js ← central registry ├── docs/ │ └── index.html ← you are here ├── tools/ │ ├── color-grabber.html │ ├── border-radius.html │ ├── shadow-gen.html │ └── gradient-gen.html ├── navbars/ ← navbar templates ├── heroes/ ├── footers/ ├── modals/ ├── tables/ ├── galleries/ ├── pricing/ └── sidebars/

Copy & Paste

Each template file is split into three parts in the viewer. You can copy all three together or grab just the pieces you need:

HTML tab

The markup only — styles and scripts stripped out. Paste directly into your body content.

CSS tab

The extracted style block. Drop into your stylesheet or a <style> tag.

JS tab

Extracted JavaScript if the component has any. Paste before </body>.

Full file

Click Copy on the top-level button to grab the entire HTML file as-is, including all three parts.

Customising Templates

Every template is plain HTML and CSS — you can change anything directly. The most common tweaks are changing colors, fonts, and spacing.

Fonts: Templates use Google Fonts loaded via CDN link. Swap the link href to change the font family, then update the font-family declarations.

Changing the color scheme

Most templates use inline CSS — find the color hex values and replace them. For larger changes, look for a :root { } block at the top of the style tag — variables are defined there.

CSS
/* override any template's root vars */ :root { --bg: #0a0905; --orange: #e8820a; /* swap this for your brand color */ --text: #e8e2d0; --muted: #6b6452; }

CSS Variables

The shared design system uses these CSS custom properties. Override them in your own stylesheet to retheme any component without touching its source:

CSS
:root { /* backgrounds */ --bg: #0a0905; /* page background */ --card: #111009; /* card / surface */ --border: #1e1b12; /* default border */ /* accent */ --orange: #e8820a; /* primary accent */ --orange-light: #f5a832; /* hover state */ /* text */ --text: #e8e2d0; /* primary text */ --muted: #6b6452; /* secondary / disabled */ }

Adding a Template

Contributing a new template is two steps. First, drop your HTML file in the right category folder. Then register it in assets/templates.js.

1
Create the template file
Make a self-contained HTML file. Inline all styles in a <style> tag and any scripts in a <script> tag. No external dependencies except Google Fonts.
2
Drop it in the right folder
e.g. navbars/my-navbar.html
3
Register it in templates.js
Add one object to the right array in assets/templates.js. That's the entire process.
JS
navbars: [ ... existing entries ... { id: "nav-my-navbar", name: "My Navbar", file: "navbars/my-navbar.html", tags: ["dark", "minimal"], desc: "One sentence describing what makes this special." }, ],

Contribution Guidelines

Quality over quantity. A template should look good, use clean markup, and solve a real design problem. Don't submit generic Bootstrap-style components.
Self-contained
One HTML file. All CSS inline. Only external dependency allowed: Google Fonts CDN.
No framework dependencies
No Bootstrap, Tailwind, Alpine, React. Vanilla HTML, CSS, and JS only.
Readable code
Consistent indentation. Avoid deeply nested or cryptic selectors. Someone should be able to understand it without comments.
Responsive
Should look reasonable on mobile. At minimum, doesn't break. Ideally has a proper responsive layout.

Tags Reference

Tags are used in the component browser for filtering. Use only established tags from this list when registering a new template:

Theme

dark light

Style

minimalcolorfulglassneonretrocinematicsplitsaasmegactanewsletter

Function

interactivedashboardportfoliogridmasonrystripeddrawerformalert