Components

Every building block has a standard name, a pattern it belongs to, and a prompt you can hand to your AI. Pick a pattern on the left to filter.

Bottom Sheet

A panel that rises from the bottom of the screen: share, filter, pick a variant — thumb-reachable, swipe down to dismiss.

iOS Android HarmonyOS Mobile Web Overlays Bottom sheet Component

Breadcrumb

A one-line trail — Home / Category / Current — showing your level and letting you jump back up.

Web Desktop Navigation Content area Component

Basic Card

One piece of content per card: media on top, title and summary below, one or two actions.

All platforms Content Content area Component

Cart Item

One row in the cart: thumbnail, name, price, quantity stepper, and a checkbox — swipe to delete.

All platforms Commerce Content area Component

Checkout Form

The last stretch before paying: review items, pick an address, apply discounts, choose payment, place the order.

All platforms Commerce Content area Component

Dashboard Stat Cards

The row of metric cards on a dashboard home: today's orders, new users, conversion — each with a delta and a sparkline.

Web Desktop Data & Work Content area Component

Data Table

The backbone of admin UIs: one field per column, sortable headers, row actions, pagination at the bottom.

Web Desktop Data & Work Content area Component

Detail Hero

The opening block of a detail page: hero media, title, key facts, then the body — often with a sticky action bar.

All platforms Content Content area Component

Drawer / Sidebar Navigation

Navigation that slides in from the left or stays pinned there — the primary nav for dashboards and complex apps.

Web Desktop Tablet Navigation Left sidebar / drawer Component

Empty State

What shows when there's nothing yet: a small illustration, one line of explanation, and a way to add the first item.

All platforms Feedback Content area Component

404 Error Page

The page for a wrong turn: a big 404, one line of human explanation, and buttons back home or to search.

Web Feedback Full screen Component

Grouped List

A list with group headers: small group titles above each section; headers can stick, with an A–Z index for jumping.

All platforms Content Content area Component

HarmonyOS List (Schematic)

The grouped list used across HarmonyOS settings and content pages — self-drawn schematic from published guideline points; no official assets.

HarmonyOS Content Content area Component

HarmonyOS Bottom Tabs (Schematic)

The bottom primary navigation for HarmonyOS apps — a self-drawn schematic following Huawei's published design guidelines; no official assets.

HarmonyOS Navigation Bottom tab bar Component

Hero Section

The first screen of a landing page: one big headline, one supporting line, one primary button, product visual beside or below.

Web Marketing Content area Component

Image Carousel

A swipeable row of images — product photos, promo banners — with dot indicators showing position.

All platforms Media Content area Component

List Item

The universal content row: avatar or icon left, title and subtitle in the middle, chevron or value right.

All platforms Content Content area Component

Login Form

The form that gets users in: account + password or code, clear errors, optional social sign-in.

All platforms Account Content area Component

Masonry Grid

Two staggered columns of images at natural heights — the Pinterest-style browsing layout.

All platforms Content Content area Component

Bottom Tab Bar (Mobile)

The primary navigation bar fixed at the bottom of a mobile app: 3–5 destinations, icon over label, thumb-first.

iOS Android HarmonyOS Mobile Web Navigation Bottom tab bar Component

Modal Dialog

A box that appears center-screen over a dimmed backdrop: confirm a deletion, fill a small form, decide now.

All platforms Overlays Overlay Component

Notification List

The message center list: who sent what and when, red dots for unread, mark-all-read at hand.

All platforms Personal Content area Component

Onboarding Carousel

The first-run screens of an app: big illustration, one benefit per screen, dot indicator, ending in a Get Started button.

iOS Android HarmonyOS Mobile Web Onboarding Full screen Component

Picker / Select

Tap to open a list of options — city, date, category: choose from what exists instead of typing.

All platforms Forms Bottom sheet Component

Pricing Table

Three plans side by side — Free, Pro, Enterprise — with the middle one enlarged and badged Most Popular.

Web Marketing Content area Component

Product Card

The selling card: product image, name, price, and sales or rating — tap through to the detail page.

All platforms Commerce Content area Component

Profile Header

The top block of a Me page: avatar, nickname, a row of stats, and an edit button.

iOS Android HarmonyOS Web Personal Content area Component

Search Bar

The search input: magnifier icon, pill shape, light background, placeholder hinting what to search.

All platforms Search Top navigation Component

Search Results

The page after searching: the query stays on top, results below, with filters, sorting, and a no-results fallback.

All platforms Search Content area Component

Segmented Control & Tabs

A compact control for switching content groups in place: pill-shaped segmented control, or tabs with an underline.

All platforms Navigation Content area Component

Settings List

A grouped list of options: each row has a name on the left and a switch, chevron, or current value on the right.

All platforms Personal Content area Component

Skeleton Screen

Gray placeholder shapes shown while data loads: bars for text, blocks for images, a sheen sweeping across.

All platforms Feedback Content area Component

Switch Row

A settings row with text on the left and a switch on the right — changes apply instantly, no save button.

All platforms Forms Content area Component

Text Field

The text input: a label above, the field below, hints and errors — the atom of every form.

All platforms Forms Content area Component

Toast

A small bar that floats in and fades out — 'Saved', 'Copied' — without interrupting the task.

All platforms Feedback Floating Component

Top App Bar

The bar at the very top of a page: back button, title, and the page's key actions.

All platforms Navigation Top navigation Component

Website Header

The header of a website: logo left, nav in the middle, sign-in / sign-up actions right — often sticky.

Web Navigation Top navigation Component