shadcn-html / introduction

The AI prototyping
substrate.

Themeable, semantic HTML, modern CSS, and vanilla JavaScript. No framework. No build step. No npm install. Just the lowest-level web primitives assembled into a system any AI can understand and build from.

View Components Get Started

Themeable

Full shadcn semantic token model. Swap a tweakcn theme and every component updates instantly.

AI Friendly

No framework abstractions or build tools to get wrong. Just HTML, CSS, and JS — the languages AI knows best.

Framework Free

Runs in any browser, zero dependencies, no build pipeline required.

The contract.

Tokens. CSS. Markup. JavaScript. Four layers — that's the whole system.

the full system 
/* 1 — semantic-tokens.css: the design system */
:root {
  --background:         oklch(1 0 0);
  --foreground:         oklch(0.145 0.005 285);
  --primary:            oklch(0.205 0.005 285);
  --primary-foreground: oklch(0.985 0.002 247);
  --border:             oklch(0.88 0.004 247);
  --radius:             0.625rem;
  --font-sans:          ui-sans-serif, system-ui, sans-serif;
  /* ...all color pairs, shadows, spacing */
}
.dark { /* same keys, dark values */ }

/* 2 — components/*.css: styled with tokens */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  font-weight: 500;
}
.btn[data-variant="default"] {
  background: var(--primary);
  color: var(--primary-foreground);
}

<!-- 3 — semantic HTML markup -->
<button class="btn" data-variant="default"
        data-dialog-trigger="confirm">
  Open Dialog
</button>

<dialog id="confirm" class="dialog">
  <div class="dialog-content">...</div>
</dialog>

// 4 — vanilla JS: wire interactivity
document.querySelectorAll('[data-dialog-trigger]')
  .forEach(btn => {
    const dialog = document.getElementById(
      btn.dataset.dialogTrigger
    );
    btn.addEventListener('click', () => dialog.showModal());
  });