A UI library for people who love HTML, powered by modern CSS and Web Components.
Kelp works without any build step.
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.
Kelp's compiled CSS and JS files are located in the /css and /js directories. The source files are located in the /src directory.
Kelp uses ESBuild to combine all of the modular files into a single file for performance reasons.
To run your own build, comment out the imports you don't want in the src/css and/or /src/js files, then run npm run build.
npm install
npm run buildKelp is unminified by default. In performance testing, minification had almost no performance impact when gzip or brotli are used.
If you'd prefer to minify anyways, you can add minify: true to the esbuild.mjs build function.
await esbuild.build({
entryPoints: [
'src/js/*.js',
'src/css/*.css',
],
minify: true,
// ...
});The included index.html file is a kitchen sink demo of Kelp. It includes every feature and component in one giant file.
The web component use ES imports, and require a local server to run.
Use your preferred server, or use the included http-server by running npm run dev.
npm install
npm run devKelp uses...
- Playwright for tests
- Biome for linting and formatting
- Typescript with JSDoc for more friendly (and fully optional) type checking
- A continuous integration process on deploys and PRs
# Run tests
npm run test
# Run linter
npm run lintThe test suite uses port 8080. If that's already in use, you can set a different PORT when running your test, like this...
# Run tests on port 8082
PORT=8082 npm run testFree to use under the Kelp Commons License. There are also commercial license options available.