@liwe3/webcomponents

Framework-agnostic web components built with vanilla TypeScript.
Explore our interactive component demos below.

📅

DateSelector

A flexible date picker with single date and range selection modes. Features keyboard navigation, programmatic API, and custom events.

📋

PopoverMenu

A customizable menu bar with nested submenus. Supports unlimited nesting levels, separators, disabled items, and dynamic menu updates.

🍞

Toast

A flexible toast notification system with multiple types, auto-dismiss, custom icons, and action buttons.

💬

Dialog

A customizable dialog with HTML body, modal backdrop, custom buttons, and keyboard/click controls.

🌳

TreeView

A customizable tree view with infinite depth support, checkboxes for selection, expandable/collapsible folders, and customizable icons.

🗂️

Media Manager Layout

Dark media-library UI replica using CSS3 and TreeView for the left navigation.

📦

ContainerBox

A container that wraps elements and shows a menu on hover in configurable positions. Integrates with PopoverMenu for rich context menus.

🚪

Drawer

Expandable, shrinkable, and closable container with smooth animations. Supports horizontal and vertical directions with customizable timing.

🖼️

ImageView

A versatile image component with support for different sizing modes (cover, contain, stretch, 1:1), positioning, and visual effects like bokeh and panning.

📤

ChunkUploader

A file uploader with drag & drop, file previews, and chunked upload support. Features progress tracking, file validation, and multipart upload protocol.

CheckList

A customizable checklist with progress bar, JSON support, and task management.

Smart-Select

An extremely versatile select/dropdown component with search, multi-select, and image support.

🔘

ButtonToolbar

A customizable toolbar with groups of buttons, supporting horizontal/vertical orientation, icons, and different button types.

🤖

AITextEditor

An intelligent text editor with AI-powered text continuation suggestions. Type, pause, and let AI suggest what comes next.

📝

AIMarkdownEditor

A markdown editor with AI-powered text completion and formatting toolbar.

👁️

MarkdownPreview

A markdown renderer that dynamically loads a parsing library (marked.js) at runtime.

✂️

ResizableCropper

A container that allows drag-to-scale (resize via corner handles) and drag-to-crop (pan content via side handles) with aspect ratio support.

🗨️

ComicBalloon

Interactive comic speech bubbles with four distinct styles (talk, cloud, whisper, rectangle) and draggable arrow handlers.