Components reference
Alacris UI ships 69 custom elements conforming to the Material Design 3 specification. Every component is zero-dependency, works with standard HTML/ESM, and integrates reactively with @alacris/core signals.
Open the Interactive Live CatalogExplore, test, and theme every component live in your browser.
1. Buttons & Actions
Section titled “1. Buttons & Actions”| Tag | Summary | Key Props & Slots |
|---|---|---|
<ui-button> |
Material button with ripples and state layers | `variant=“filled |
<ui-icon-button> |
Circular icon button | icon, selected-icon, `variant=“standard |
<ui-fab> |
Floating action button | icon, label, `size=“sm |
<ui-fab-menu> |
Speed dial expandable FAB menu | label, `direction=“up |
<ui-button-group> |
Visual clustering for buttons | label, slots: default |
<ui-toggle-button> |
Segmented button item | value, icon, disabled, slots: default |
<ui-toggle-group> |
Segmented button coordination | value, multi, disabled, label, @change |
<ui-split-button> |
Primary action + dropdown trigger | `variant=“filled |
2. Text Fields, Inputs & Pickers
Section titled “2. Text Fields, Inputs & Pickers”| Tag | Summary | Key Props & Events |
|---|---|---|
<ui-text-field> |
Floating label text field and textarea | `variant=“filled |
<ui-autocomplete> |
Combobox with live filtering | options, value, label, freeSolo, `variant=“filled |
<ui-select> |
Material select dropdown | options, value, label, `variant=“filled |
<ui-option> |
Custom option item for select | value, label, disabled, slots: leading, trailing |
<ui-checkbox> |
Three-state checkbox | checked, indeterminate, disabled, error, @change |
<ui-radio> |
Radio button | value, checked, disabled, slots: default |
<ui-radio-group> |
Radio group manager | value, name, disabled, @change |
<ui-switch> |
Animated switch with MD3 physics | checked, icons, disabled, label, @change |
<ui-slider> |
Continuous / discrete / range slider | value, min, max, step, discrete, range, rangeStart, rangeEnd, @change |
<ui-rating> |
Star rating with hover preview | value, max=5, half, disabled, readonly, @change |
<ui-search> |
Search bar and expanding search view | value, placeholder, active, @input, @search, @clear |
<ui-date-picker> |
Calendar and date range picker | value, range, rangeStart, rangeEnd, `variant=“docked |
<ui-time-picker> |
Radial dial and numeric time picker | value, `format=“12h |
Text Field & Textarea Examples
Section titled “Text Field & Textarea Examples”<!-- Single-line text field (filled and outlined) --><ui-text-field label="Username" variant="outlined" helper="Choose a unique handle"></ui-text-field>
<!-- Multiline textarea without placeholder: label rests on first line and floats on focus --><ui-text-field label="Comments" variant="outlined" type="textarea" rows="4" helper="Focus to float label"></ui-text-field>
<!-- Multiline textarea with placeholder (label starts docked in floating position) --><ui-text-field label="Bio" variant="outlined" type="textarea" rows="3" placeholder="Tell us about yourself..." maxlength="160"></ui-text-field>3. Containment & Overlays
Section titled “3. Containment & Overlays”| Tag | Summary | Key Props & Behavior |
|---|---|---|
<ui-dialog> |
Modal dialog with focus trap | open, headline, persistent, @close (`reason: ‘esc’ |
<ui-sheet> |
Modal & standard bottom sheet with velocity swipe dismiss | open, `variant=“modal |
<ui-side-sheet> |
Modal & standard side sheet with velocity swipe dismiss | open, `variant=“modal |
<ui-drawer> |
Navigation drawer with velocity swipe dismiss | open, `variant=“modal |
<ui-card> |
Elevated, filled, and outlined cards | `variant=“elevated |
<ui-accordion> |
Expansion panels manager | multi, @change |
<ui-accordion-item> |
Expandable panel with smooth height | value, headline, expanded, disabled, @ui-accordion-toggle |
<ui-carousel> |
Touch and snap carousel | index, `variant=“multi-browse |
<ui-carousel-item> |
Slide item for carousel | slots: default |
<ui-menu> |
Anchored popup menu | open, placement, slots: anchor, default, @select |
<ui-menu-item> |
Menu action item | value, icon, disabled, danger, slots: default, trailing |
<ui-surface> |
MD3 elevation surface container | `role=“surface |
<ui-backdrop> |
Modal scrim backdrop | open, @click |
<ui-container> |
Responsive page container | `size=“sm |
<ui-stack> |
Flex layout helper | `direction=“row |
<ui-divider> |
Semantic horizontal or vertical line | inset, vertical |
4. Navigation
Section titled “4. Navigation”| Tag | Summary | Key Props & Features |
|---|---|---|
<ui-app-bar> |
Top app bar | `variant=“small |
<ui-bottom-app-bar> |
Bottom toolbar with action slots | fab, slots: default, actions |
<ui-toolbar> |
Compact action toolbar | slots: default |
<ui-bottom-nav> |
Bottom destination bar | value, @change, slots: default |
<ui-nav-rail> |
Vertical navigation rail | value, `alignment=“top |
<ui-nav-item> |
Destination item for nav bars and rails | value, icon, selected-icon, label, badge |
<ui-tabs> |
Scrollable tab strip | value, `variant=“primary |
<ui-tab> |
Individual tab heading | value, icon, slots: default |
<ui-tab-panel> |
Paired content panel for tab | value, active, slots: default |
<ui-breadcrumbs> |
Breadcrumb trail | separator, slots: default |
<ui-pagination> |
Page number windowing | page, count, siblingCount, @change |
<ui-stepper> |
Multi-step progress tracker | active, vertical, slots: default |
<ui-step> |
Step item | `state=“active |
5. Communication & Feedback
Section titled “5. Communication & Feedback”| Tag | Summary | Key Props & Features |
|---|---|---|
<ui-badge> |
Numeric or dot badge | value, max=99, dot, slots: default |
<ui-alert> |
Status notification banner | `severity=“info |
<ui-snackbar> |
Toast message with queue support | open, message, action, duration=4000, closeButton, @close |
<ui-tooltip> |
Anchored popup tooltip | content, placement, rich, title, slots: default |
<ui-progress> |
Linear progress indicator | value (0..100 or indeterminate), fourColor, buffer |
<ui-spinner> |
Circular progress spinner | size, strokeWidth |
<ui-loading-indicator> |
Containerized loading indicator | label, fullscreen |
6. Data Presentation & Utilities
Section titled “6. Data Presentation & Utilities”| Tag | Summary | Key Props & Features |
|---|---|---|
<ui-table> |
Full-featured data table | columns, rows, sortable, filterable, groupable, paginate, pageSize, @change |
<ui-table-toolbar> |
Search, column toggles, and export toolbar | search, exportCsv, density |
<ui-table-footer> |
Pagination and aggregation footer | totalRows, page, pageSize, @page-change |
<ui-list> |
Material list wrapper | dense, interactive, slots: default |
<ui-list-item> |
List item with 1-3 lines | headline, supporting, trailing-supporting, slots: leading, trailing |
<ui-swipe-row> |
Android-style horizontal swipe-to-reveal row container | `open=“start |
<ui-chip> |
Assist, filter, and input chips | `variant=“assist |
<ui-chip-set> |
Chip collection | multi, value, @change |
<ui-avatar> |
Profile avatar with fallbacks | src, alt, name, icon, `size=“sm |
<ui-skeleton> |
Shimmering loading placeholder | `variant=“text |
<ui-icon> |
Material Symbols & SVG icon | name, size, fill |
<ui-text> |
Type scale typography | `variant=“display-lg..sm |
Interactive Live Demo
Section titled “Interactive Live Demo”To explore live interactive demonstrations with source code for every component and custom theme token controls:
Launch Component Catalog & Theme PlaygroundReal custom elements running in real browser DOM. Test inputs, transitions, and theming live.