Documentation

Every component in the library, running, on this page. Open one for its other states, when to use it and when not, and the API. The guides say how to put the parts together.

Start

Learn by doing Turn the knobs, watch it change, read the code.Blocks Sign-in, pricing, checkout, chat — sections to paste in.Patterns Whole apps built only from these parts.Installation One command, or four steps by hand.Start a project From an empty folder to a first screen.Building a screen Shell, rhythm, surfaces, the four states, the phone.Principles Five rules that make the parts read as one product.Making it look designed Personality first, one hero, space over lines, the AI look to take out.Choosing a component The look-alikes, told apart.Footguns The mistakes that look right and aren’t.

Components

107 of them, grouped the way Material groups its own catalogue — the things you press, then type into, choose, navigate with, and read. Everything below is live: press it, drag it, open it.

Actions 6

Button MD3 buttons, the Expressive way.

Button Group MD3 button group — a row of buttons that reads as one control.

FAB MD3 floating action button. Three sizes (40 / 56 / 96dp), plus extended for the pill that carries a label next to the icon.

Icon Button MD3 icon button. Same tone system as Button, but its own geometry: height comes from size, width from width as a ratio of that height (MD3's narrow / default / wide, which are ~0.8× / 1× / 1.3×).

Segmented Button MD3 segmented button.

Split Button MD3 Expressive split button.

Inputs 24

Describe the picture you want

Type a prompt below, or start from one of these.

AI Image A picture made from a sentence — the frame, the prompt bar, the wait and the picture, wired to whichever model you have.

Sunday, September 27, 2026

Calendar Month grid — one date, a range, or a handful of dates.

utils.ts TypeScript

Code Editor A code editor with no editor in it.

oklch L C H

oklch(0.6 0.18 260)

Color Picker A colour picker that thinks in OKLCH, because this library does.

Country

Combobox Combobox — type to search, arrow to the one you want, Enter to take it.

Due date

Date Field A date input: a field that shows the date in the page's language and opens a Calendar to change it — anchored under the field on a desktop, in a bottom sheet on a phone, where a popover would be a thumb's width from the edge.

Period

Date Range Field A date-range input for a dashboard's filter bar: a field that reads "Mar 3 – 9, 2026" and opens two months side by side with a rail of shortcuts — Today, Last 7 days, This month — beside them.

Stroke

Weight

Stroke style

Opacity

Drawing Board An infinite canvas you can actually draw on: pen, shapes, arrows, text and sticky notes, with pan, zoom, selection, undo and export.

Smileys & emotion

People & body

Animals & nature

Food & drink

Activity

Travel & places

Objects

Symbols

Flags

Pick an emoji

Picked: nothing yet

Emoji Picker The emoji keyboard: search, categories, skin tone and a memory of what you picked last.

Work email

We only use this for billing.

Field Field — the label, the help line and the error, around any control.

Drag & drop files here

paste with ⌘V

File Upload A dropzone that takes files from all three places people have them: dropped, browsed, and — the one usually missing — pasted.

Loading…

Image Cropper Crop an image by moving the image, not the box.

This line stays exactly where it is.

Inline Edit Click the text, it becomes a field. Nothing on the page moves.

Webhook URL Alerts

Email me when a deploy fails

Label A form label. for wires it to its control, so clicking it focuses.

Quantity

Number Input A number field that is a text field underneath.

Waiting for six digits

OTP Input The one-time code field.

Mobile

Stored as +9647701234567

Phone Input A phone field that stores E.164 and lets people type a national number.

Picker The frame a set of wheels sits in: the selection band across the middle, the fade at the top and bottom edges, and — when you give it onconfirm — the cancel/confirm row under them.

Price

Value: 25000

Price Input A money field: the currency decides the symbol, which side it sits on, how many decimals are allowed and how much one step is worth.

Rich Text Editor A rich text editor that is a contenteditable and a toolbar, and nothing else.

City

Select Select — the Input's frame around a styled list of values.

Keywords

kebab grill

Helps people find the dish in search.

Tags Input Free-form tags, typed into one field.

Work email

We only use this for billing.

Text Field Text field.

Delivery notes

The driver sees this.

Textarea Multi-line text field.

Selection 7

Email me about outages

Checkbox MD3 checkbox.

Assist Input Suggestion

Chip MD3 chip — assist, filter, input and suggestion, in one component.

Labels

Bug Documentation

Multi Select Several values from a list, in one field.

Delivery

Standard 3–5 working days, free

Express Next day, 5,000 IQD

Collect in store Ready in an hour

Charged at checkout.

Radio MD3 radio button.

Rating Rating — a row of stars, or of any icon you give it.

Volume 64

Slider MD3 Expressive slider.

Wi-Fi

Switch MD3 switch.

Breadcrumb Breadcrumbs.

Last run: nothing yet

Command Palette ⌘K — a search field over every action in the app, opened from anywhere.

Dock The macOS dock, in Material.

A

Aland Barzani

Amina Tofiq

B

Bahar Rasul

C

Chnar Salim

D

Dilan Rashid

E

Evan Hoshyar

F

Farah Jamil

G

Goran Azad

H

Hawkar Sabir

I

Ibrahim Latif

J

Jwan Sirwan

K

Karwan Aziz

L

Lana Abdullah

M

Mariam Salih

N

Nasrin Hiwa

O

Omar Ali

P

Peshraw Diyar

Q

Qasim Talib

R

Rezan Shahen

S

Sara Mahmoud

T

Tara Zana

U

Umed Kamaran

V

Viyan Soran

W

Wria Halkawt

Y

Yusuf Karim

Z

Zainab Hassan

Index Scrubber The A-Z rail down the side of a long list — letters that magnify under the thumb, and a rail that condenses rather than overflowing.

Menu MD3 menu — a list of actions hanging off a trigger.

Navigation Bar MD3 navigation bar — the bottom bar on a phone, 3–5 destinations.

Navigation Drawer MD3 navigation drawer — the sidebar of a dashboard, in all three of the shapes a dashboard needs it in.

Pagination Pagination.

Search Bar MD3 search — the bar and the view it opens into.

Step 3 of 4: Payment

Next: Review

Stepper Wizard progress — where you are in a checkout, an onboarding, a form too long for one screen.