matcha.css
Drop-in semantic styling library in pure CSS.
matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.
Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and want to make use of the full range of available HTML elements.
- ✓ No build steps
- ✓ No dependencies
- ✓ No JavaScript
- ✓ No configuration needed
- ✓ No refactoring required
-
✓
gzipped (can be further reduced)
🍵 Fun Fact: This very page is styled using matcha.css!
Why choose matcha.css?
- Agnostic
- Works seamlessly with any document and covers a broader range of HTML elements compared to similar libraries. It remains unobtrusive by leveraging CSS pseudo-elements and offers extensive browser support.
- Reversible
-
Simply include its
<link rel="stylesheet">to get started, and remove it whenever necessary without the need for document refactoring or cleanup. - Semantic
-
Adapts styling based on elements hierarchy, providing intuitive behaviors such as
implicit submenus
when nesting<menu>elements, required field indicator (*) when a<label>is paired with<input required>, etc. - Customizable
- Brew your own build using our custom builder to select specific features and reduce the final build size according to your project's needs.
- Open-source
- Released under the MIT License, freely available at github.com/lowlighter/matcha.
Usage
To utilize matcha.css, just include the following line in the <head> section of your document. It's that simple!
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
Assets are hosted on Vercel but matcha.css is also available on 
All published versions are available in the /v/ directory. By default, the main branch is served.
Looking to create interactive web pages in seconds? Check out mizu.js!
<script src="https://mizu.sh/client.js" defer></script>À la carte
Each subdirectory available in github.com/lowlighter/matcha/styles is also served directly from this
website. For example, if you only wish to include the @syntax-highlighting styles rather than using the default build or a custom one, you could use:
<link rel="stylesheet" href="https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css">
However note that unless you provide your own CSS variables, you will most likely need to include the @root package as it contains
all matcha.css variables definition.
All mod.css files are also aliased to their respective parent directories for convenience, which means you can also use:
<link rel="stylesheet" href="https://matcha.mizu.sh/@syntax-highlighting.css">Sectioning
Navigation
Headings
Flow
Collapsibles
Modals
Anchors
Abbreviations
Styling and emphasis
Annotations
Computing
Forms
Bars
Lists
Tables
Media
Extras
Layouts
Utilities
Form validation
Syntax highlighting
Code editor
Istanbul coverage reports
Shadow roots
matcha.css defines also defines its CSS variables using the :host pseudo-class, which
makes it compatible with shadow DOMs.
*The following element is contained within a shadow DOM.
It is isolated from the rest of the document so you may import matcha.css again and use other custom styles
without conflicts.
Unstyled
These elements are listed for completeness but are left unstyled by matcha.css.