Overview

Accordion

A vertically stacked set of expansion panels. Follows Material Design 3 expansion panel guidelines.

Avatar

The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

Badge

The badge component is used to display a small amount of information to the user.

Banner

Banners show short, prominent contextual messages with optional icon and description.

Bottom Sheet

Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants per Material Design 3.

Breadcrumb

A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.

Button

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Button Group

Group a series of buttons together on a single line with the button group, and super-power.

Calendar

A Material 3 inspired full calendar component for displaying events in day, week, or month views.

Canvas

A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.

Card

A Material 3 inspired card surface for grouping related content.

Chart Bar

A vertical bar chart that follows Material Design 3 color and spacing tokens.

Chart Doughnut

A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.

Chart Pie

A pie chart is a circular statistical graphic that visually represents numerical proportions.

Chart Stacked Bar

A stacked bar chart that groups series by category using Material Design 3 tokens.

Checkbox

Captures boolean input with an optional indeterminate mode.

Chip

Chip component for displaying compact information with optional actions.

Circular Progress

A circular progress indicator is a visual representation of progress toward a specific goal.

Clock

Displays the current time in a given timezone.

Code Editor

A Monaco-based code editing component with syntax highlighting and theming.

Code Highlighter

A component that provides syntax highlighting for code snippets.

Condition Builder

A condition builder component that allows users to construct complex filter conditions using a visual rule-based interface with predicates, compound expressions, and logical operators.

Container

A responsive container component for layout.

Date Picker

The Date Picker component is used to capture date user input.

Divider

The divider component is used to visually separate content.

Dropdown Button

A button that opens a dropdown menu when clicked.

Elevation

Adds elevation to an element.

Empty State

A message that displays when there is no information to display.

FAB

The FAB (Floating Action Button) represents the primary action on a screen.

Field

Wrapper for form fields with label and help text.

Flow Designer

Low-code business process flow designer with swimlane layout, undo/redo, and interactive editing.

WIP

Focus Ring

Adds a focus ring to an element.

HTML Editor

A WYSIWYG HTML editor component with a Material 3 styled toolbar.

Icon

Icons are visual symbols used to represent ideas, objects, or actions.

Icon Button

Icon buttons allow users to take actions, and make choices, with a single tap.

Image

An image component with lazy loading and theme support.

Input

The Input component is used to capture user input.

Linear Progress

A linear progress indicator is a visual representation of progress toward a specific goal.

Link

The link component is used to navigate to a new page or section within the current page.

Menu

A list of menu items.

Modal

A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.

Navigation Rail

A vertical side navigation for medium-sized screens, following Material Design 3 specs.

Notification

Notifications communicate contextual status, errors, warnings, and success messages.

Notification Manager

The Notification Manager handles the organization and display of notifications within the application.

Number Counter

Displays a number with commas for thousands.

Number Field

The Number Field component is used to capture numeric user input.

Pagination

A pagination control with page size selector, item count display, and previous/next navigation.

Popover

Displays additional information in a floating panel anchored to a trigger element.

Popover Content

Content container for the wc-popover component.

Ripple

Provides ripple effect for interactive elements.

Search

A Material 3 search bar for filtering and finding content.

Segmented Button Group

A container for segmented buttons following Material Design 3.

Select

A dropdown select component supporting single and multi-select with optional typeahead search.

Sidebar Menu

A sidebar menu is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable items.

Side Sheet

Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants per Material Design 3.

Skeleton

Adds a skeleton effect to an element.

Slider

Sliders allow users to make selections from a range of values.

Snackbar

Snackbars provide brief messages about app processes at the bottom of the screen.

Spinner

A spinner component that animates a circular shape.

Split Button

A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.

Switch

Captures boolean input with an on/off switch interaction.

Tab Group

The tab group component is used to display multiple panels of content in a container.

Table

A configurable component for displaying tabular data.

Tabs

Container for tab components.

Tag

Tag component for displaying labels or values with optional dismiss functionality.

Textarea

The Textarea component is used to capture user input.

Time Picker

The Time Picker component is used to capture time user input.

Toolbar

A Material 3 toolbar / app bar for navigation and actions.

Tooltip

Displays a tooltip for an element.

URL Field

A field for entering and displaying URLs with validation.

SVG

An SVG component with lazy loading and optional preview support.