Quick Start

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.

CDN Install

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.

Direct Download

You can download the files directly from GitHub.

The CSS and JavaScript files are located in the /css and /js directories, respectively.

<link rel="stylesheet" href="./css/kelp.css">
<script type="module" src="./js/kelp.js"></script>

Starter HTML

Copy-paste and go, or fork the demo on CodePen.

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Kelp</title>
		<meta name="description" content="The HTML-first UI library">
		
		<link rel="stylesheet" href="./css/kelp.css">
	</head>
	<body>
		<main class="container">
			<h1>👋 Hi, Universe!</h1>
		</main>
	</body>
	<script type="module" src="./js/kelp.js"></script>
</html>