Components

<loomi-accordion> / <loomi-accordion-item> is a simple stack of clickable headers that when clicked on, expand to reveal their content or collapse to hide…

<loomi-alert> — an inline alert message. The default uses the primary palette with no leading icon. Four explicit types add semantic colors and icons. Alerts…

<loomi-arc-meter> — a semi-circle status meter with evenly spaced marker stops. It is useful for small status summaries such as risk, protection level,…

<loomi-autocomplete> is a text field with a suggestion panel. It follows the same spacing, borders, focus ring, labels, and dark-mode tokens as <loomi-input>…

<loomi-avatar> — a rounded image or initials avatar with an optional status dot. Wrap several in <loomi-avatars> to stack them with an optional +N bubble. A…

<loomi-bell> — a notification bell icon with an optional (optionally animated) status dot, for telling users where to find notifications and whether they have…

<loomi-bottom-nav> and <loomi-bottom-nav-item> — a mobile bottom navigation bar with icons, labels, badges, eight active-state styles, and a routing-agnostic…

<loomi-button> — a themeable, framework-agnostic button web component built with Lit.

<loomi-button-group> and <loomi-button-group-item> — a horizontal row of segmented toggle buttons with shared sizing, radius, icons, colors, outline mode, and…

<loomi-calendar> — a production calendar and resource scheduler for admin and SaaS templates.

shadcn/ui-style card primitives for LoomiUI. Compose a card from <loomi-card> and its loomi-card-* parts — the same structure as [shadcn/ui…

<loomi-centered-content> — vertically and horizontally centers its content. Great for sign-in screens, empty pages and hero sections.

<loomi-chart> is a lightweight SVG chart component for quick visuals. Choose from bar, line, area, pie, donut, radar, radial, scatter, or heatmap, and pass a…

<loomi-chat-window> and <loomi-chat-message> for one-to-one and group chat UIs.

<loomi-checkbox> — a themeable checkbox available in the full loomi palette. **Form-associated**: submits value (default 'on') under name when checked.

<loomi-checkcards> — selectable cards, a prettier alternative to checkboxes or radio groups. Define content in a <loomi-checkcard> and give it a value — that's…

<loomi-clipboard> wraps text or content and appends a copy icon button. When clicked, it copies the wrapped text and briefly shows subtle copied feedback.

<loomi-colorpicker> — pick a color. Uses the native color input by default; pass a comma-separated colors list for a custom swatch palette instead.…

<loomi-command-palette> — a keyboard-first navigation and action launcher for admin and SaaS templates.

<loomi-contact-card> — a ready-made card for displaying a contact, with avatar, name, position and contact rows. Saves you from manually building this layout…

<loomi-context-menu> gives any region a Loomi-styled right-click action menu. It follows the same visual language and item API as <loomi-dropmenu>, but opens…

<loomi-countries> — a searchable country dropdown with a flag icon beside every name. Defaults to a full built-in country list (mode='names'); set mode='phone'…

<loomi-creditcard> — a flippable credit-card input. The front face holds the card number, cardholder name, and expiry; an edge button flips the card to its…

<loomi-data-grid> — a modular data grid. The core is deliberately lean (rendering, sorting, pagination, selection, column resizing, sticky headers, keyboard…

<loomi-date-range-picker> — a reporting-friendly range control for dashboards, tables, exports, and billing views.

<loomi-datepicker> — a calendar date picker (single or range) with locale-aware month/weekday names. **Form-associated**: submits the formatted date(s) under…

<loomi-divider> — a themeable content divider for separating layout regions horizontally or vertically.

<loomi-drawer> — a panel that slides in from the edge of the screen, with configurable size, an optional backdrop, and focus management built in.

<loomi-dropmenu> is for quick actions: profile menus, row actions, account menus, and small command lists. It is different from [<loomi-select>](../select): a…

<loomi-emoji-picker> is a searchable, keyboard-friendly emoji picker web component. The trigger is the emoji itself — clicking it opens a dropdown (built on…

<loomi-empty-state> — a friendly placeholder for empty content, so users see a helpful message instead of a boring blank page. Comes with a built-in…

<loomi-fab> — a floating action button. On its own it's a single circular action button; add <loomi-fab-item> children and it becomes a speed-dial menu.

<loomi-filepicker> — a drag-and-drop file picker with previews. Keeps a real <input type='file'> in sync, so it submits inside a <form> with…

<loomi-filter-builder> — a structured filter editor for tables, reports, CRM lists, and server-side query workflows.

<loomi-floating-panel> — a draggable, resizable panel that floats above the page, unanchored to any trigger. Think devtools panel, help widget, or a chat…

<loomi-horizontal-line-graph> — a single proportion bar split into colored segments, with an optional legend. Good for showing how a whole breaks down into…

<loomi-icon> — render an icon from the shared [@loomidev/icons](../icons) registry by name, or any custom SVG via the default slot.

<loomi-input> — a themeable text input with a floating label, text/icon prefixes & suffixes, contextual hints, selectable affixes, a clearable field, numeric…

<loomi-lightbox-image> — click an image to view it fullscreen. It wraps a single existing image with no shared container or parent gallery required, so it's a…

<loomi-listview> — a divided list of <loomi-listview-item> rows. It mimics <ul><li>: the component only draws the dividing lines between items — what goes…

<loomi-modal> — an overlay dialog with types, sizes, and action buttons.

<loomi-notification> — a container for stacked, auto-dismissing toasts. Unlike [@loomidev/alert](../alert), notifications aren't permanently visible — they're…

<loomi-number> — a themeable number stepper with increment/decrement buttons, min/max/ step enforcement and a floating label. **Form-associated**.

<loomi-otp> — a one-time-passcode (OTP) input of N boxes with auto-advance and paste support. It's common to send users a 4–6 character code via email or SMS…

<loomi-pagination> — page controls driven by total, page-size and page. The component this very docs site uses to render its own [<loomi-table>](../table)…

<loomi-password> — a form-associated password field with reveal, prefixes, validation and neutral strength hints.

<loomi-photo-gallery> — an album grid built from <loomi-photo-gallery-item> children, with a toolbar (album list, zoom, square thumbnails, slideshow) and a…

<loomi-popover> — a floating rich-content panel opened on click or hover. Unlike a tooltip, it can contain links, lists, images, or any custom markup — not…

<loomi-processing> — a process indicator with processing (spinner), success and failed states. Best used inside a [<loomi-modal>](../modal) while an async task…

<loomi-profile-menu> — a compact profile trigger with avatar, name, description, chevron, and a dropdown menu. It composes [<loomi-card>](../card),…

<loomi-progress-bar>, <loomi-progress-circle>, and <loomi-progress-steps> — horizontal, circular, and stepped progress indicators.

<loomi-progress-steps> and <loomi-progress-step> show where a user is in a multi-step flow such as checkout, onboarding, import wizards, or approval workflows.

<loomi-qrcode> renders a real QR code from a URL or short text value. It includes optional scanner-style corner brackets, a gradient fill, and an animated scan…

<loomi-radio> — a themeable radio button. Give radios in a group the same name and they become mutually exclusive (coordinated across the same DOM root, since…

<loomi-rating> — a 0–5 rating control as stars, hearts or thumbs-up. **Form-associated**: submits the rating under name.

<loomi-resizable-panel-group> lays out resizable panels separated by draggable handles — similar to [shadcn/ui…

<loomi-scroller> turns ordinary HTML into a continuously moving row or column. It is useful for news tickers, testimonials, partner logos, product images,…

<loomi-select> — a themeable custom select. Supports a data array (or JSON string), manual <option> children, search, multiple selection, images and a floating…

<loomi-side-nav> is an in-container navigation rail that slides between a full navigation, an icon-only rail, and a hidden state.

<loomi-slider> — select a numeric value with a slider, instead of clicking increment/decrement arrows or typing a value directly. **Form-associated**: submits…

<loomi-sortable> — a SortableJS-inspired drag-and-drop list. Provide rows via the items array ({ id, label, meta?, locked?, filtered?, className? }) and read…

<loomi-spinner> — a themeable loading spinner in the full loomi palette.

<loomi-statistic> — a dashboard stat showing a number and label, with optional currency, an icon, and a loading state. Takes up the full width of its parent.

<loomi-tabs> builds a heading bar from its <loomi-tab> children and toggles which panel is visible. There is no separate heading/body/content wiring to keep in…

<loomi-table> — a Loomi data table with manual rows, dynamic data, search, sorting, pagination (via [<loomi-pagination>](../pagination)), selectable and…

<loomi-tag> — a themeable label/badge for grouping items or showing status. Faint or dark shade, optional outline, rounded, tiny, and a close button. Group…

<loomi-tag-input> is a form-associated tag entry field styled like <loomi-input>. Type a word or phrase, press Enter, and it becomes a removable gray outline…

<loomi-text-editor> is a themeable rich-text editor web component with a native browser editing surface, a configurable toolbar, Loomi icons, Loomi tooltips,…

<loomi-textarea> — a themeable multi-line text input with a floating label and inline validation. **Form-associated**: its value submits with the surrounding…

<loomi-theme-switcher> — a light/dark/system theme toggle, so you don't have to build your own theme-switching mechanism. Persists the choice to localStorage…

<loomi-timeline-item> entries grouped in <loomi-timeline> — display events in chronological order, like an activity feed.

<loomi-timepicker> — pick a time, as a popup (input + panel) or inline, in 12- or 24-hour format. **Form-associated**: submits a formatted time (e.g. 3:25PM or…

<loomi-timer> is an animated count up/down timer that displays separate day/hour/minute/second digit segments, each labeled underneath, with a progress halo,…

<loomi-timezonepicker> — a searchable dropdown over the full IANA timezone database (Intl.supportedValuesOf('timeZone')). Each row shows its live local time…

<loomi-toggle> — a themeable toggle/switch (a checkbox, spiced up). **Form-associated**: submits value (default 'on') under name when checked.

<loomi-tooltip> — shows a short tooltip on hover/focus of its trigger content.

<loomi-video> is a themeable wrapper around the native <video> element. The browser's real media element does all the codec/format/network work under the hood;…