A themeable web component library built with Stencil, featuring a dual-mode system for production and CMS editing.
- 🎨 Themeable — CSS custom properties for complete styling control
- 🔧 Dual Mode — Production (
default) and CMS editing (admin) modes - 🌐 Framework Agnostic — Works with any framework or vanilla JS
- 🪶 Lightweight — Tree-shakeable with minimal runtime overhead
npm install le-kitThe easiest way to use Le-Kit. Components are automatically loaded on-demand.
<!-- In your HTML -->
<script type="module">
import 'le-kit';
</script>
<!-- Include a theme -->
<link rel="stylesheet" href="node_modules/le-kit/dist/themes/default.css" />
<!-- Use components -->
<le-card>
<span slot="header">Welcome</span>
<p>Your content here</p>
<le-button slot="footer">Get Started</le-button>
</le-card>Import only the components you need for smaller bundle sizes.
// Import specific components
import { defineCustomElement as defineCard } from 'le-kit/components/le-card';
import { defineCustomElement as defineButton } from 'le-kit/components/le-button';
// Register them
defineCard();
defineButton();Le-Kit ships with several built-in themes.
<!-- From node_modules -->
<link rel="stylesheet" href="node_modules/le-kit/dist/themes/base.css" />
<link rel="stylesheet" href="node_modules/le-kit/dist/themes/default.css" />
<!-- Or use a CDN like unpkg -->
<link rel="stylesheet" href="https://unpkg.com/le-kit/dist/themes/base.css" />
<link rel="stylesheet" href="https://unpkg.com/le-kit/dist/themes/default.css" />Available themes: default, dark, minimal, warm, gradient
// With a bundler that handles CSS imports
import 'le-kit/dist/themes/base.css';
import 'le-kit/dist/themes/default.css';Override CSS custom properties to match your brand:
:root {
--le-color-primary: #6366f1;
--le-color-secondary: #8b5cf6;
--le-radius-md: 12px;
--le-space-md: 1rem;
}<le-stack>— Flexbox layout with gap, alignment, and direction control<le-box>— Flexible container with padding and background options<le-card>— Card container with header, content, and footer slots
<le-button>— Button with variants (solid, outlined, clear) and colors
<le-text>— Typography component with semantic variants
<le-popup>— Toast notifications and alerts
<le-card variant="elevated">
<h3 slot="header">Product Name</h3>
<p>Product description goes here with all the details.</p>
<le-stack slot="footer" justify="end" gap="8px">
<le-button variant="outlined">Cancel</le-button>
<le-button color="primary">Buy Now</le-button>
</le-stack>
</le-card><le-stack direction="horizontal" wrap gap="16px" align="stretch">
<le-box>Item 1</le-box>
<le-box>Item 2</le-box>
<le-box>Item 3</le-box>
</le-stack><le-button variant="solid" color="primary">Primary</le-button>
<le-button variant="outlined" color="secondary">Secondary</le-button>
<le-button variant="clear" color="danger">Delete</le-button>Le-Kit includes a CMS editing mode that enables inline content editing and component configuration. This is useful for building visual editors and CMS interfaces.
<!-- Enable on the entire page -->
<html mode="admin">
<!-- Or on specific sections -->
<le-card mode="admin">
<!-- This card is now editable -->
</le-card>
</html>In admin mode, components display:
- Inline text editing for content slots
- Settings popovers for component properties
- Drop zones for adding new components
Admin mode requires the custom-elements.json manifest file to be served by your application. This file contains component metadata used by the property editors.
- Copy the manifest to your public/static folder:
cp node_modules/le-kit/custom-elements.json public/custom-elements.json- Configure the manifest URL (optional, if not served at
/custom-elements.json):
import { configureLeki } from 'le-kit';
configureLeki({
manifestFile: 'custom-elements.json'
});The default manifestFile is custom-elements.json. Call configureLeKit() before any admin-mode components are rendered.
Le-Kit supports all modern browsers:
- Chrome 79+
- Firefox 70+
- Safari 14+
- Edge 79+
MIT License — see LICENSE for details.
Contributions welcome! Please read our contributing guidelines before submitting a PR.