Stack
Spacing follows the markup, top to bottom.
Actual CSS
CSS for actual interfaces.
A semantic, no-build, progressively enhanced CSS framework for the interfaces people actually ship. No preprocessors, no build step, no classes cluttering your markup.
0
Runtime dependencies
17.6kb
Full build, brotli
2.7kb
Core build, brotli
18
Themes, light and dark included
Layout that reads like the markup
A handful of primitives that compose — the docs are built with the same ones.
Cluster
A row that wraps and centers itself.
one
two
three
four
five
Grid
Responsive columns without media queries.
The visual guide walks the spacing scale, every primitive, and the difference between density and size — seventeen figures.
Why Actual?
Four ideas that shape every decision in the library.
Semantic
Style native elements and web components. Your markup stays your markup — no presentation classes, no presentational divs.
No build
One stylesheet, one script. Import it and go, or bundle it into your existing pipeline. There is nothing to compile.
Progressive
Dialogs, flyouts, tooltips and tabs layer on only where supported. The markup is the baseline; everything else is enhancement.
Themable
Light, dark and 16 named themes, all driven by tokens. Bring your own theme with a few custom properties.
One component, every state
Variants belong on the component, not in your markup.
Badge
Badge
Badge
Primary
Success
Warning
Danger
Saved. Your changes are up to date.
Error. Something went wrong.
Heads up. A new version is available.
Density, not scaling
Same typography in every column — only the wrapper class changes.
Compact
Default
Spacious
Progressive by design
Native dialog, command and tooltips first — enhanced only where supported.
See it running
Pages built with the framework, not screenshots of it. Every one opens from this checkout.
Visual guide
Seventeen figures on the spacing scale, the layout primitives, and density versus local size. Every bar is drawn from a live token.
Color guide
Theming measured on two palettes, light and dark at once, as data-theme islands. The numbers are read off the rendered page.
Kitchen sink
Every component, variant, scope and interaction on one screen. The page to open when you want to break something.
Admini
A complete admin application: shell, tables, forms, dialogs, kanban, chat and feedback states.
All examples — page shapes, layout references, system benches, and two full sites.
Pick a theme
Light, dark and 16 named themes. Each card below previews one — that is a data-theme island doing its job.
Indigo
Dim
Corporate
Forest
Ocean
Spruce
Petrol
Sunset
Lavender
Mono
Square
Brutalist
Edge
Cyberpunk
Neon
Gradient
Components
Every component is native markup with its own contract.
Button
Actions and navigation with shared intents, variants, sizes, and loading, pressed, and disabled states.
Card
Flexible content container with optional header, body, and footer regions, plus full-bleed children.
Badge
Compact label for counts, status, or category tags, with shared intents and variants.
Alert
Inline status messages for confirmations, warnings, and errors, with intents, icons, and action lists.
Dialog
Centered modal overlay for focused tasks, confirmations, or forms, built on the native <dialog> element.
Drawer
Modal side-sheet that overlays the page for navigation or filters.
Table
Data table with caption and scope attributes, and an accessible scroll region for wide content.
Navbar
Horizontal top-level navigation bar with a brand, an inline link list, and a vertical nav-list for drawers.
Accordion
Collapsible regions built on native details and summary, with optional exclusive groups via the name attribute.
Breadcrumb
Trail of links showing the current page's location in a hierarchy.
Meter
Scalar measurement within a known range, not a progress indicator.
Pagination
Navigation controls to move between pages of content.
Start building
Install
npm install actual-cssOr link it
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css/dist/actual.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/actual-css/dist/actual.full.js" defer></script>