shadcn-html / installation

Installation

Each component is a self-contained folder with a static component skill, a stylesheet, and a JavaScript file if needed. No npm. No build step.

Quick start

All files are served via jsDelivr CDN directly from the GitHub repo. No download or install required — just reference the URLs in your HTML.

1

Add a theme

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codylindley/shadcn-html@latest/dist/theme/default-semantic-tokens.css">

This defines every token for the default light and dark theme. To switch themes, you just switch this file — that's all the theme selector in this documentation site is doing. Compatible with tweakcn.com theme exports.

2

Add the icons

<script src="https://unpkg.com/lucide@1.8.0"></script>
<script>lucide.createIcons();</script>

Lucide provides ~1,500 icons via CDN. Use <i data-lucide="name"></i> anywhere in your HTML. The script replaces each element with an inline SVG on page load. See the Icon page for details.

3

Select the components you want

<!-- CSS — pick what you need -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codylindley/shadcn-html@latest/dist/components/button/button.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codylindley/shadcn-html@latest/dist/components/dialog/dialog.css">

<!-- JS — when the component needs it -->
<script type="module" src="https://cdn.jsdelivr.net/gh/codylindley/shadcn-html@latest/dist/components/dialog/dialog.js"></script>

Each component lives in components/{name}/ with its own .css and .js when needed. Include only the components you use — they're independent of each other.

4

Read the component skill, write the HTML

<button class="btn" data-variant="default"
        data-dialog-trigger="confirm"
        aria-haspopup="dialog">
  Open Dialog
</button>

<dialog id="confirm" class="dialog"
        role="dialog" aria-modal="true"
        aria-labelledby="confirm-title">
  <div class="dialog-content">
    <div class="dialog-header">
      <h2 class="dialog-title" id="confirm-title">Are you sure?</h2>
      <p class="dialog-description">This action cannot be undone.</p>
    </div>
    <div class="dialog-footer">
      <button class="btn" data-variant="outline" data-dialog-close>Cancel</button>
      <button class="btn" data-variant="default">Confirm</button>
    </div>
  </div>
</dialog>

Each component folder has a component-skill.md that documents the exact HTML structure, attributes, variants, and ARIA. Read it, copy the pattern, fill in your content. The CSS and JS handle the rest.

5

That's it

Serve your HTML via any local server (e.g. npx serve). ES modules require HTTP — they don't run from file://. Dark mode toggles automatically when you add class="dark" to <html>.

Pinning a version

Replace @latest with a specific version tag to lock your project to a release:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codylindley/shadcn-html@v0.1.1/dist/theme/default-semantic-tokens.css">

This ensures your project won't break when new versions are published. Check the releases page for available versions.

Self-hosting

Download the full system and drop it into any project. All the files are static — no build step, no dependencies. Point an AI at the folder and it has everything it needs: component skills to read, CSS to include, JS to wire up, and this entire documentation site with working examples of every component.

Download latest (.zip)

Component folder structure

components/
└-- dialog/
    ├-- component-skill.md    ← HTML structure, attributes, ARIA (read this first)
    ├-- dialog.css   ← stylesheet (include via <link>)
    └-- dialog.js    ← interaction behavior (include via <script type="module">)

Some components — like Button and Badge — are CSS-only. No JavaScript needed.