The New CSSClean defaults
Readable spacing, sensible headings, and modern typography out of the box.
HTML should look good by default.
Modern CSS. Clean by default.
A lightweight, zero-config CSS base built for readable HTML and fast adoption.
Drop in via CDN or npm — works in any UI stack.
Zero configSemantic defaults< 5 KB gzipped
14 Packages
Official Addons
The core stays under 5KB. Addons give you forms, navigation, modals, alerts, and more — all pure CSS, no JavaScript. Install only what you need.
Components
Buttons
Sizes, colors, outlines, loading states, and groups.
PrimaryOutlineGhost
Badges
Status indicators, labels, tags, and dot badges.
NewActivePending
Forms
Inputs, selects, checkboxes, switches, floating labels, validation.
View docs →Navigation
Navbar, tabs, pills, breadcrumbs, and pagination.
View docs →Modal
Dialogs and offcanvas panels using native dialog element.
View docs →Alerts
Color-coded alert boxes with dismissible pattern.
View docs →Cards
Sections, hover effects, horizontal layout, and variants.
View docs →Tables
Striped, hover, bordered, compact, and responsive.
View docs →Accordion
CSS-only collapsible panels with smooth transitions.
View docs →Progress
Progress bars, spinners, and skeleton loaders.
View docs →List Group
List items with actions, flush variant, and colors.
View docs →Utilities
Why The New CSS?
Utility classes can pollute HTML and require config and build tooling. The New CSS gives you sensible defaults without any of that.
✓
No build tools required
One link tag. No PostCSS, no Webpack, no config files.
✓
Clean semantic HTML
Readable markup that describes content, not presentation.
✓
Small footprint, fast loading
Under 5KB gzipped. Less CSS = faster first paint.
✓
Works everywhere
Plain HTML, React, Vue, Svelte — any stack.
Use it when you want a clean baseline and still write real CSS.
Try in 30 seconds
<link rel="stylesheet" href="https://unpkg.com/the-new-css/dist/the-new-css.min.css">No PostCSS. No config. No build step. Just CSS.
How it compares
| Feature | Tailwind CSS | Bootstrap | Pure CSS | The New CSS |
|---|---|---|---|---|
| Build step | Usually yes | No | No | No |
| HTML readability | Low (utility-heavy) | Medium | High | High (semantic defaults) |
| Bundle size | ~10-30KB+ (purged) | ~23KB | ~4KB | ~5KB |
| Learning curve | Medium | Low-medium | Low | Low |
| Best for | Utility-driven apps | Classic components | Minimal layouts | Clean baselines + fast sites |
See it in action
Buttons + forms
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<input placeholder="Email"
class="px-3 py-2 border
border-gray-300 rounded-lg" />Typography
<article>
<h1 class="text-3xl font-bold mb-2">
Clean defaults
</h1>
<p class="text-gray-600 leading-relaxed">
Readable spacing, sensible headings,
and modern typography out of the box.
</p>
<blockquote class="border-l-4
border-blue-500 pl-4 text-gray-500
italic mt-4">
HTML should look good by default.
</blockquote>
</article>Cards + grid
<div class="grid sm:grid-cols-3 gap-4">
<div class="card card-hover">
<div class="card-body">
<h3 class="font-semibold">Fast</h3>
<p class="text-sm text-gray-600">
Ship less CSS.
</p>
</div>
</div>
<div class="card card-hover">
<div class="card-body">
<h3 class="font-semibold">Simple</h3>
<p class="text-sm text-gray-600">
No config required.
</p>
</div>
</div>
<div class="card card-hover">
<div class="card-body">
<h3 class="font-semibold">Clean</h3>
<p class="text-sm text-gray-600">
Readable HTML.
</p>
</div>
</div>
</div>Fast
Ship less CSS.
Simple
No config required.
Clean
Readable HTML.
Ready-to-use templates
Copy the HTML. Customize with CSS variables. Ship.
A lightweight CSS library for modern websites
The New CSS ships under 5KB gzipped. It includes layout utilities, typography defaults, a full color palette built on oklch(), responsive breakpoints (sm/md/lg), and automatic dark mode. That is everything most websites need in a single stylesheet — with no build step.
If you are looking for a minimal CSS framework or a lightweight CSS library that respects semantic HTML, The New CSS is built for you.
Start building
Add one line to your HTML and see the difference. Star the repo if you like what you see.
Frequently Asked Questions
Why use this instead of Tailwind?
Tailwind is excellent for utility-driven workflows in large applications. The New CSS is for developers who want clean, readable HTML without config files or build pipelines. If your priority is fast adoption and a small footprint, The New CSS is a better fit. See the full comparison.
Can I customize it with CSS variables?
Yes. All design tokens — colors, spacing, typography, shadows, borders — are CSS custom properties on :root. Override them in your own stylesheet to match your brand. No config files, no Sass, just CSS.Read the customization guide.
Does it replace utility frameworks?
It can. The New CSS provides a clean baseline plus utility classes for layout, spacing, colors, and responsive design. For most sites — landing pages, blogs, documentation, portfolios — it is all you need. For complex app UIs with hundreds of custom components, Tailwind may be a better fit.
Does it work with React / Vue / Svelte?
Yes — it's plain CSS. Drop in a <link> tag or import from npm. No framework adapters, no plugins, no runtime dependency.
Is this a full component framework?
The core library is a lightweight baseline. For components like buttons, forms, modals, navigation, alerts, cards, and more, install our official 14 addon packages — each is standalone CSS you add only when needed.
How small is it?
Under 5KB gzipped for the full library. That includes layout, typography, colors, responsive breakpoints (sm/md/lg), hover/focus variants, and dark mode. You can also import individual modules for an even smaller footprint.