Skip to main content
Important: Oat UI is currently sub v1 and is likely to have breaking changes until it hits v1.
There are three ways to install Oat UI in your project:

​
CDN (Recommended for Quick Start)

The fastest way to get started is to include the CSS and JS files directly from a CDN in your HTML: 
<link rel="stylesheet" href="https://unpkg.com/@knadh/oat/oat.min.css">
<script src="https://unpkg.com/@knadh/oat/oat.min.js" defer></script>
Add the defer attribute to the script tag to ensure it loads after the HTML is parsed.

​
npm

If you’re using a build tool or bundler, you can install Oat UI via npm:
1

Install the package

Run the following command in your project directory:
npm install @knadh/oat
2

Import in your project

Import the minified files in your JavaScript:
import '@knadh/oat/oat.min.css';
import '@knadh/oat/oat.min.js';
You can also import individual component files from @knadh/oat/css and @knadh/oat/js if you want to reduce bundle size and only include specific components.

​
Package Details

{
  "name": "@knadh/oat",
  "version": "0.x.x",
  "description": "Ultra-lightweight, zero dependency, semantic HTML/CSS/JS UI library",
  "main": "oat.min.js",
  "style": "oat.min.css",
  "files": [
    "oat.min.css",
    "oat.min.js",
    "css",
    "js"
  ]
}

​
Direct Download

You can download the CSS and JS files directly from GitHub and host them yourself:
1

Download the files

Use wget or curl to download the minified files:
wget https://raw.githubusercontent.com/knadh/oat/refs/heads/gh-pages/oat.min.css
wget https://raw.githubusercontent.com/knadh/oat/refs/heads/gh-pages/oat.min.js
2

Include in your HTML

Place the files in your project directory and reference them:
<link rel="stylesheet" href="./oat.min.css">
<script src="./oat.min.js" defer></script>

​
File Sizes

Oat UI is incredibly lightweight:
FileSize (minified)Size (gzipped)
CSS~20KB~6KB
JS~8KB~2.2KB
Total~28KB~8KB
This includes all components, styles, and interactive functionality. No additional dependencies required!

​
Next Steps

Quick Start

Build your first page with Oat UI

Components

Explore all available components