ArchCSS is a modern atomic CSS framework - drop in one stylesheet and start styling. One class, one action - responsive variants, design tokens, and zero configuration to get started.
pnpm add archcss
A complete atomic CSS system - utilities, elements, icons, and responsive design - all from a single stylesheet.
One class, one CSS property. Thousands of ready-made utilities generated from a single design token system.
Every utility ships with responsive variants: md:flex, lg:hidden - 6 breakpoints out of the box.
Colors, spacing, typography, and breakpoints are all generated from a single consistent token system across every utility.
1000+ Lucide SVG icons and Font Awesome bundled locally - no CDN required, full CSS utility class support.
Link one CSS file and go - no compiler, no dependencies. SCSS source customization is coming in a future release.
Inter, Poppins, Raleway, JetBrains Mono and 16 more - loaded via a single optimized API request.
Link the stylesheet and start adding classes. No build step required for the CDN version.
Full installation guide -><!-- CDN -->
<link rel="stylesheet"
href="https://unpkg.com/archcss/dist/index.css"/>
<!-- npm -->
<link rel="stylesheet"
href="node_modules/archcss/dist/index.css"/>
<!-- Usage -->
<div class="flex items-center justify-between px-4 py-3">
<h1 class="fs-2 fw-700 text-primary">Hello</h1>
<button class="bg-primary text-white px-4 py-2">Click</button>
</div>