Skip to main content Accessibility Feedback
Skip to Documentation Content
Getting Started
Customizing
Tools
Layout
Content
Forms
Components
Utilities
About
Documentation
Getting Started
Customizing
Tools
Layout
Content
Forms
Components
Utilities
About

Installation

Kelp is in beta. New features are getting added every week. The patterns and architecture are relatively stable, but things can change and break, and you probably shouldn't use it in production just yet.

Kelp is simple, accessible, and designed to be customized without a build step.

Quick Start

The CDN is the fastest and simplest way to get started.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kelpui@0/css/kelp.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/kelpui@0/js/kelp.js"></script>

Kelp uses semantic versioning. You can grab a major, minor, or patch version from the CDN with the @1.2.3 syntax. You can find all available versions under releases.

You can also download the files from GitHub if you’d prefer.

Advanced Install

The quick start setup loads the entire Kelp UI library.

In the near-future, Kelp will include two pre-bundled subsets that include less stuff, for people who want a more minimal or semi-custom setup.

  • kelp.core.css - Just the theme, native HTML element styles, and utilities for nudging-and-tweaking content.
  • kelp.extended.css - Everything in kelp.core.css, plus layouts and full set of utilities.

Neither bundle will include components or JavaScript, allowing you to selectively install those if desired. Each component will have docs on how to install it standalone.

Custom Install

You can create a fully custom Kelp a few different ways.

Online Custom Download Tool

The Kelp Custom Download Tool let’s you pick-and-choose which features and components you want to include.

It generates a custom CSS file and (if needed) JavaScript file with just the stuff you want.

It’s the fastest and easiest way to customize your build, and and ensures you don’t miss anything important (like forgetting some CSS that goes with a JS component).

Use the Custom Download Tool →

Buildless Source Files

The Kelp source code is written in vanilla CSS and JavaScript.

The CSS files use @import and, and the JavaScript files use the native ES imports (import). You can comment out or delete the imports for any features you don’t want, and create your own custom setup in seconds.

/* Components... but only load callouts */
/*@import "./components/badges.css";*/
@import "./components/callouts.css";
/*@import "./components/avatar.css";*/
/*@import "./components/skeleton.css";*/
Performance Consideration. Because Kelp's files are so small, loading lots of modular files dramatically reduces the effectiveness of gzip and brotli compression. You might consider running a build or using the online custom download tool.

Run a Build

As Kelp nears v1 release, the main CSS and JavaScript files will come pre-bundled but unminified for better compression performance.

You can drop the Kelp source code into your build tool of choice, or use the (soon to be) included Kelp build tool (based on ESBuild) to quickly compile your custom CSS and JavaScript files.

The documentation here will be updated with instructions on how to do that in the future.