Install and download

The kit is plain CSS plus one optional script, so there are four ways to get it: a package manager, prebuilt files, a CDN, or a direct download from wovenui.com. Whichever you pick, load WovenUI core first. The kit reads its tokens and emits only its own rules.

Package manager

npm install @wovenui/core @wovenui/components
pnpm add @wovenui/core @wovenui/components
yarn add @wovenui/core @wovenui/components

Through a bundler (Vite, webpack), which resolves package URLs with no setup, load the whole kit in your global stylesheet:

@use "@wovenui/core";
@use "@wovenui/components";

Or load one component with what it needs. Pick one path per project: the bundle or per-component entries, never both.

@use "@wovenui/components/button";

The bundle takes $components to turn parts off. See Get started for that option, the layer order and the components that need each other.

Prebuilt files

Without a bundler, use the files in the package dist folder.

File	Use
@wovenui/components/css	dist/wovenui-kit.css, readable CSS
@wovenui/components/min.css	dist/wovenui-kit.min.css, minified CSS (the package default)
@wovenui/components/js	dist/wovenui-kit.js, the ES module
dist/wovenui-kit.iife.js	The drop-in script, which sets the global WovenUIKit

Core ships its own prebuilt CSS at @wovenui/core/min.css (dist/wovenui.min.css). It includes every utility class; the kit does not need them, but the examples on these pages use a few.

<link rel="stylesheet" href="node_modules/@wovenui/core/dist/wovenui.min.css">
<link rel="stylesheet" href="node_modules/@wovenui/components/dist/wovenui-kit.min.css">

Most components need no script. For tabs, toasts, autocomplete, data table sorting and a few other parts, add one of the two builds:

<!-- Drop-in script: defines the global WovenUIKit -->
<script src="node_modules/@wovenui/components/dist/wovenui-kit.iife.js" defer></script>

<!-- ES module -->
<script type="module" src="node_modules/@wovenui/components/dist/wovenui-kit.js"></script>

// In a bundled app
import { init, toast } from '@wovenui/components/js';

The ES module is for bundlers and type="module" pages. The drop-in script is for classic pages, and you call WovenUIKit.toast(...) on the global.

CDN

Core is on npm, so both CDNs serve it today:

<!-- jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wovenui/core/dist/wovenui.min.css">

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/@wovenui/core/dist/wovenui.min.css">

The kit files are available after the first npm release of the kit.

<!-- jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wovenui/components/dist/wovenui-kit.min.css">
<script src="https://cdn.jsdelivr.net/npm/@wovenui/components/dist/wovenui-kit.iife.js" defer></script>

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/@wovenui/components/dist/wovenui-kit.min.css">
<script src="https://unpkg.com/@wovenui/components/dist/wovenui-kit.iife.js" defer></script>

For production, pin an exact version in the URL (add it after the package name, as in @wovenui/core@<version>) so a new release never changes your page.

Direct download

Download the built files from wovenui.com and host them yourself. Load the core CSS first, then the kit CSS, then the script if you use it. Sizes are computed from the files at build time.

File	What it is	Gzip size
wovenui-kit.css	CSS	18.5 KB
wovenui-kit.min.css	Minified CSS	17.3 KB
wovenui-kit.js	JavaScript, ES module	5.6 KB
wovenui-kit.iife.js	JavaScript, drop-in script	5.6 KB

Which one to choose

Your project	Use
A bundler and SCSS	The package manager, with @use and per-component entries to ship only what you use
A bundler, no SCSS	The package manager, with the minified CSS and the ES module
Plain HTML, quick start	The CDN, with the drop-in script if you need one
Offline, intranet or no build step	Direct download, or the dist files from the package

Next, see the components overview for naming, layers and loading, and Right to left for Arabic, Hebrew, Persian and Urdu.