Skip to content
Get packs

Guide · Open source

How to use UIkit: install, load and build with it

Updated · written with AI from the project's own documentation and checked against our catalogue data

UIkit is a lightweight, modular front-end framework for building web page layouts and interface components. This guide explains the ways to get UIkit into a project, the commands the project documents, and where it fits compared with other CSS and JavaScript toolkits. By the end you will know which installation route suits you and what to check before committing to it.

UIkituikit/uikit · ★ 18.5k · MIT

Quick start

  1. 1Decide your route. Choose a release download, a package manager, jsDelivr, or a repository clone based on your workflow.
  2. 2Check prerequisites. If you use npm, yarn or pnpm, make sure Node.js is installed. The README does not give a version.
  3. 3Install the package. Run npm install uikit, yarn add uikit or pnpm add uikit in your project folder.
  4. 4Confirm browser targets. Make sure your audience uses the latest versions of major browsers, as the README lists only those.
  5. 5Build your interface. Use UIkit's styles and scripts to create layouts and components in your web pages.

What UIkit is and who it suits

UIkit is a front-end framework: a ready-made set of styles and scripts that saves you from writing common interface parts from scratch. It is described as lightweight and modular, so you can use the parts you need. It is open source under the MIT license and developed by YOOtheme.

  • Good fit: developers who want prebuilt web interface components without a heavy setup.
  • Good fit: teams who want a modular, lightweight CSS and JavaScript toolkit.
  • Not a fit: people who need a no-code website builder, since UIkit is a code-level framework.

Get UIkit: choose an installation method

The project lists several ways to get UIkit. Pick the one that matches how you manage dependencies. Downloading the latest release gives you pre-built CSS and JS. Package managers give you all source files as they are available on GitHub.

  • Download the latest release from the GitHub releases page for pre-built CSS and JS.
  • Install with npm, yarn or pnpm to get all source files.
  • Load UIkit directly from jsDelivr without installing anything.
  • Clone the repository to get source files including build scripts.

Install UIkit with npm, yarn or pnpm

If you use a package manager, run the matching command in your project folder. Node.js is only required for these package-manager routes. The README does not state a required Node.js version.

npm install uikit yarn add uikit pnpm add uikit

Load UIkit from jsDelivr or clone the repository

To load UIkit straight from a CDN, use the jsDelivr package page linked in the README. To work on the source, clone the repository. The README lists the clone command below and notes that it includes build scripts.

git clone git@github.com:uikit/uikit.git

Use the development version

To get the latest development version before a release, the README suggests installing with the dev tag. Use this only if you accept that development builds may change more often than releases.

npm install uikit@dev yarn add uikit@dev pnpm add uikit@dev

Check browser support before you start

The README lists support only for the latest versions of major browsers: Firefox, Safari, Chrome, Edge and Opera. If your project must support older browsers, UIkit may not be the right choice. Check this against your audience before building on it.

How UIkit compares with alternatives

UIkit is often compared with Bootstrap, Tailwind CSS, Bulma and Foundation. The source does not compare these projects on speed or features, so judge them on your own needs. Try a small page in each if you are unsure.

What people use it for

  • Building page layouts and interface components without writing everything from scratch.
  • Adding a modular CSS and JavaScript toolkit to a website project managed with npm, yarn or pnpm.
  • Loading UIkit from jsDelivr in a page that does not use a build step.
  • Reading or modifying the source files by cloning the repository.

Frequently asked questions

Is UIkit free to use?

Yes. UIkit is open source under the MIT license, and its copyright belongs to YOOtheme GmbH. The license text is in the repository's LICENSE.md file.

How do I install UIkit?

Run npm install uikit, yarn add uikit or pnpm add uikit in your project folder. You can also download the latest release or load it from jsDelivr.

Do I need Node.js to use UIkit?

Only if you install it with npm, yarn or pnpm. Downloading a release or loading from jsDelivr does not require Node.js. The README does not state a required version.

Which browsers does UIkit support?

The README lists support for the latest versions of Firefox, Safari, Chrome, Edge and Opera. It does not list support for older versions.

Is UIkit a website builder?

No. UIkit is a code-level front-end framework. If you need a no-code builder, the project says UIkit is not for you.

How does UIkit compare with Bootstrap or Tailwind CSS?

UIkit is commonly compared with Bootstrap, Tailwind CSS, Bulma and Foundation. The source does not make performance or feature claims against them, so test each on a sample page to decide.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

UIkit suits developers and teams who want a lightweight, modular set of prebuilt styles and scripts, installed through npm, yarn, pnpm or jsDelivr. It is a poor choice if you need a no-code builder or must support older browsers, since the README lists only the latest versions of major browsers.

Install options & downloads