Documentation

Retrofit an existing app

shadcss is plain CSS, so you can drop it onto an existing server-rendered or static app — no build, no markup rewrite, no JS framework — and restyle it through a small adapter.

1. Add the CSS

Vendor or link the bundle, then an adapter stylesheet of your own (loaded after, so its token-driven rules win). Set the theme on <html>.

<html data-theme="dark">
  <link rel="stylesheet" href="shadcss.min.css">
  <link rel="stylesheet" href="app-adapter.css">

2. Reuse what matches, alias what's close

shadcss already styles .btn, .btn-secondary, .input, .kbd, .card, etc. Common convention names are built-in aliases: .btn-primary, .btn-danger/.btn-error → the right variant automatically. So existing Bootstrap-style buttons often just work.

3. Map your structural classes to tokens

Your app's layout classes (sidebars, panels, custom buttons) won't exist in shadcss — restyle them with the design tokens. That's the whole adapter.

.sidebar { background: hsl(var(--card)); border-right: 1px solid hsl(var(--border)); }
.info-panel { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); }
.your-btn { background: transparent; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); }
.your-btn:hover { background: hsl(var(--accent)); }

Every token lives on :root — see the components and override any of them to retheme everything.

Reach for the real components — don't hand-roll

Restructure to the component's classes (the markup is yours), then style only what's genuinely custom:

<aside class="sidebar">
  <div class="sidebar-content">          <!-- scrolls -->
    <div class="sidebar-group">
      <div class="sidebar-group-label">Folders</div>
      <div class="sidebar-menu">
        <button class="sidebar-menu-button">Inbox</button>
      </div>
    </div>
  </div>
  <div class="sidebar-footer">…</div>       <!-- pinned -->
</aside>

Case study: Cleanshot Sorter