Components
Every prfct component, grouped by the job it does. Each one is accessible, themeable, and yours to own.
Actions
4ButtonTriggers an action. The most important interactive element in any interface, and the easiest one to overuse.
Button GroupJoins related buttons, inputs and text into a single control so they read as one set of actions.
ToggleA two-state button that turns a single option on or off and shows its current state.
Toggle GroupA set of toggle buttons for choosing one or several options from a small, visible set.
Forms
14CalendarA month grid for choosing a single date, several dates or a range. The building block of every date picker.
CheckboxToggles a single option, or selects any number of options from a set. The choice is committed when the form is submitted.
ComboboxA text input with a filterable list, for choosing from more options than a select can comfortably show.
FieldThe layout system for forms. Labels, controls, descriptions and errors, arranged consistently and accessibly at any width.
InputA single-line text field for names, emails, numbers and search, always paired with a visible label.
Input GroupAn input with icons, text, buttons or keyboard hints attached, bordered, focused and validated as one control.
Input OTPA segmented field for one-time passcodes, PINs and recovery codes, with paste, SMS autofill and password-manager support.
LabelThe accessible name of a form control. Clicking it focuses or toggles the control it belongs to.
Native SelectThe browser's own select element, styled to match prfct. Best on mobile, in long forms and wherever zero JavaScript matters.
Radio GroupLets people choose exactly one option from a small set, with every option visible at once.
SelectLets people choose one or several options from a list that stays out of the way until it's needed.
SliderSelects a value, or a range of values, by dragging along a track. Best when the approximate position matters more than the exact number.
SwitchTurns a setting on or off, taking effect the moment it's flipped.
TextareaA multi-line text field that grows with its content, for messages, descriptions and feedback.
Overlays
11Alert DialogA modal confirmation that interrupts people before a consequential or irreversible action, and can only be dismissed by making a choice.
CommandA fast, keyboard-first list of commands and results with fuzzy search, inline or as a ⌘K palette above the page.
Context MenuActions for a specific object, opened by right-click or long-press where the pointer is. A shortcut, never the only path.
DialogA window overlaid on the page that focuses attention on one task and blocks everything else until it is finished or dismissed.
DrawerA touch-first panel that slides from an edge, follows the finger, rests on snap points and dismisses with a swipe.
Dropdown MenuA list of actions or options that appears from a trigger, keeping secondary commands one click away without cluttering the interface.
Hover CardA preview of what's behind a link, such as a person, a repository or a page, shown when the link is hovered or focused.
MenubarA persistent row of menus, such as File, Edit and View, that gives desktop-class applications a complete, discoverable set of commands.
PopoverA floating panel anchored to a trigger for small, interactive content such as settings, quick forms and pickers. It doesn't block the page.
SheetA panel that slides in from the edge of the screen for longer forms, details and filters, while keeping the page underneath in context.
TooltipA short text label that appears on hover and keyboard focus to name an icon-only control or reveal its shortcut.
Navigation
5BreadcrumbShows where the current page sits in the hierarchy and gives one-click access to every level above it.
Navigation MenuTop-level site navigation with rich, animated panels, for marketing sites and documentation where a section needs more than a link.
PaginationSplits a long set of results into pages and lets people move between them predictably, with links they can share and a sense of how much there is.
SidebarThe persistent navigation of an application. It collapses to an icon rail, moves off-canvas on mobile and is themeable to the last pixel.
TabsSwitches between related views that share a context, showing one panel at a time without leaving the page.
Data display
8AvatarA compact visual identity for a person or an organization, with an image, initials fallback and optional presence status.
BadgeA short, non-interactive label that tags an object with a status, category or count.
CardA raised surface that groups related content and actions about a single subject.
CarouselA horizontally or vertically scrolling set of slides with swipe, keyboard and button navigation, built on Embla.
ChartThemed, accessible charts built on Recharts, with a validated categorical palette, quiet chrome and tooltips that match the system.
ItemA flexible row that pairs media, a title and a description with actions. The building block of lists, settings and resource rows.
KbdDisplays a keyboard key or shortcut, inline with text or inside menus and tooltips.
TableSemantic HTML tables for structured data, with tabular numerals, row states and the parts to build sortable, selectable data tables.
Feedback
6AlertA persistent, inline message that tells people something important about the page or task in front of them.
EmptyExplains why there's nothing to show and what to do next: on first use, with no results, after clearing work, or without access.
ProgressShows how far a task has come, or that it is underway when its length is unknown.
SkeletonA placeholder that previews the shape of content while it loads, so the page settles instead of jumping.
SpinnerAn indeterminate activity indicator for short waits when the system is working and the result is on its way.
ToastA brief, non-blocking notification that confirms an action or reports a background event, then gets out of the way.
Layout
6AccordionA stack of headings that each reveal a section of content. Progressive disclosure for secondary information.
Aspect RatioHolds media to a fixed width-to-height ratio, reserving its space before the content loads.
CollapsibleA single region that people can show or hide: the smallest unit of progressive disclosure.
ResizablePanels that people can resize by dragging or with the keyboard, for layouts whose proportions are personal.
Scroll AreaA scrollable region with quiet overlay scrollbars that match the theme. Native scrolling underneath, consistent chrome on top.
SeparatorA hairline that divides content into groups: horizontally between sections, vertically between inline items.