~/dut/ui — v0.1.0
Every pixel has a reason, and a comment saying why.
Tokens instead of colours, one word per idea, five sizes. A library that is measured before it is drawn.
Explore the components xs · sm · md · lg · xl
/components55
- 001accordionAccordionReveal one section of content at a time.open
- 002alertAlertAn inline message that needs attention.open
- 003alert-dialogAlert DialogA dialog that will not go away without an answer.open
- 004avatarAvatarRepresent a person with an image or their initials.open
- 005avatar-groupAvatar GroupA few faces overlapping in a row.open
- 006avatar-with-labelAvatar with labelAn avatar beside a name and supporting text.open
- 007badgeBadgeA short label, count or status marker.open
- 008bannerBannerAnnouncement bars for the top, bottom, or inline on a page.open
- 009breadcrumbBreadcrumbShow the path to the current page.open
- 010buttonButtonTrigger an action or navigate somewhere.open
- 011cardCardGroup related content on a raised surface.open
- 012cardsCardsFinished cards worth reaching for.open
- 013chartChartPlot a series, in the library's colours.open
- 014checkboxCheckboxToggle one or more independent options.open
- 015checkbox-with-labelsCheckbox with labelsA checkbox set with titles and supporting text.open
- 016chrome-tabChrome TabBrowser-style tabs above a page.open
- 017clipboardClipboardCopy a value, and say so.open
- 018code-blockCode BlockShow a snippet, with its filename and a copy button.open
- 019countdownCountdownTime left until a moment, ticking down.open
- 020dialogDialogA modal window that interrupts the current task.open
- 021drawerDrawerA panel that slides in from the edge of the screen.open
- 022dropdown-menuDropdown MenuA menu of actions opened from a trigger.open
- 023emptyEmptyWhat to show when there is nothing to show.open
- 024eyebrownEyebrownThe small line that introduces a heading.open
- 025fieldFieldWrap a control with its label, help text and error.open
- 026formsFormsFinished forms worth reaching for.open
- 027inline-citationInline CitationSources cited in the middle of a sentence.open
- 028inputInputCapture a single line of text.open
- 029input-groupInput GroupA field that shares its box with buttons and add-ons.open
- 030labelLabelName a control that does not name itself.open
- 031marqueeMarqueeA row that scrolls past for good.open
- 032masonryMasonryPack items into columns without leaving row gaps.open
- 033paginationPaginationMove through pages of results.open
- 034popoverPopoverFloating content anchored to a trigger.open
- 035progressProgressHow far along something is.open
- 036progress-barsProgress BarsShow how far along a multi-step task is.open
- 037radioRadioChoose a single option from a set.open
- 038radio-with-labelsRadio with labelsA radio set with titles and supporting text.open
- 039ratingRatingA star score for something people rated.open
- 040rotatorRotatorA few short messages taking turns in one place.open
- 041segmented-controlSegmented ControlPick one of a few options, all of them in view.open
- 042selectSelectChoose one option from a list.open
- 043separatorSeparatorSeparate content with a rule.open
- 044skeletonSkeletonHold the shape of content that has not arrived.open
- 045spinnerSpinnerAn indefinite wait, with no shape to hold.open
- 046switchSwitchTurn a single setting on or off.open
- 047tableTableLay out rows of structured data.open
- 048tabsTabsSwitch between panels of related content.open
- 049textareaTextareaCapture multiple lines of text.open
- 050timelineTimelineDated events on a shared spine, in six looks.open
- 051toastToastA brief message shown over the interface.open
- 052tooltipTooltipA short hint shown on hover or focus.open
- 053uploadUploadChoose files by picking or dropping them.open
- 054user-settingsUser SettingsThe account menu that opens from a face in a header.open
- 055typographyTypographyThe type scale and base text styles.open