Kempo UI Icon Kempo UI

Kempo UI

Kempo UI Icon

Components

Accordion Aside Calendar Card Chat Code Editor Combobox ColorPicker Content Slider Context Dialog Dropdown Filter List FocusCapture HTML Editor Markdown Markdown Editor Icon Import Nav Nav Spacer Photo Viewer Pagination Progress Resize Show More Slider Sortable Speech To Text Spinner Split Table Tabs Tags Text To Speech Theme Select Theme Switcher Time Timestamp Toast Toggle Tree Video Voice Selector
Base Components
Shadow Component Light Component Hybrid Component Button
Utils
closestAcrossShadow cookie context debounce drag elevation formatTimestamp object propConverters sanitizeHtml string theme type voice wait

Kempo UI Icon Kempo UI

A lit-based web component library.

Current Version: unknown

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.

Aside

Enhanced sidebar component with push and overlay modes.

Calendar

Month-grid date picker widget with single and range selection modes.

Card

Container component with optional labels and border styling.

Chat

Chat-room widget with rich-text input, send-on-enter option, and per-message state tracking.

Code Editor

Monaco-powered code editor with language support and theme integration.

Combobox

Searchable dropdown with debounced search events, dynamic options, and keyboard navigation.

ColorPicker

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

Content Slider

Swipeable carousel for images and content with navigation controls.

Context

Non-rendering state container for sharing data and notifying descendant components of changes.

Dialog

Modal dialogs with focus trapping and customizable buttons.

Dropdown

Action menus with keyboard navigation and customizable positioning.

Filter List

Show or hide items based on a search term matching their filter keywords.

FocusCapture

Trap keyboard focus within a container for accessibility.

HTML Editor

WYSIWYG editor with formatting tools and dual editing modes.

Markdown

Renders the markdown text inside the element as sanitized HTML in place.

Markdown Editor

Markdown editor with Write/Preview tabs, slot-based toolbars, and a tiny safe parser (no inline HTML).

Icon

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

Import

Dynamically load and include HTML snippets into your pages.

Nav

Fixed navigation bar with automatic elevation applied at the correct stacking level.

Nav Spacer

Auto-sizing spacer that offsets page content below a fixed nav bar.

Photo Viewer

Lightbox gallery for viewing images with zoom and navigation.

Progress

A progress bar for loading states.

Resize

Draggable handle to resize adjacent elements dynamically.

Segmented Control

Button group where one option can be selected at a time with support for custom sub-components.

Show More

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

Slider

Range input with configurable min, max, and discrete step snap points.

Sortable

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

Speech To Text

Microphone button that uses the Web Speech API to transcribe spoken input.

Spinner

Loading indicators with multiple styles and sizes.

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.

Tags

Input field for adding and removing tags with keyboard support.

Text To Speech

Button that speaks the given text aloud using the browser's SpeechSynthesis API.

Theme Select

Dropdown select for choosing between Light, Dark, and System Default themes.

Theme Switcher

Toggle between light, dark, and auto theme modes.

Time

Time picker with 12/24-hour display, configurable minute increments, and form submission.

Timestamp

Display formatted dates and times with relative formatting.

Toast

Notification messages that appear temporarily at screen corners.

Toggle

Switch component for boolean values with custom styling.

Tree

Hierarchical data visualization with collapsible branches and custom leaf types.

Video

Custom video player with slot-based controls, double-tap seeking, and playback persistence.

Voice Selector

Dropdown of available speech-synthesis voices, persisted via the voice utility for site-wide use.

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

closestAcrossShadow

closest() that walks past shadow-DOM boundaries to find an ancestor.

cookie

Functions for managing browser cookies.

context

Global or named shared state for vanilla JS components.

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.

sanitizeHtml

Whitelist HTML sanitizer for user-submitted rich text. Strips unsafe tags, attributes, and URL schemes.

string

Collection of functions for string manipulation and conversion.

theme

Centralized theme management with persistence and reactive updates.

type

Functions for checking and identifying JavaScript value types.

object

Functions for manipulating and analyzing JavaScript objects.

voice

Persisted speech-synthesis voice preference with pub/sub, mirroring the theme utility.

wait

Functions for creating delays and waiting for animation frames.