Kempo UI

A lit-based web component library.

Getting Started

Install using NPM.

npm install kempo-ui

or clone the git repo

git clone https://github.com/dustinpoissant/kempo-ui.git

or download directly

Download Zip

Components

Accordion

Collapsible sections with smooth animations and toggle controls.

Card

Container component with optional labels and border styling.

ColorPicker

Advanced color selection supporting all CSS color formats with alpha transparency.

Content Slider

Swipeable carousel for images and content with navigation controls.

Dialog

Modal dialogs with focus trapping and customizable buttons.

FocusCapture

Trap keyboard focus within a container for accessibility.

Icon

Display SVG icons from a collection with customizable size and color.

Import

Dynamically load and include HTML snippets into your pages.

Photo Viewer

Lightbox gallery for viewing images with zoom and navigation.

Resize

Draggable handle to resize adjacent elements dynamically.

Show More

Truncate long content with a "show more" button to expand.

Side Menu

Slide-out navigation drawer with focus management.

Sortable

Drag-and-drop lists with reordering and sort events.

Split

Resizable split panes with horizontal or vertical layouts.

Table

Feature-rich data tables with sorting, filtering, and pagination.

Tabs

Tabbed interface for organizing content into switchable panels.

Toast

Notification messages that appear temporarily at screen corners.

Theme Switcher

Toggle between light, dark, and auto theme modes.

Timestamp

Display formatted dates and times with relative formatting.

Toggle

Switch component for boolean values with custom styling.

Tree

Hierarchical data visualization with collapsible branches and custom leaf types.

Base Components

Shadow Component

Base class for components with shadow DOM and scoped styles.

Light Component

Base class for components that render directly to light DOM.

Hybrid Component

Base class combining shadow and light DOM rendering.

Utils

debounce

Delay function execution until after a specified wait period.

drag

Handle mouse and touch drag interactions with cleanup.

formatTimestamp

Format dates into human-readable relative or absolute strings.

propConverters

Type converters for Lit component properties and attributes.

string

Collection of functions for string manipulation and conversion.

type

Functions for checking and identifying JavaScript value types.

object

Functions for manipulating and analyzing JavaScript objects.

cookie

Functions for managing browser cookies.

wait

Functions for creating delays and waiting for animation frames.