UI
A personal component library. Every component is themeable from one place — pick a palette, a radius and a font in “Make it yours”, and switch the whole app between light and dark.
Components
- AccordionReveal one section of content at a time.
- AlertAn inline message that needs attention.
- Alert DialogA dialog that will not go away without an answer.
- AvatarRepresent a person with an image or their initials.
- BadgeA short label, count or status marker.
- BreadcrumbShow the path to the current page.
- ButtonTrigger an action or navigate somewhere.
- CardGroup related content on a raised surface.
- ChartPlot a series, in the library's colours.
- CheckboxToggle one or more independent options.
- ClipboardCopy a value, and say so.
- Code BlockShow a snippet, with its filename and a copy button.
- DialogA modal window that interrupts the current task.
- DrawerA panel that slides in from the edge of the screen.
- Dropdown MenuA menu of actions opened from a trigger.
- EmptyWhat to show when there is nothing to show.
- FieldWrap a control with its label, help text and error.
- InputCapture a single line of text.
- LabelName a control that does not name itself.
- MasonryPack items into columns without leaving row gaps.
- PaginationMove through pages of results.
- PopoverFloating content anchored to a trigger.
- ProgressHow far along something is.
- RadioChoose a single option from a set.
- RatingA star score for something people rated.
- SelectChoose one option from a list.
- SeparatorSeparate content with a rule.
- SkeletonHold the shape of content that has not arrived.
- SpinnerAn indefinite wait, with no shape to hold.
- SwitchTurn a single setting on or off.
- TableLay out rows of structured data.
- TabsSwitch between panels of related content.
- TextareaCapture multiple lines of text.
- TimelineA vertical list of dated events on a shared spine.
- ToastA brief message shown over the interface.
- TooltipA short hint shown on hover or focus.
- TypographyThe type scale and base text styles.
Blocks
- Avatar with labelAn avatar beside a name and supporting text.
- BannerAnnouncement bars for the top, bottom, or inline on a page.
- CardsFinished cards worth reaching for.
- Checkbox with labelsA checkbox set with titles and supporting text.
- FormsFinished forms worth reaching for.
- Input GroupA field that shares its box with buttons and add-ons.
- Progress BarsShow how far along a multi-step task is.
- Radio with labelsA radio set with titles and supporting text.