@manufosela/ui-components

Polished web components with clear demos and practical UI patterns.

27
Components
54
Demos
936
Tests
Arc Slider
@manufosela/arc-slider

Curved slider control for precise values in a compact radial UI.

Input 44 tests 5.8 KB
Rich Select
@manufosela/rich-select

Custom dropdown with rich options, icons, and descriptive metadata.

Input 50 tests 5.7 KB
Circle Percent
@manufosela/circle-percent

Circular progress indicator with configurable colors and motion.

Display 33 tests 1.8 KB
Loading Layer
@manufosela/loading-layer

Full-screen loading overlay with spinner and optional message.

Feedback 24 tests 1.8 KB
Theme Toggle
@manufosela/theme-toggle

Theme switcher with persistence and system preference detection.

Utility 29 tests 2.1 KB
Stars Rating
@manufosela/stars-rating

Star rating component with half-star support and keyboard navigation.

Input 45 tests 2.1 KB
8
LCD Digit
@manufosela/lcd-digit

7-segment LCD digit display for counters and clocks.

Display 38 tests 1.8 KB
!
Toast Notification
@manufosela/toast-notification

Toast notifications with success, error, warning, and info variants.

Feedback 40 tests 2.7 KB
Modal Dialog
@manufosela/modal-dialog

Modal dialog with slots, size variants, and focus trap.

Layout 49 tests 2.7 KB
App Modal
@manufosela/app-modal

Feature-rich modal with configurable buttons and injected content.

Layout 30 tests 3.9 KB
Multi Select
@manufosela/multi-select

Multi-select dropdown with checkboxes, select-all, and clear-all.

Input 27 tests 2.8 KB
Slide Notification
@manufosela/slide-notification

Slide-in notifications with variants and auto-hide.

Feedback 28 tests 2.6 KB
Nav List
@manufosela/nav-list

Horizontal navigation list with keyboard support and event-driven control.

Navigation 23 tests 2.3 KB
📅
Marked Calendar
@manufosela/marked-calendar

Calendar for tracking habits, moods, and events with color legends.

Data 33 tests 4.6 KB
Multi Carousel
@manufosela/multi-carousel

Responsive carousel with smooth transitions and keyboard support.

Layout 24 tests 3.2 KB
QR Code
@manufosela/qr-code

QR code generator with configurable colors and download support.

Utility 36 tests 3.8 KB
Radar Chart
@manufosela/radar-chart

SVG radar chart for multi-axis data visualization.

Data 34 tests 2.7 KB
📎
Rich Inputfile
@manufosela/rich-inputfile

Enhanced file input with drag and drop, previews, and validation.

Input 45 tests 2.7 KB
🃏
Data Card
@manufosela/data-card

Versatile card with cover image, badges, and modal info.

Layout 25 tests 2.4 KB
Header Nav
@manufosela/header-nav

Responsive header navigation with hamburger menu and sticky option.

Navigation 33 tests 2.0 KB
Historical Line
@manufosela/historical-line

Horizontal timeline visualization for historical data.

Data 11 tests 1.7 KB
Click Clock
@manufosela/click-clock

Countdown timer, stopwatch, and real-time clock in multiple formats.

Utility 33 tests 2.0 KB
📆
Calendar Inline
@manufosela/calendar-inline

Inline calendar with date selection and localization.

Input 47 tests 2.7 KB
Behaviour Accordion
@manufosela/behaviour-accordion

Accessible accordion with smooth animations and keyboard navigation.

Layout 38 tests 1.7 KB
Tab Nav
@manufosela/tab-nav

Accessible tab navigation with keyboard support and smooth transitions.

Navigation 41 tests 1.9 KB
Circle Steps
@manufosela/circle-steps

Step indicator with circular progress and navigation controls.

Display 40 tests 2.3 KB
Slider Underline
@manufosela/slider-underline

Range slider with underline track style and value display.

Input 36 tests 2.2 KB