partialkit

shadcn-inspired components for plain HTML. No React, no Vue, no build step — if you can write HTML, you can use it.

Why it exists

shadcn/ui gets its behaviour from Radix, which only runs in React. partialkit reaches the same place from two directions: browser primitives where the platform already implements the pattern, and an explicit ARIA layer where it does not.

Nothing about it assumes a framework. A static page, a server-rendered app in any language, a site generator, a browser extension — anywhere HTML ends up, these classes work.

Delete project

This action cannot be undone.

Danger

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Delete project</h3>
    <p class="card-description">This action cannot be undone.</p>
    <div class="card-action">
      <span class="badge badge-destructive">Danger</span>
    </div>
  </div>
  <div class="card-footer">
    <button class="btn btn-outline">Cancel</button>
    <button class="btn btn-destructive" data-pk-dialog-open="hero-dialog">Delete</button>
  </div>
</div>

<dialog class="alert-dialog" id="hero-dialog">
  <div class="alert-dialog-header">
    <h3 class="alert-dialog-title">Delete this project?</h3>
    <p class="alert-dialog-description">Every deployment and log will be removed.</p>
  </div>
  <div class="alert-dialog-footer">
    <button class="btn btn-outline" data-pk-dialog-close>Cancel</button>
    <button class="btn btn-destructive" data-pk-dialog-close="confirm">Delete</button>
  </div>
</dialog>

What you get

Semantic classes — class="btn btn-outline", not twenty utilities in every file.
shadcn tokens and names — the same OKLCH variables, and the naming you already know.
Markup that arrives later just works — no re-init call after you replace part of the page.
~8 kB of JS, minified and unzipped.