v0.1.0 · 52 components

shadcn's beauty.
no JS framework.

The shadcn/ui visual language in plain HTML and CSS — for server-rendered, static, HTMX, Astro, and AI-generated apps. Built on :has(), the Popover API, native <dialog>, and design tokens. No React, no Tailwind, no runtime.

Get started
52
Components
16.8 KB
Gzipped
0
JS in CSS bundle
0
Dependencies
100%
Token-driven

Button

The primary action trigger. 6 variants × 4 sizes × loading + icon + group + disabled states. Pure CSS — even the loading spinner is a CSS animation.

Input & Field

Native text inputs with leading/trailing icons, validation, sizes, and the higher-level .field wrapper that auto-shows error messages via :user-invalid.

We'll never share your email.

Please enter a valid email address.

At least 8 characters with one number.

Password must be at least 8 characters.

Markdown supported. Max 280 characters.

.form-field is the simpler layout helper from label.css.

Enter the 8-digit code sent to your phone.

Selection Controls

Checkbox, radio, switch, radio-group, and toggle-group — all built on native form controls. Keyboard, screen-reader, and form submission all work for free.

Checkboxes
Switches
Radio group (card style)
Toggle group

Card

Composable container with header, content, and footer zones. Interactive hover-lift variant for clickable cards.

Create project

Deploy a new project from a template.

Choose from 12 starter templates — React, Vue, Svelte, or static HTML.

Live

Production

acme.com · 99.99% uptime
Deployed 2 min ago
Region us-east-1
Build v1.2.3

Team members

5 of 10 seats used
A
B
C
D
E
+5

Badge

Inline status indicators. Six color variants plus outline and dot styles.

Default Primary Secondary Success Warning Info Destructive Outline
Online Away Offline Syncing

Alert

Inline message banners. Four variants. Dismissible using the native <details> element — no JS required.

Error
Your session has expired. Please log in again to continue.

Accordion & Collapsible

Built on native <details> + <summary>. Animated height via the modern grid-template-rows: 0fr → 1fr technique.

Is it accessible?
Yes. By using native <details> we get keyboard navigation, screen-reader semantics, and the "summary" role for free.
How big is the bundle?
The complete framework gzips to ~16.8 KB. You can also import individual component files for tree-shaking.
Can I use only some components?
Absolutely. Each component is a standalone CSS file in src/components/.
Advanced filters

Tabs

Pure CSS tabs using radio inputs + :has(). Three variants: default, underline, vertical.

Account settings go here.

Password change form goes here.

Team management goes here.

Underline variant

A high-level overview of what we offer.

Everything you get when you sign up.

Simple, transparent pricing.

Frequently asked questions.

Dialog · Alert Dialog · Drawer · Sheet

Four modal-style overlays, all built on native <dialog>. Use <form method="dialog"> for no-JS close buttons.

Edit profile
Make changes to your profile here. Click save when you're done.
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
Filters
Narrow your search results.
Menu
Navigate to any section.

Command Palette

Styled shell for a ⌘K command palette. Uses the Popover API for display; pair with ~10 lines of JS for fuzzy search and arrow-key navigation.

Go to Dashboard Go to Settings
↑ ↓ to navigate ↵ to select esc to close

Tooltip · Popover · Hover Card

Three floating UI patterns in increasing richness. Tooltip = single line. Popover = arbitrary content. Hover-card = rich preview.

Popover title
Set the dimensions for this layer.
@shadcss
Z
shadcss
@shadcss · Follow

The shadcn aesthetic, reimagined for the era of :has(), Popover API, and native <dialog>. No JS framework.

1,234 Following
12.3K Followers

Toast & Sonner

Auto-dismissing notifications. The live demo below uses the Sonner component, whose CSS animation runs for --sonner-duration then hides itself; the sibling .toast component works the same way with its own --toast-duration token. Variants for success, error, warning, info, loading.

New message
You have a new message from Alex.
Saved
Your changes have been saved.
Failed to save
Check your connection and try again.
Storage almost full
You've used 90% of your storage.
Subscription expires soon
Renew now to keep your premium features.

Table

Restyled native HTML table with hover rows, alignment variants, and badges inside cells.

Status Email Amount Method Actions
Success ken99@example.com $316.00 Credit card
Success abe45@example.com $242.00 Credit card
Processing monserrat44@example.com $837.00 PayPal
Failed sylvia75@example.com $875.00 Credit card

Progress · Slider · Spinner

Loading indicators at three scales of richness.

Progress
Uploading… 67%
Indeterminate
Slider
Volume 50%
Brightness (large)
Spinner

Skeleton & Empty States

Loading shimmer for placeholders, and friendly empty states with CTAs.

Loading…
No projects yet
Get started by creating your first project. It only takes a minute.

Avatar · Separator · Kbd

Image with text fallback, layout dividers, and keyboard shortcut indicators.

AB
CD
EF
GH
IJ
KL
User avatar
A
B
C
+5
First Second Third
Press ⌘ K to search Press ⌘ ⇧ P for command palette Press ? for help

Calendar

Pure CSS month calendar with today, selected, and outside-month states.

June 2026
S M T W T F S

Typography

Drop-in prose styles for blog posts, docs, marketing copy. Wraps in .prose.

The Platform is the Framework

Modern CSS can do it all. The platform caught up to React three years ago — we just stopped paying attention.

For the past decade, we built UIs by shipping JavaScript that describes UIs. Every interaction was a state update, every animation a useEffect, every modal a portal. The cost added up: parse time, hydration jank, framework lock-in.

What changed

Three things landed in browsers that quietly eliminated 90% of the JavaScript we wrote:

  • :has() — parent selectors. Finally.
  • The Popover API — built-in dropdowns, tooltips, menus.
  • grid-template-rows: 0fr → 1fr — animated height without max-height hacks.
“The best framework is no framework. The second-best is the platform itself.”

Read the full announcement or browse the installation guide.

Try it

<link rel="stylesheet" href="https://unpkg.com/@russfranky/shadcss">

Installation

Three ways to use shadcss. Pick the one that fits your project.

1. CDN (fastest)

<link rel="stylesheet" href="https://unpkg.com/@russfranky/shadcss/dist/shadcss.min.css">

2. npm

npm install @russfranky/shadcss
/* In your CSS entry: */
@import "@russfranky/shadcss";

3. Copy a single component

Grab one file from src/components/. The token file in src/base/tokens.css is the only shared dependency.

src/
├── base/
│   ├── reset.css
│   ├── tokens.css      ← REQUIRED
│   └── theme.css
├── components/
│   ├── button.css
│   ├── card.css
│   └── … 52 total
└── shadcss.css             ← main entry

Built for AI productivity

shadcss ships with infrastructure designed for AI agents to generate UI reliably.

AI-ready
Machine-readable registry
Every component is described in registry.json with classes, attributes, markup, and dependencies.
{
  "name": "button",
  "classes": ["btn", "btn-outline", "btn-sm"],
  "markup": "<button class=\"btn\">…</button>"
}
AI-ready
Pattern-based guide
7 patterns cover 95% of UI needs. Documented in AI_GUIDE.md with copy-paste examples.
  • 1. Modal — <dialog> + showModal()
  • 2. Dropdown — Popover API
  • 3. Accordion — native <details>
  • 4. Tabs — radios + :has()
  • 5. Tooltip — ::after + :hover
  • 6. Selection — native inputs
  • 7. Toast — Popover + CSS animation
AI-ready
Predictable conventions
Variants are classes. State uses ARIA. Tokens drive styling. No surprises for the model.
  • ✅ class="btn btn-outline btn-sm"
  • ❌ data-variant="outline" data-size="sm"
  • ✅ aria-current="page"
  • ✅ aria-pressed="true"
  • ✅ hsl(var(--primary))
  • ❌ #000000