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 option — or several — 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 on or off, or selects any number of options from a set — 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, accessibly and 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 a single 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 option — or several — 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 on top of the page.
Context MenuActions for a specific object, opened by right-click or long-press right 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 the content behind a link — a person, a repository, a page — shown when the link is hovered or focused.
MenubarA persistent row of menus — File, Edit, View — that gives desktop-class applications a complete, discoverable command vocabulary.
PopoverA floating panel anchored to a trigger for small, interactive content — settings, quick forms and pickers — without blocking 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 each section needs more than a single link.
PaginationSplits a long set of results into pages and lets people move between them — predictably, shareably, and with a sense of how much there is.
SidebarThe persistent navigation of an application — collapsible to an icon rail, off-canvas on mobile, and 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 for 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 — for first use, no results, cleared work and restricted 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.