Skip to content

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 has a “What to copy” table listing exactly which files, icons, 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 deliberately close to the platform: almost everything here is zero-JavaScript (the exceptions are the header’s mobile menu and the dismissible banner, a few lines each). 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.