UI Components

Polished web components with clear demos and practical UI patterns.

@manufosela/app-modal

<dialog> on steroids — modal web component with focus trap, configurable buttons, theming, and two operation modes. Built on native <dialog> for accessibility.

@manufosela/arc-slider

A customizable arc slider web component with gradient colors, built with Lit

@manufosela/before-after

Before/after image comparison slider web component

@manufosela/behaviour-accordion

<details>/<summary> on steroids — accordion web component with exclusive mode, keyboard navigation, theming, and programmatic control. Built on native <details> for accessibility.

@manufosela/calendar-inline

Date picker on steroids — inline calendar with range selection, month/year picker views, full WAI-ARIA keyboard navigation, and form association. 100% accessible.

@manufosela/canvas-polygon

Canvas-based regular polygon web component with Lit 3

@manufosela/capture-image

Webcam capture component with zoom, pan, snap, mask overlay, and save. Frame exactly what you want before capturing.

@manufosela/card-rain-section

Scroll-driven card rain animation section with drop and zoom modes

@manufosela/circle-percent

A circular progress indicator web component with animated SVG arc and customizable styling, built with Lit

@manufosela/circle-steps

Step indicator web component with circular progress visualization

@manufosela/click-clock

Countdown timer and clock web component

@manufosela/data-card

A versatile card web component for displaying data with optional cover image, icon, links, and modal info, built with Lit

@manufosela/device-card-stack

Accordion-style card stack with 3D perspective and image preview panel

@manufosela/element-card

Card component with title, description, cover image and slotted grid content, built with Lit 3

@manufosela/header-nav

Responsive header navigation web component with hamburger menu

@manufosela/hero-scroll-animation

Hero section with scroll-driven parallax animation and image reveal

@manufosela/historical-line

A horizontal timeline visualization web component for displaying historical data, built with Lit

@manufosela/lcd-digit

LCD-style digit display web component with Lit

@manufosela/loading-layer

A customizable loading overlay web component with animated spinner, built with Lit

@manufosela/marked-calendar

Interactive calendar web component for tracking moods, habits, or marking dates

@manufosela/modal-dialog

[DEPRECATED — use @manufosela/app-modal] Modal dialog web component.

@manufosela/multi-carousel

Responsive multi-slide carousel web component with navigation and arrows

@manufosela/multi-select

Multi-select dropdown web component with checkboxes

@manufosela/nav-list

Horizontal navigation list web component with selection support

@manufosela/photo-collage

A photo collage web component with random rotations, polaroid style, image cycling, and zoom on click

@manufosela/qr-code

QR code generator web component

@manufosela/radar-chart

SVG-based radar/spider chart web component

@manufosela/rich-inputfile

Enhanced file input web component with preview and validation

@manufosela/rich-select

A customizable rich select dropdown web component with search, keyboard navigation, and extensive styling options, built with Lit

@manufosela/slide-notification

Slide-in notification web component from the right edge

@manufosela/slider-underline

Range slider web component with underline track style

@manufosela/stars-rating

An interactive star rating web component with Lit

@manufosela/tab-nav

Accessible tab navigation web component with keyboard support

@manufosela/theme-toggle

A light/dark theme toggle web component with smooth transitions, built with Lit

@manufosela/toast-notification

Toast notification web component with Lit