Get started
Add the stylesheet from a CDN:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@cirthcss/[email protected]/dist/cirth.min.css"
integrity="sha384-nOepR3J7MR5xFmRtPzlbl5vNrfR0CoY/J3mmieajPP1SOI0GHzrZsEpGymO0avwr"
crossorigin="anonymous">
Or install the compiled CSS from npm:
npm install @cirthcss/cirth
import "@cirthcss/cirth";
Then write ordinary HTML. Only the layout wrapper needs a class:
<main class="container">
<h1>Account settings</h1>
<form>
<label>
Email
<input type="email" name="email" autocomplete="email">
</label>
<button type="submit">Save</button>
</form>
</main>
What you get
- Semantic defaults: typography, navigation, forms, tables, and a small
set of components, with layout classes where HTML alone is not enough.
- A theme you can change at runtime: light and dark schemes, CSS custom
properties, and no Sass step for consumers.
- No shipped JavaScript: interactive patterns build on native elements
such as
<details> and <dialog>.
- A tested baseline: accessibility checks and compressed-size budgets
run in CI. Your application still needs its own accessibility testing.
See About Cirth for the scope and trade-offs.
Choose a build
The default build is the right starting point for most projects. Classless
and scoped variants are available when you need a stricter selector boundary.
Package and builds is the authoritative list of
entry points, generated files, presets, token JSON and print companions.
Use the installation quickstart for
the basic setup. Then choose one of the 53 verified
framework guides if a build tool or
application framework owns your global stylesheet.
To keep Cirth's content, form, and component declarations off a third-party
widget, mark its root with .no-cirth:
<div class="no-cirth"><!-- third-party widget --></div>
This is a component opt-out, not complete isolation: reset, theme, inherited,
layout, accessibility, motion, and print rules still apply. See
Using Cirth with existing CSS
for the boundary's :has() and sibling-selector limits.
Customize
Cirth is CSS-first. Override custom properties in your own stylesheet. Every
stylesheet Cirth ships keeps its rules in one cascade layer, cirth, so CSS
you write outside a layer wins without matching Cirth's selectors, wherever
it loads.
:root {
--cirth-primary: light-dark(#2563eb, #93c5fd);
--cirth-border-radius: 0.375rem;
}
The accent's links, controls, hover states, and focus rings derive from
--cirth-primary. For a scoped build, put overrides on .cirth instead of
:root. See Customization for the token
system and contrast guidance.
Browser support
Cirth targets modern browser engines and does not support Internet Explorer.
Compatibility owns the exact browser
floor, required CSS features and build-pipeline limits.
Documentation and contributing
Browse the documentation,
live examples, and
changelog. To work on Cirth, start with the
contribution guide.
Cirth is licensed under Apache 2.0. See NOTICE.md
for attribution to Pico CSS, from which Cirth was forked.
