intro :: Getting started

The mCSS component library is entirely built with the mCSS framework, and you own the code: instead of installing a package, you copy the pieces you want into your project and edit them like anything else you wrote. Every component’s docs page starts with a table listing exactly which files, dependencies, and interface tokens it needs.

Each component comes in two flavors:

• Plain HTML + CSS. Copy the component.*.css file (or grab the compiled version from dist/css/) and use the documented markup. Works with any framework, or none.
• Astro. Copy the .astro file(s) for typed props, slots, and sensible accessibility defaults out of the box.

Components stay as pure HTML/CSS as possible. The exceptions ship only the few lines they need: the header’s mobile menu, the dismissible banner, the hero’s slideshow, the table of contents’ scrollspy, and the read progress bar’s fallback for browsers without scroll-driven animations. Styling lives in cascade layers, so your own unlayered CSS always wins, and every visual knob is a documented --component-* interface token.

You can see some of the Astro components in action on the Marketing Template (code).

Spotted a bug, or built something worth sharing? Issues and discussions are open.