All components (204)
Components
204 components and 2,486 documented props. Each page explains what the component is, when to use it and when not to, how it responds to the keyboard and what a screen reader announces. The catalogue and the texts come from the package itself, so what you see here is what gets installed.
Actions
What the user presses to make something happen.
The three-dots menu.
The scroll-up button.
The usual button.
Several buttons joined together that are ONE block of actions.
What navigates is a link, even if it is painted as a button.
The right-click menu.
A piece of data with its copy button next to it.
Downloads a chart, a table or any piece of the page as an image.
A standalone action that floats over the page, fixed in a corner.
A button that carries only an icon.
A field with its button, or several fields, joined with no gaps and with square corners where they meet.
The "Load more" of a paginated list, with the count underneath ("40 of 120 orders", with the language's numbers.
The bar that appears when rows of a table or a list are checked.
Sharing a page.
The usual action with its variants next to it.
An action that looks like a link and sits inside a sentence.
Switching theme.
A button that stays pressed.
The controls of a table, an editor or a gallery, together in a named bar.
Fields
Data entry, with its label, hint and error.
A Spanish postal address in one block.
A money input that understands how it is written in each language.
The card details in one block.
Country > province > city in a single field, with one column per level.
The CNAE-2009 code of an economic activity.
A field with a list of suggestions that also accepts free text.
The discount code of the cart.
The NIF, the NIE or the CIF, with the control letter genuinely checked.
The pieces every field in the library is made of.
Form validates an entire form with a single schema (schema), the same one the server uses, and places each error where it belongs.
The account number, with the mod 97 check applied.
A field with segments stuck to it.
The license plate of a Spanish vehicle.
The long text field.
A number formatted for the language.
The one-time code.
The password, with the eye to see it.
The phone with country prefix and number in the same box, but as two controls.
The toolbar of a rich text editor, without the editor.
The field with autocomplete.
Signing a delivery note or a consent form, in two ways.
The Spanish Social Security number (NUSS or NAF), with its two check digits genuinely verified.
A tags field.
The single-line field, with label, help text and error already wired up.
A dropdown with a tree inside.
A VAT rate selector.
Choice
Picking between options: one, several or none.
A checkbox.
Several ToggleChip together, with a name for the whole set.
The inner machinery of ColorPicker, on its own.
Choosing a color.
A group of facets from a store's filter column.
Language and currency, in the footer of a store or in the settings.
Choose several values from a list.
An option of RadioGroup drawn as a card.
A group of mutually exclusive options.
The minus and plus of a cart line.
The date shortcuts of a panel (Today, Last 7 days, This month…) and, next to them, the field for a custom range.
The price filter of a store.
Stars to rate or to show an average.
Buttons joined into a single piece to choose one option (or several) that is applied right away.
A dropdown to choose one option from a list.
A list of options in plain view, not dropped down, to choose one or check several.
A bar with one or two thumbs to choose a value, or a range, roughly within a known interval.
An on/off switch for a setting that applies immediately, without a Save button.
A chip that switches on and off.
Two lists for distributing things.
The metal and the size (or the color and the size) of a product, with availability checked crosswise.
Dates and time
Calendars, schedules and available slots.
The month in view, without opening anything.
A countdown in seconds.
Date and time together in a single field.
A date typed in parts (day, month and year, in the order of the language.
Two dates that go together.
The month with the events marked on each day (up to three colored dots and "+2" if there are more) and, beside it, the list of what is on the day where the focus is.
A month and year picker.
"3 minutes ago", "in 2 hours", "yesterday".
Booking an appointment.
A time written in parts, like the date field.
The work plan in bars.
The agenda of a week or a day.
The opening hours of a business.
The month with the holidays marked on each day (with their type and, if the source provides it, the region or municipality) and, above it, how many days are worked that month.
Structure
The frame of a screen: header, columns and whatever sticks in place.
The shell of an application.
A block that collapses, standalone.
The footer of a page.
Layout
The pieces that position everything else.
A box with a fixed ratio, width to height, that takes the full width of its space.
Centres what it holds, horizontally and vertically.
Centres the content horizontally and gives it a maximum reading width, with side padding so the text does not touch the edge of the screen.
A grid that yields on its own.
An area with its own scrolling and the theme's thin scrollbars.
Stacks or lays out in a row with a gap from the scale.
Surfaces
Where content rests.
A status band inside a screen.
A price, with its currency and in the format of the active language.
A person's face, or their initials.
Several stacked avatars, with a "+N" at the end for those that do not fit.
A surface with a header (title, subtitle and a slot on the right), body, full-bleed media and a footer separated by a divider.
The "offline" ribbon.
The gap when there is nothing to show.
How much there is of something.
The full-width ribbon at the top of the page.
Progress bar for a task that advances and ends.
The thin strip stuck to the top (or bottom) of the window that says how much of a long page you have read.
The screen after.
A dividing line.
A gray placeholder, with a shine that passes over it, while the content arrives.
The big number on a dashboard, with its change.
Status tag.
An image slot with a fixed shape.
The small line of a dashboard.
Layers
Whatever opens above the page.
The X of a layer.
The command palette, the classic Ctrl+K.
The safety question attached to the button that triggers it.
Ask "are you sure?" from any component without mounting a dialog and its state on every screen.
The cookie consent bar, at the bottom and without the usual traps.
A modal dialog.
A floating panel attached to its button, with whatever you want inside.
The welcome tour.
A card with more information that appears when the mouse passes over a link or when it is reached with the keyboard.
"Your session is about to expire".
The bell with the counter of what is unread and, when pressed, the panel with the latest notifications and how old they are ("4 minutes ago").
The notification queue.
A panel that slides in from one side of the screen.
Contextual help.
Status
Telling people what is going on: loading, done, error or offline.
Data
Showing numbers and lists without making them hard to read.
The grid of days by weeks, like the one on a GitHub profile.
The same as LineChart, with the area under each line filled.
The bars of a dashboard.
A kanban-style board.
A code block with its header (the file name or whatever it is), line numbers if requested, highlighted lines and a copy button.
A comment thread with nested replies.
A thread of messages.
Label-value pairs.
The split of a total into a ring.
The attachments of something (an order, an invoice, a ticket).
The flag of a country, by its two-letter ISO code.
What has been happening to something (an order, an invoice, a ticket).
A generic row.
Lines for several series over the same categories.
A QR code drawn in SVG, with no dependencies or image.
A radar chart.
Stacked bars.
Data compared by columns (invoices, orders, customers), with sorting, per-column filters, selection, pagination, configurable columns and totals at the bottom.
A list of thousands of rows that does not clog the browser.
Management
The pieces of an admin panel: tables, boards and filters.
The chips for the filters that are currently set, above a table or a list.
A zone for dropping files, with its button to choose them.
The lines of an invoice, editable.
Two or more panels with a draggable divider.
The setup list.
A list that is reordered by dragging and with the keyboard, which is the half that almost everyone leaves out.
Uploading files for real, as soon as they are chosen.
Commerce
Everything that takes someone from a product to an order.
A strip of things to move through.
The photo viewer of a product page.
Before and after.
Paying in installments.
The 0 to 10 question ("Would you recommend the store to a friend?") and, as soon as a score is chosen, the one about why.
Where a shipment is.
The summary of an order or a cart.
The comparison of plans or rates on a landing page.
The listing of a product in a store grid.
The summary of a product's reviews.
The shipping methods as cards to choose from.
The size table of a garment or a piece of jewelry, with the switch to inches and the size that fits according to the measurement entered.
Typography
Headings, text, quotes and code in the same voice.
Text that is removed from SIGHT but not from the accessibility tree.
A piece of text highlighted by hand, inside a sentence.
Highlights inside a text what matches the search.
A piece of code INSIDE a sentence.
A keyboard key, inside a sentence.
A text list.
A block quote, with a rule at its side and, if it says who said it, the attribution below preceded by a dash.
All the running text of the application.
A heading.
AI
The pieces of an assistant interface: messages, reasoning, tools and text input.
The log of what an agent is doing.
A file an assistant has generated, with its preview one click away.
A file attached to a message.
A message in a chat with an assistant.
What serves what comes next.
The viewer for an image at almost full screen.
The box where you write to an assistant.
A model's reasoning, folded.
The search bar INSIDE something -a long conversation, a document-.
The quick replies an assistant proposes.
A call to a tool.
What a response cost.
More
Whatever doesn't fit any of the other families.
Everything the library needs around it, in one line.
Voice notes, a recorded message, a short audio clip.
Sets the language of the components that format data.
Everything a page needs for search engines and social networks to understand it, in @amset/ui/seo.
Three pieces so that an invoice, a delivery note or a quote come out well on paper.
Takes the library's links (Link, ButtonLink, the breadcrumbs, the side menu, the title of a card with href) through the application's router.