le-kit

v0.1.12

Published

39 minutes ago

Themable web components library with CMS admin mode support

Downloads

933

0High
0Medium
0Low

leechy

Le-Kit

A themeable web component library built with Stencil, featuring a dual-mode system for production and CMS editing.

Features

🎨 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

Installation

npm install le-kit

Quick Start

Option 1: Lazy Loading (Recommended)

The 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>

Option 2: Individual Components (Tree-shakeable)

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();

Theming

Le-Kit ships with several built-in themes.

Via HTML link

<!-- 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

Via JavaScript/CSS import

// With a bundler that handles CSS imports
import 'le-kit/dist/themes/base.css';
import 'le-kit/dist/themes/default.css';

Custom Theming

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;
}

Components

Layout

<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

Actions

<le-button> — Button with variants (solid, outlined, clear) and colors

Content

<le-text> — Typography component with semantic variants

Feedback

<le-popup> — Toast notifications and alerts

Usage Examples

Card with Actions

<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>

Responsive Stack Layout

<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>

Button Variants

<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>

Admin Mode

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 Configuration

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({
  manifestUrl: '/assets/custom-elements.json'
});

The default manifestUrl is /custom-elements.json. Call configureLeki() before any admin-mode components are rendered.

Browser Support

Le-Kit supports all modern browsers:

Chrome 79+
Firefox 70+
Safari 14+
Edge 79+

License

MIT License — see LICENSE for details.

Contributing

Contributions welcome! Please read our contributing guidelines before submitting a PR.