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

``bash
npm install le-kit
`

Quick Start

$3

The easiest way to use Le-Kit. Components are automatically loaded on-demand.

`html








Welcome


Your content here


Get Started

`

$3

Import only the components you need for smaller bundle sizes.

`tsx
// 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.

$3

`html







`

Available themes: default, dark, minimal, warm, gradient

$3

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

$3

Override CSS custom properties to match your brand:

`css
:root {
--le-color-primary: #6366f1;
--le-color-secondary: #8b5cf6;
--le-radius-md: 12px;
--le-space-md: 1rem;
}
`

Components

$3

- — Flexbox layout with gap, alignment, and direction control
- — Flexible container with padding and background options
- — Card container with header, content, and footer slots

$3

- — Button with variants (solid, outlined, clear) and colors

$3

- — Typography component with semantic variants

$3

- — Toast notifications and alerts

Usage Examples

$3

`html



Product Name

Product description goes here with all the details.

Cancel
Buy Now


`

$3

`html

Item 1
Item 2
Item 3

`

$3

`html
Primary
Secondary
Delete
`

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.

`html







`

In admin mode, components display:

- Inline text editing for content slots
- Settings popovers for component properties
- Drop zones for adding new components

$3

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.

1. Copy the manifest to your public/static folder:

`bash
cp node_modules/le-kit/custom-elements.json public/custom-elements.json
`

2. Configure the manifest URL (optional, if not served at /custom-elements.json):

`javascript
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.

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.