🔗 🍽️ Examples & Recipes
Discover practical examples and patterns for building reactive, modular components with UIElement. Each example focuses on showcasing a specific feature or best practice, guiding you through real-world use cases.
🔗 Counter
A simple click counter. Gets initial value from inner span
element and increments it on click.
Source Code
Loading...
🔗 Number Formatter
Display a number with a specific format using Intl.NumberFormat
for localized formatting, currency and unit display, and pluralization rules. Gets locale from the component's or inherited lang
attribute. Full support for all options of Intl.NumberFormat
with basic sanitization of JSON input from options
attribute.
-
inherited (en):
-
de-CH:
-
fr-CH:
-
ar-EG:
-
zh-Hans-CN-u-nu-hanidec:
Source Code
Loading...
🔗 Pagination
Source Code
Loading...
🔗 Color Editor
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
- Lightness:
-
- Chroma:
-
- Hue:
-
- OKLCH:
-
oklch(
) - RGB:
- HSL:
ModuleColoreditor Source Code
Loading...
FormColorgraph Source Code
Loading...
CardColorscale Source Code
Loading...
ModuleColorinfo Source Code
Loading...
🔗 Gauge
Source Code
Loading...
🔗 Carousel
Fully accessible and responsive carousel component.
Slides
Source Code
Loading...
🔗 Combobox
A combobox component that allows users to select an option from a list.
- Amsterdam
- Berlin
- Copenhagen
- Dublin
- Edinburgh
- Frankfurt
- Geneva
- Helsinki
- Istanbul
- Jakarta
- Kairo
- London
- Madrid
- New York
- Oslo
- Paris
- Qingdao
- Rome
- Stockholm
- Tokyo
- Ulan Bator
- Vienna
- Warsaw
- Xi'an
- Yokohama
- Zurich
Tell us where you live so we can set your timezone for our calendar and notification features.
Source Code
Loading...
🔗 Dialog
ModuleDialog Source Code
Loading...
ModuleScrollarea Source Code
Loading...
🔗 Todo App
A todo app component that allows users to add, mark as complete, filter by status, and delete tasks. It showcases how to compose a todo app component using the following components:
<form-textbox>
for input field to add tasks<basic-button>
for submit button and delete buttons<form-checkbox>
for marking tasks as complete<basic-pluralize>
for displaying the number of tasks<form-radiogroup>
for filtering tasks by status
ModuleTodo Source Code
Loading...
FormTextbox Source Code
Loading...
BasicButton Source Code
Loading...
FormCheckbox Source Code
Loading...
BasicPluralize Source Code
Loading...
FormRadiogroup Source Code
Loading...
🔗 Lazy Loading
This example shows how to handle asynchronous data loading and error states. Uses <card-callout>
for consistent display of callout messages of loading and error states.
Loading...
ModuleLazy Source Code
Loading...
CardCallout Source Code
Loading...