Quick Start

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@1/css/kelp.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/kelpui@1/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>