Every component.

Forms and inputs 37

• ButtonThe standard action, in six variants and four sizes, with a loading state. Renders as any tag or component.button
• CalendarA month grid for choosing one date, with full keyboard navigation and min / max limits.calendar
• CheckboxA native checkbox, restyled. Supports v-model and an indeterminate state.checkbox
• Colour pickerChoose a colour by dragging, by hue, from presets, or by typing its hex code.color-picker
• ComboboxA select you can type in to filter the options, with keyboard navigation and form support.combobox
• Date pickerA field that opens a calendar to choose one date, with form support.date-picker
• Date range pickerA field that opens a calendar to choose a start and end date, with quick presets.date-range-picker
• Date-time pickerA date picker and a time picker side by side, with one combined value.date-time-picker
• Emoji pickerEmoji in groups with a search box, moved through with the arrow keys, each one named for screen readers.emoji-picker
• FieldTies a label, hint and error message to any control, with a small validation helper.field
• File uploadA drop zone that also opens the file picker, with a list of chosen files and their progress.file-upload
• Image cropperA picture behind a fixed frame that you drag and zoom into place, then cut out as a file; for avatars, covers and thumbnails.image-cropper
• InputA single-line text field. Works with v-model and every native input attribute.input
• Input groupAn input with something before or after it, plus ready-made password and search fields.input-group
• LabelA form label. Wrap a control in it, or point it at one with `for`.label
• Masked inputA field that lays out what is typed in a fixed shape: card numbers, expiry dates, phone numbers.masked-input
• Multi-selectChoose several options from a list you can type in to filter; choices show as removable tags.multi-select
• Number inputA number field with minus and plus buttons, limits and steps.number-input
• Password strengthA four-step bar and a word for how strong a password is as it is typed, with a checklist of the rules it must meet.password-strength
• Phone inputA country's calling code and a phone number as one international value, laid out the way that country writes its numbers.phone-input
• PIN inputOne box per character for short codes, with paste, autofill and arrow-key support.pin-input
• QuestionnaireA form shown one step at a time, with Back and Next, per-step checks and skippable steps.questionnaire
• Radio groupPick one of a few options. Native radio buttons, restyled, with form support.radio-group
• Range sliderTwo thumbs on one track for a lowest and a highest value, such as a price range.range-slider
• RatingA row of stars to choose a score, or to show one (including halves) when read-only.rating
• Rich text editorA box for writing with bold, italic, headings, lists, quotes and links, giving back clean HTML. No editor library involved.rich-text-editor
• Segmented controlOne choice from two to five, side by side in a single track: monthly or yearly, list or grid, cm or inches.segmented-control
• SelectPick one option from a list, with keyboard navigation, type-to-select and form support.select
• Signature padA box to sign in with a finger, pen or mouse, exported as an image.signature-pad
• SliderPick a number by dragging. A native range input, restyled, so the keyboard and forms just work.slider
• StepperNumbered progress through a sequence: done, current and still to come.stepper
• SwitchAn on/off toggle built on a native checkbox.switch
• Tags inputType several values of your own (emails, labels); each becomes a removable tag.tags-input
• TextareaA multi-line text field that grows with its content.textarea
• Time pickerChoose a time of day from a list at regular steps, such as every half hour.time-picker
• ToggleA single button that stays pressed, such as bold or mute.toggle
• Toggle groupA row of buttons where one (or several) is switched on, such as a view or time-range switcher.toggle-group

Overlays 13

• Action sheetA short list of things to do with something, sliding up from the bottom of the screen with a Cancel button underneath.action-sheet
• Alert dialogA dialog that asks for a decision before something that cannot be undone. It only closes by choosing.alert-dialog
• Command paletteA search box over a list of actions, opened with a shortcut, for running anything by name.command
• Context menuA right-click menu. Fill it with the dropdown menu's items.context-menu
• DialogA modal window with focus trapping, scroll locking, and Escape / outside-press to close.dialog
• Dropdown menuA menu of actions with arrow-key navigation, type-to-select, checkbox and radio items, and submenus.dropdown-menu
• Hover cardA preview that appears when a link is hovered or focused, and can be moved into.hover-card
• LightboxPictures shown large over the page, one at a time, with buttons and arrow keys to move between them.lightbox
• PopoverFloating content anchored to a trigger; flips and shifts to stay on screen.popover
• SheetA panel that slides in from an edge of the screen, built on the dialog's focus trap and scroll lock.sheet
• ToastBrief notifications fired from anywhere with toast(); mount one Toaster to show them.toast
• TooltipA short hint shown on hover or keyboard focus.tooltip
• TourA step-by-step introduction that points at parts of the page in turn.tour

Navigation 10

• App barA phone's top bar: a back button, the name of the screen and a few actions, clear of the notch and stuck to the top.app-bar
• Bottom navA phone's tab bar: a few destinations along the bottom edge, each an icon and a word, with an optional count.bottom-nav
• BreadcrumbThe trail of pages leading to the current one, as links with separators.breadcrumb
• FABA round button floating over the corner of the screen for the main thing to do there; it can open into a short stack of related actions.fab
• MenubarA row of menus like File, Edit, View. Fill each with the dropdown menu's items.menubar
• Navigation menuA site's main links across the top, some of which open a panel of further links.navigation-menu
• PaginationPrevious, next and numbered page buttons, with long ranges shortened to "…".pagination
• SidebarApp navigation down the side, in labelled groups, that can shrink to a rail of icons or slide in on phones.sidebar
• TabsSwitch between panels, with arrow-key navigation. Horizontal or vertical.tabs
• ToolbarA row of buttons and other controls that takes one stop in the tab order, with the arrow keys moving between them.toolbar

Layout and content 14

• AccordionStacked sections that expand and collapse, one at a time or several at once.accordion
• CardA bordered surface with header, title, description, content and footer parts.card
• CarouselSlides you swipe, scroll or step through with buttons, built on native scroll snapping.carousel
• Code blockCode in a framed, scrollable box with a copy button and optional file name and line numbers.code-block
• CollapsibleOne section that a button shows and hides, with its height animated.collapsible
• Image fanA few framed pictures overlapping like a hand of cards, tilted outward from the middle. The one pointed at or focused straightens and lifts while the others slide aside, with an optional caption.image-fan
• MarkdownMarkdown text shown as styled content: headings, lists, tables, code, links. Safe for text written by other people.markdown
• MarqueeA row of logos or short lines drifting sideways in a loop, with a pause button, that stands still when motion is reduced.marquee
• Media playerVideo or audio with its own controls: play, seek, volume, captions, speed and full screen, all reachable by keyboard.media-player
• ResizablePanels side by side (or stacked) with handles between them to drag or move with the arrow keys.resizable
• Scroll areaA box that scrolls its contents, with slim scrollbars that match the theme.scroll-area
• SeparatorA horizontal or vertical dividing line.separator
• Sticky scrollTwo columns: one stays put and shows a picture or a large heading, and changes as each step's copy in the other column scrolls past. One column on narrow screens.sticky-scroll
• TypographyHeadings and text that size themselves fluidly to the screen (or their container), plus styling for long-form content.typography

Data and charts 15

• ChartLine, area, bar, donut, scatter and heatmap charts, a ranked bar list and a gauge, with hover readouts, keyboard support and table views.chart
• Comparison tableProducts or plans side by side, one row per property, with ticks for what each has; scrolls sideways when there is no room.comparison-table
• Data tableA table built from rows and column definitions, with sorting, search, filters, row selection, bulk actions, rows that open, columns to hide and pages.data-table
• Description listLabels and their values, in rows or stacked in columns, for the details of an order, a customer or any record.description-list
• Diff viewerTwo versions of a text compared line by line, with what was taken out and put in marked, in one column or side by side.diff-viewer
• Event calendarA month laid out as a grid of days, each listing what is on.event-calendar
• Filter barA menu of tick boxes per property, the choices in use as removable tags, and one button to clear them all.filter-bar
• JSON viewerAny value as a tree you can open and close, with each kind of value in its own colour and a count on every closed branch.json-viewer
• KanbanColumns of cards that can be dragged, or moved with the keyboard, between and within columns.kanban
• MeterA bar for a reading within a known range, such as storage used or a battery, that changes colour past the levels you call low and high.meter
• StatOne headline number with its label, the change since last period, and an optional sparkline.stat
• TableA styled HTML table in parts: header, body, footer, row, heading cell, cell and caption.table
• TimelineA list of things that happened, in order, joined by a line.timeline
• TreeA nested list, such as files and folders, that expands, collapses and selects with full keyboard support.tree
• Virtual listA very long list that only draws the rows in view, so thousands of items stay fast.virtual-list

Status and feedback 16

• AlertAn inline message that stays on the page, in five variants, with an optional icon.alert
• AvatarA round picture of a person or team, falling back to initials when there is no image. Stack several with AvatarGroup.avatar
• BadgeA small status label in four variants.badge
• BannerA strip across the top of the page for an announcement, with an optional action and a close button.banner
• Copy buttonCopies some text to the clipboard and confirms that it did.copy-button
• Count upA number that runs up to its value when it scrolls into view.count-up
• CountdownThe days, hours, minutes and seconds left until a moment: a sale ending, a cart being held, a session running out.countdown
• Empty stateWhat to show when there is nothing to list yet: an icon, a heading, a line of text and an action.empty-state
• IconA small built-in set of line icons that take the size and colour of the text around them, and room for your own.icon
• KbdA key or key combination shown as a keycap, for shortcuts in text and menus.kbd
• ProgressA bar showing how far along a task is, or that it is running when the amount is unknown.progress
• RevealContent that fades and slides into place the first time it is scrolled into view, added with v-reveal.reveal
• Scroll progressA thin bar across the top that fills as the page, or one article, is read.scroll-progress
• SkeletonA placeholder block shown while content loads, with a pulse or shimmer animation.skeleton
• SpinnerA small turning ring for "this is working", sized to the text around it.spinner
• StatusA coloured dot beside a word or two: live, paused, failed, in stock.status

Commerce 20

• Address formName, street, town, region, postcode and country as one value, checked for what is missing, with the right autofill hints.address-form
• Cart line itemOne product in a cart: picture, name, chosen variant, quantity, line total and a remove button.cart-line-item
• Mini cartThe cart as a panel that slides in from the side: the items with quantities to change, the subtotal, and the way to the checkout.mini-cart
• Option cardA radio button as a whole card with a title, a line of detail and a price; for delivery and payment choices.option-card
• Order summarySubtotal, discount, shipping and tax added up to a total, with room for the items and a checkout button.order-summary
• Order trackerWhere a parcel has got to: ordered, packed, shipped, delivered, as a line that fills, with the date of each stage.order-tracker
• Payment card inputCard number, expiry date and security code laid out as they are typed, with the card network named and the number's checksum checked.payment-card-input
• PriceAn amount written as money, with the old price struck through and the saving when it is reduced.price
• Pricing tablePlans side by side with what each costs and includes, a switch between monthly and yearly billing, and one plan marked out.pricing-table
• Product cardA product's picture, name, score and price as one link, with room for a badge and actions.product-card
• Product galleryOne large picture with a row of thumbnails to switch between; swipe, arrow keys and hover zoom.product-gallery
• Promo codeA field for a discount code with an Apply button; once a code is in use, it is shown with a button to take it off.promo-code
• Quantity stepperA compact minus, count and plus for how many of something; at one, the minus can become a bin that removes the item.quantity-stepper
• Rating breakdownThe average score, the number of reviews, and a bar for each score showing its share.rating-breakdown
• ReviewOne customer's score, headline and words, with who wrote it, when, and whether they bought the product.review
• Shipping methodThe ways an order can be delivered as a list of cards to pick one from, each with when it arrives and what it costs.shipping-method
• Size guideA chart of body or product measurements for each size, switchable between centimetres and inches, with one size marked out.size-guide
• Stock indicator"In stock", "Only 3 left" or "Out of stock", from how many are left.stock-indicator
• SwatchOne choice from a few, shown as colour dots or small labelled boxes, with unavailable ones struck through.swatch
• Wishlist buttonA heart that fills when something is saved for later, as an icon alone or with its words.wishlist-button

Conversation 3

• ChatA conversation as bubbles that keeps itself scrolled to the newest message, with a box to write in that sends on Enter.chat
• Comment threadComments with replies nested under them, a box to add one, and a reply box that opens under any comment.comment-thread
• Notification centreA bell with a count of what is unread, opening a list of notifications that are marked read as they are pressed, or all at once.notification-center

Device and app 15

• FullscreenA button that makes one element (a chart, a video, a board) fill the screen, and brings it back.fullscreen
• HapticsShort vibration patterns for presses and results on phones that support it, added with v-haptic.haptics
• Idle screenCovers the page after a stretch with no mouse, keyboard or touch, including time spent in another tab, and says when the reader went away.idle-screen
• Infinite scrollAsks for the next page of a list as its end comes into view, with a spinner, a retry after a failure, and a line when there is no more.infinite-scroll
• Install promptOffers to add the app to the home screen when the browser allows it, with the steps for iPhones, and remembers "Not now".install-prompt
• Notification promptExplains what notifications are for and asks permission only when the reader presses the button.notification-prompt
• Offline bannerAppears when the connection drops, and briefly confirms when it is back.offline-banner
• Pull to refreshDrag the top of a list down to load it again, with a spinner while it loads and a button for everyone not using a finger.pull-to-refresh
• QR codeA scannable code for a link or a short piece of text, generated in the page with no service involved.qr-code
• Share buttonOpens the device's own share sheet where there is one, and copies the link where there is not.share-button
• SoundShort synthesized sounds for buttons and other controls, added with v-sound, with a mute switch and volume.sound
• Swipe actionsA row that slides aside under a finger to uncover buttons, such as Archive and Delete; the keyboard reaches the same buttons by tabbing.swipe-actions
• Update promptSays a new version of the app is ready and reloads into it when asked, by watching the service worker or a flag of your own.update-prompt
• View transitionAnimates a change to the page: elements glide to their new places, or a new look sweeps in from a point.view-transition
• Wake lockA toggle that keeps the screen from dimming or locking, for recipes, sheet music, dashboards.wake-lock

Blocks 14

A block is a section of a page, or a whole page, already put together. Adding one also adds every component it is built from.

• CartThe items in a cart with quantities to change, a discount code field, the sums, a checkout button and, if you like, a link to share the cart.cart
• CheckoutContact, delivery address, delivery choice and card details in one checked form, beside a summary of the order.checkout
• DashboardAn app page with a collapsing sidebar, a top bar with a user menu, headline numbers, charts and a table of recent rows.dashboard
• Forgot passwordAsks for an email to send a reset link to, then says to check the inbox, with a way to try a different address.forgot-password
• HeroThe first section of a page over a full-bleed picture or looping video: a headline on a thin rule, centred, or along the bottom.hero
• Media and textA headline, body copy and a picture side by side, stacked, or in three columns with the call to action on its own.media-text
• Not foundThe page for a wrong address or an error: what happened in plain words, a search box, and the way home.not-found
• Order confirmationThe page after paying: a thank-you with the order number, where it has got to, where it is going, and what was bought.order-confirmation
• Order historyA customer's past orders, each with its status, what was in it and where it has got to, filtered by open or finished.order-history
• Product detailA product's page: pictures, price, stock, options to choose, quantity and "Add to cart", then its details and reviews.product-detail
• Product listingA grid of products with filters, a way to sort, a wishlist heart on each, and pages.product-listing
• SettingsAn account settings page in tabs: profile details, notification switches, and a guarded "delete account".settings
• Sign inAn email and password form on a card, with checking, a "keep me signed in" box, and links to reset a password or sign up.sign-in
• Sign upName, email and a password with a strength meter on a card, checked before it is sent, with terms to agree to and a link to sign in.sign-up