Build with Over 80 Components

Accordions are a vertically stacked set of interactive headings that each contain a title, representing a section of content.

Accordion items are used inside <wa-accordion> to create expandable sections with accessible headers.

Animated images display GIFs and WEBPs with controls to play and pause them on demand. Use them when you want motion but need to give users control over when it plays.

Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the Web Animations API.

Avatars represent a person or object with an image, initials, or icon. Use them in lists, comments, and profiles to give users visual context at a glance.

Badges draw attention to adjacent content by displaying a status, count, or label. Use them to highlight notifications, categorize items, or flag new activity.

Bar charts compare quantities across categories using rectangular bars. They work well for showing rankings, highlighting differences between groups, and tracking changes across time periods.

Breadcrumbs display a trail of links that show users where they are in a site's hierarchy. They help users understand the current location and navigate back to parent pages.

Breadcrumb items represent individual links inside a breadcrumb, typically one per level of the site hierarchy.

Bubble charts add a third dimension to scatter plots by varying the size of each data point. They are useful for visualizing relationships where a third variable adds meaning beyond a simple x/y correlation.

Buttons represent actions the user can take, such as submitting a form, opening a dialog, or navigating to another page.

Button groups combine related buttons into a single visual unit. Use them for toolbars, segmented controls, or any set of actions that belong together.

Callouts display important messages inline with surrounding content. Use them to highlight tips, warnings, errors, or other information users should not miss.

Cards group related content and actions inside a bordered container. Use them to present products, articles, user profiles, or any self-contained unit of information.

Carousels display a series of content slides along a horizontal or vertical axis, one or more at a time. Users can navigate between slides with controls, pagination, or autoplay.

Carousel items represent individual slides within a carousel.

Charts provide a flexible wrapper around Chart.js for building themed data visualizations. Use this component for advanced configuration such as mixed chart types, custom plugins, and direct Chart.js instance access.

Checkboxes let users toggle an option on or off, or select multiple items from a list. They also support an indeterminate state for partial selections in groups.

Color pickers let users choose a color from a visual palette or by entering a value. They support HEX, RGB, HSL, and HSV formats with optional alpha channel and swatch presets.

Comboboxes combine a text input with a listbox, allowing users to filter and select from predefined options or enter custom values.

Comparisons show the visual differences between two pieces of similar content using a draggable divider. Use them for before/after images, design revisions, or side-by-side previews.

Copy buttons copy text to the clipboard when the user activates them. They provide built-in success and error feedback so users know the copy worked.

Date inputs let users enter a date through a segmented field or select one visually from a popup calendar. They support locale-aware segment order, min and max constraints, and form validation.

Date pickers display a month grid for selecting a single date or a date range inline. Use them when dates need to remain visible, such as in scheduling interfaces or embedded inside another form control.

Details display a brief summary and expand to reveal additional content. Use them to progressively disclose information, group related FAQs, or hide advanced options.

Dialogs appear above the page and require the user's immediate attention. Use them for confirmations, forms, or focused tasks that interrupt the main flow.

Dividers visually separate or group adjacent elements with a horizontal or vertical line. Use them to establish rhythm and hierarchy within menus, toolbars, and layouts.

Doughnut charts show proportional data as slices of a ring with a hollow center. They offer a cleaner look than pie charts and work well in dashboards where the center space can provide additional context.

Drawers slide in from the edge of a container to expose additional options and information without navigating away. Useful for navigation menus, filters, and secondary content.

Dropdowns display a list of options triggered by a button or other element. They support keyboard navigation, submenus, and checkable items for building menus and context actions.

Dropdown items represent selectable entries within a dropdown menu, including standard actions, checkable items, and submenu triggers.

File inputs allow users to select files from their device.

Formats a number of bytes as a human-readable string with the appropriate unit, such as kB, MB, or GB. Supports both byte and bit units with configurable locale.

Formats a date or time for display using the specified locale and options. Powered by the Intl.DateTimeFormat API for consistent, localized output.

Formats a number for display using the specified locale and options, including currency, percent, and unit styles. Powered by the Intl.NumberFormat API.

Icons are scalable vector symbols that represent actions, content, or status throughout your application. They support Font Awesome and custom icon libraries with animation presets.

Fetches an external HTML file and embeds its contents inline on the page. Useful for reusing shared markup like headers, footers, and partials across multiple pages.

Inputs collect single-line data from the user, such as text, numbers, email addresses, and passwords. They support labels, hints, validation, and prefix or suffix slots.

Tracks immediate child elements and fires events as they move in and out of view. Useful for lazy loading, scroll-triggered animations, and viewport-aware interactions.

Known dates let users enter dates they already know — birthdays, expirations, document dates — through three separate day, month, and year fields shown in the locale's natural order.

Line charts show trends over time by connecting data points with line segments. Use them when the x-axis represents a sequential dimension and you want to emphasize the shape and direction of the data.

Markdown elements render markdown content as HTML directly in the browser, making it easy to display user-generated content or documentation without a server-side build step.

Mutation observers watch for changes to an element's DOM tree and emit an event when they occur. Provides a thin, declarative interface to the browser's MutationObserver API.

Number inputs let users enter and edit numeric values, with optional stepper buttons for incrementing and decrementing. Use them for quantities, measurements, and other numeric form fields.

Options represent the individual choices inside a select or similar form control. Each option holds a value and the label shown to the user.

Pages scaffold an entire application layout with header, navigation, sidebar, main content, aside, and footer regions. Use them to structure full pages with minimal markup and responsive behavior built in.

Pie charts show the proportional composition of a whole as slices of a circle. They work best with a small number of categories where the relative proportions matter more than exact values.

Polar area charts compare values using segments that radiate from a center point with varying radius. Unlike pie charts, each segment has an equal angle while the radius varies, making them useful for comparing magnitudes without visual bias.

Popovers display contextual content and interactive elements in a floating panel anchored to a trigger. Use them for rich tooltips, menus, or any content that appears on demand without navigating away.

Popups declaratively anchor one element to another and keep them positioned together as the page scrolls or resizes. Primarily a low-level building block for popovers, dropdowns, and tooltips.

Progress bars show how far along an ongoing operation is as a horizontal fill. Use them for file uploads, multi-step flows, or any task with measurable progress.

Progress rings show how far along a determinate operation is using a circular indicator. Use them as a compact alternative to progress bars when horizontal space is limited.

QR codes encode a URL or other short text into a scannable image, rendered client-side using the Canvas API. Use them to share links, contact info, or Wi-Fi credentials that visitors can scan with a phone.

Radar charts compare multiple variables at once by plotting data on a radial grid. They are well-suited for comparing profiles across several dimensions, such as skill assessments, product attributes, or performance metrics.

Radios represent a single option within a mutually exclusive set. Use them inside a radio group when users must pick exactly one choice from a small list.

Radio groups wrap a set of radios so they function as a single form control with one shared value. They handle keyboard navigation, labeling, and validation for the group as a whole.

Ratings display a numeric score as a row of selectable symbols, typically stars. Use them to capture quick feedback or show an average rating for a product or piece of content.

Relative times display a date as a localized phrase relative to now, such as "3 hours ago" or "in 2 days". The phrase updates automatically as time passes and respects the user's locale.

Resize observers watch their slotted elements for size changes and emit an event when they occur. Provides a thin, declarative interface to the browser's ResizeObserver API.

Scatter charts reveal relationships between two variables by plotting data points on a grid. They are ideal for identifying correlations, clusters, and outliers in datasets.

Scrollers wrap overflowing content in an accessible container with visual cues that help users recognize and navigate scrollable regions.

Selects let users choose one or more values from a dropdown list of predefined options. Use them in forms when a fixed set of choices needs to fit in limited space.

Skeletons show placeholder shapes where content will appear once it finishes loading, reducing perceived wait time and preventing layout shift.

Sliders let users choose a numeric value within a defined range by dragging a thumb along a track.

Sparklines display inline data trends as compact, visual charts.

Spinners indicate that an operation is in progress when the duration is unknown. Use them for loading states where a determinate progress bar isn't practical.

Split panels display two adjacent panels separated by a draggable divider, letting users resize each side to suit their workflow.

Switches toggle a single setting on or off and apply the change immediately, without requiring a form submission.

Tabs label and activate an individual panel inside a tab group.

Tab groups organize related content into a single container that displays one panel at a time, with tabs for switching between them.

Tab panels hold the content shown for a single tab inside a tab group.

Tags label, categorize, or represent selections with a compact visual marker. Use them for status indicators, filters, or removable chips.

Textareas collect multi-line text input from the user, with optional resizing and character counting.

Time pickers let users enter a time through a segmented field or select one visually from a popup column picker. They support 12- and 24-hour formats, optional seconds, and locale-aware segment order.

Toasts display brief, non-blocking notifications that appear temporarily above the page content.

Toast items are individual notifications displayed within a toast container.

Tooltips display brief contextual information when the user hovers, focuses, or taps a target element.

Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.

Tree items represent a single hierarchical node inside a tree, and can contain nested items that expand and collapse.

Videos are used to embed and play video content with custom controls and captions.

Video playlists wrap multiple <wa-video> elements into a playlist with navigation controls.

Zoomable frames embed iframe content with built-in controls for zooming, panning, and managing interaction.