Panel 1 Summary text Content Panel 2 Content

Accordion

A vertically stacked set of expansion panels.

Alert

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

Large Headline

App Bar

A top app bar for page-level navigation and actions.

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.

Bottom Sheet

Bottom Sheet

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

Home Category Current Page

Breadcrumb

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

Button

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 full calendar component for displaying events in day, week, or month views.

Canvas

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

Title

Supportive text

Card

A card surface for grouping related content.

Chart Bar

A vertical bar chart that follows 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 tokens.

Checkbox

Captures boolean input with an optional indeterminate mode.

Chip content

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.

  function helloWorld() {
    console.log('Hello, world!');
  }

Code Highlighter

A component that provides syntax highlighting for code snippets.

Color Picker

A color picker component for selecting colors via a hue/saturation/value interface.

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.

Content

Container

A responsive container component for layout.

Date Picker

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

or

Divider

The divider component is used to visually separate content.

Actions Edit Delete

Dropdown Button

A button that opens a dropdown menu when clicked.

Level 2

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.

some text

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.

Web Component

Focus Ring

Adds a focus ring to an element.

Web Component

Footer

WIP

The footer component represents the bottom section of a web page.

HTML Editor

A Tiptap-powered HTML editor with visual and source editing modes.

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.

Notifications Manage alerts and reminders 3

Item

A primitive element used to build higher-level item components such as menu-item, navigation-item, and list-item. Provides start, text, and end slots for flexible content composition.

Linear Progress

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

Link

Link

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

Inbox 24 Shivaji Varma Software Engineer 7

List

A list container for one or more list items.

Item 1 Item 2

Menu

A list of menu items.

MODAL

Modal

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

Home Search

Navigation Rail

A vertical side navigation for medium-sized screens,.

Record saved

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.

Open popover

Popover body text goes here.

Popover

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

Ripple Effect

Ripple

Provides ripple effect for interactive elements.

Search

A search bar for filtering and finding content.

Day Week Month

Segmented Button Group

A container for segmented buttons.

Apple Banana

Select

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

Side Sheet

Side Sheet

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

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.

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.

Save Save as draft Save and publish

Split Button

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

SVG

An SVG component with lazy loading and optional preview support.

Switch

Captures boolean input with an on/off switch interaction.

Table

A configurable component for displaying tabular data.

Tab 1 Tab 2

Tabs

Container for tab components.

Tag

Tag

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

Heading

This is a paragraph.

Text

WIP

The footer component represents the bottom section of a web page.

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 toolbar / app bar for navigation and actions.

Tooltip

Tooltip

Displays a tooltip for an element.

URL Field

A field for entering and displaying URLs with validation.