Material 3 components
for the consoles you ship
Lit web components for admin UIs and dashboards: tables, logs, forms and charts, each a package of its own. Render them on the server and use them from any framework.
79 packages · tested in Chromium, Firefox and WebKit · MIT licensed
| Route | p95 | Errors |
|---|---|---|
| GET /v1/invoices | 41 ms | 0.01% |
| POST /v1/payments | 128 ms | 0.07% |
| GET /v1/customers | 36 ms | 0.00% |
Install one component, not a framework. Each element is a small package of its own.
What you get
Ship only what you use
Every component is its own package, and packages with several elements have one entry point per element. A size budget in CI keeps each one small.
Rendered on the server
Every element renders with Lit SSR and hydrates without changing what it shows. CI checks it on each change.
Built for consoles
Tables with paging, a live log viewer, usage meters, key value editors, code fields and charts, next to the usual buttons and fields.
Accessible from the start
Keyboard paths, labels that reach across shadow roots, and an axe check in the tests of every component.
Themed with tokens
Material 3 colour, type and shape tokens as CSS custom properties, light and dark mode, and a theme builder for your brand colour.
How it works
- 1
Link the tokens
One stylesheet,
@lit-material/tokens/css/index.css, gives every component its colours, type and shapes. - 2
Install a component
npm install @lit-material/button. Only that button and Lit come with it. - 3
Write the tag
<lit-material-button>Save</lit-material-button>in HTML, React, Vue or Angular.
Small, and checked to stay that way
Measured on every build: each package bundled alone, minified and gzipped, and held to a limit in CI.
113
Elements in 79 packages, from buttons to log viewers.
2.6KB
Median package size, gzipped and bundled on its own without Lit.
3
Browsers every test runs in: Chromium, Firefox and WebKit.
In use today
- The rws admin UI: Live traffic, upstreams, certificates and logs for the rws web server.
- HITOP: A web app for sending HTTP requests, keeping collections and running tests.
- rws8.tech: The rws website and its 2,000 docs pages, rendered on the server.
Questions
Do I need a build step or to know Lit?
No. The packages are standard ES modules that load in the browser as they are, and you use them as HTML elements. Lit comes along as their shared dependency; you only write Lit if you want to.
Does it work with React, Vue or Angular?
Yes. They are custom elements, so there is no wrapper package. The frameworks guide shows the one setting each framework needs.
Can I render it on the server?
Yes, with Lit SSR. Every element is rendered and hydrated in CI on each change, and this site is rendered the same way.
How big is it?
Most packages are 2 to 5 KB gzipped on their own, plus Lit, which they share. Each package has a size limit that CI enforces.
Which browsers does it support?
Current Chrome, Edge, Firefox and Safari. Every test runs in Chromium, Firefox and WebKit.
Does it ship icons?
No icon set is bundled. Register the SVGs you already use (Phosphor, Material Symbols, Lucide or your own) once, then refer to them by name.
How do I match my brand?
Set the Material 3 tokens, or pick a seed colour in the theme builder and copy the CSS it generates. Light and dark mode follow the system or a toggle.
Is it ready for production?
It runs the rws admin UI, the HITOP web app and this site. Versions are below 1.0, so a minor release can change an API; every change is in the changelog.
What does it cost?
Nothing. lit-material is MIT licensed.
Add your first component in a minute
MIT licensed. No account, no build step required.