← Vanilla UI Kit

Install Vanilla UI Kit

One script tag, one component, minified with integrity, ES modules, npm via GitHub, or plain copy-paste — every path is first-class. Pick yours.

Quick start

CDN — the 30-second path

One script tag from jsDelivr loads the whole family. No build step, no npm, no framework — the globals are just there.

<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/dist/vanilla-ui-kit.js"></script>

Then use any component directly:

<script>
  new DatePicker('#date')
  Toast.success('Saved')
</script>

One component only

Every component is self-contained — one file, zero dependencies — so you can load exactly the one you need and nothing else.

<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/toast/toast.js"></script>

A few more examples — the pattern is always <dir>/<name>.js:

<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/datepicker/datepicker.js"></script>
<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/modal/modal.js"></script>
<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/select/select.js"></script>

All 21 components work standalone this way — see the full list.

Production — minified, with SRI

.min flavors ship in dist/. Pin the major version with @1 and add an integrity hash so the browser verifies the exact bytes:

<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components@1/dist/vanilla-ui-kit.min.js"
        integrity="sha384-…see dist/sri.json…" crossorigin="anonymous"></script>

dist/sri.json in the repo carries the sha384 hash for every file in dist/ — bundles, minified builds, per-component ESM files, and the extracted CSS — so you can paste the right value for whichever file you load.

ES modules

The same code with real import ergonomics, from dist/esm/. Straight in the browser, no bundler needed:

<script type="module">
  import { Toast, DatePicker, VC } from 'https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/dist/esm/vanilla-ui-kit.js'
  import Toast from 'https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/dist/esm/toast.js'  // one component
</script>

With a bundler (Vite, esbuild, webpack, …) and the package installed (see below), the package exports resolve to the ESM builds automatically:

import { Toast, DatePicker, VC } from 'vanilla-ui-kit'
import Toast from 'vanilla-ui-kit/toast'
npm

npm — via GitHub

The package is not published to the npm registry. The supported install is straight from GitHub — npm treats the repo as the package:

npm i github:vanilla-ui-kit/components

Optionally pin a tag:

npm i github:vanilla-ui-kit/components#v1.0.0

Either way it installs as vanilla-ui-kit, and all the usual specifiers work:

const { DatePicker, Toast, VC } = require('vanilla-ui-kit')  // bundle (CJS)
import { DatePicker, Toast, VC } from 'vanilla-ui-kit'       // bundle (ESM)
import Toast from 'vanilla-ui-kit/toast'                     // one component

The extracted stylesheets are exported too, for headless setups or build pipelines:

import 'vanilla-ui-kit/toast.css'
import 'vanilla-ui-kit/vanilla-ui-kit.css'  // everything

If the package ever ships to the npm registry later, the same specifiers keep working — nothing in your code changes.

Tree shaking: the package's ESM entry is a pure re-export barrel with sideEffects scoped to CSS, so bundlers keep only the components you import — import { Toast } from 'vanilla-ui-kit' retains ~12 KB minified, not the whole kit. Import bindings you use; the default export deliberately pulls everything.

Download

Copying the file into your repo is a fully supported path, not a hack — each component is one dependency-free file, and vendoring it means no CDN, no lockfile, no supply chain. Grab any file from the GitHub tree:

<script src="/vendor/toast.js"></script>  <!-- your local copy of toast/toast.js -->

TypeScript

Definitions for every component ship in types/. Bundler users don't need to do anything — package.json exports point each specifier at its .d.ts, so types resolve automatically. Script-tag users get the globals typed with one reference line:

/// <reference types="vanilla-ui-kit/types/globals" />

Theming in one line

With the bundle (or the optional core) loaded, one call themes the whole family:

VC.config({
  theme: 'dark', accent: '#b45309', radius: '10px'
})

Prefer to see it? The theme builder previews every component live and exports this exact snippet.