shadcn-html / installation

Installation

Each component is a self-contained folder with a spec, stylesheet, and optional JS. No npm. No build step. Just add <link> and <script> tags.

Installation

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

Include the theme

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

This defines every design token (colors, radius, shadows, typography, spacing) for light and dark mode. Swap this file to retheme everything. Compatible with tweakcn.com theme exports.

2

Include component CSS & JS

<!-- 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 — only for interactive components -->
<script src="https://cdn.jsdelivr.net/gh/codylindley/shadcn-html@latest/dist/components/dialog/dialog.js" defer></script>

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

3

Include Lucide icons

<script src="https://unpkg.com/lucide@latest"></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.

4

Read the spec, 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 {name}.md spec 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

Open your HTML file in a browser. No server required — works with 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/semantic-tokens.css">

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

Self-hosting

Prefer local files? Download everything and reference files with relative paths:

Download latest (.zip)

<link rel="stylesheet" href="theme/semantic-tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<script src="components/dialog/dialog.js" defer></script>

Component folder structure

components/
└── dialog/
    ├── dialog.md    ← HTML structure, attributes, ARIA (read this first)
    ├── dialog.css   ← stylesheet (include via <link>)
    └── dialog.js    ← interaction behavior (include via <script defer>)

Non-interactive components like Button and Badge only have .md and .css — no JS needed.