# prfct.dev

> prfct is an open-code design system for React: generated, contrast-safe tokens, accessible components and documentation that explains every decision — built on Next.js, Tailwind CSS v4, Base UI and shadcn.

Install the theme with `npx shadcn@latest add https://www.prfct.dev/r/prfct.json`, then any component with `npx shadcn@latest add https://www.prfct.dev/r/<name>.json`. The registry index is at https://www.prfct.dev/r/registry.json.

## Get started

- [Introduction](https://www.prfct.dev/docs): prfct is an open-code design system for building precise, accessible interfaces with React.
- [Installation](https://www.prfct.dev/docs/installation): Add prfct to a new or existing Next.js project in a few minutes — with the shadcn CLI or by hand.
- [Principles](https://www.prfct.dev/docs/principles): Six beliefs that shape every decision in prfct — from the lightness of a border to the name of a prop.
- [Composition](https://www.prfct.dev/docs/composition): How prfct components fit together — parts, the render prop, data attributes for styling, and the rules that keep customizations maintainable.
- [Localization](https://www.prfct.dev/docs/localization): Switch the few words prfct components say on their own — close buttons, spinners, pagination, calendars — to any language with one provider.

## Foundations

- [Foundations](https://www.prfct.dev/docs/foundations): The decisions every component is built from — color, type, space, shape, depth, motion and the rules that bind them.
- [Color](https://www.prfct.dev/docs/foundations/color): A closed, generated palette in OKLCH. Twelve steps per hue, one job per step, and contrast that is solved — not hoped for.
- [Typography](https://www.prfct.dev/docs/foundations/typography): One typeface, one scale of semantic roles, and optical details that make text feel set rather than rendered.
- [Spacing & layout](https://www.prfct.dev/docs/foundations/spacing): A 4-pixel grid, a short list of steps that do real work, and layout rules that keep density consistent from a settings form to a dashboard.
- [Shape](https://www.prfct.dev/docs/foundations/shape): One base radius drives every corner in the system. Change a single variable and the whole interface re-proportions — from sharp and technical to soft and friendly.
- [Elevation](https://www.prfct.dev/docs/foundations/elevation): Four levels of depth, expressed with borders, layered shadows and — in dark mode — lighter surfaces. Depth communicates what belongs to what, and what's temporary.
- [Motion](https://www.prfct.dev/docs/foundations/motion): Short, purposeful motion that explains where things come from and where they go. Durations and curves are tokens; springs work in pure CSS.
- [Iconography](https://www.prfct.dev/docs/foundations/iconography): Lucide icons on a 24px grid, sized with the text they sit beside and colored by the component that holds them.
- [Accessibility](https://www.prfct.dev/docs/foundations/accessibility): prfct targets WCAG 2.2 AA by construction — in its palette, its primitives and its defaults — and is verified by automated tests on every page.
- [Theming](https://www.prfct.dev/docs/foundations/theming): Change the brand hue, the neutral tint, the radius or the mode — globally or for a single subtree — without touching a component.
- [Design tokens](https://www.prfct.dev/docs/foundations/tokens): How prfct's tokens are structured, named, generated and exported — as CSS variables, Tailwind utilities and W3C design-token JSON.
- [Content](https://www.prfct.dev/docs/foundations/content): Clear, calm, specific. How prfct products speak — in buttons, errors, empty states and everything in between.

## Components

- [Components](https://www.prfct.dev/docs/components): Every prfct component, grouped by the job it does. Each one is accessible, themeable, and yours to own.
- [Accordion](https://www.prfct.dev/docs/components/accordion): A stack of headings that each reveal a section of content — progressive disclosure for secondary information.
- [Alert](https://www.prfct.dev/docs/components/alert): A persistent, inline message that tells people something important about the page or task in front of them.
- [Alert Dialog](https://www.prfct.dev/docs/components/alert-dialog): A modal confirmation that interrupts people before a consequential or irreversible action, and can only be dismissed by making a choice.
- [Aspect Ratio](https://www.prfct.dev/docs/components/aspect-ratio): Holds media to a fixed width-to-height ratio, reserving its space before the content loads.
- [Avatar](https://www.prfct.dev/docs/components/avatar): A compact visual identity for a person or an organization, with an image, initials fallback and optional presence status.
- [Badge](https://www.prfct.dev/docs/components/badge): A short, non-interactive label that tags an object with a status, category or count.
- [Breadcrumb](https://www.prfct.dev/docs/components/breadcrumb): Shows where the current page sits in the hierarchy and gives one-click access to every level above it.
- [Button](https://www.prfct.dev/docs/components/button): Triggers an action. The most important interactive element in any interface — and the easiest one to overuse.
- [Button Group](https://www.prfct.dev/docs/components/button-group): Joins related buttons, inputs and text into a single control so they read as one set of actions.
- [Calendar](https://www.prfct.dev/docs/components/calendar): A month grid for choosing a single date, several dates or a range — the building block of every date picker.
- [Card](https://www.prfct.dev/docs/components/card): A raised surface that groups related content and actions about a single subject.
- [Carousel](https://www.prfct.dev/docs/components/carousel): A horizontally or vertically scrolling set of slides with swipe, keyboard and button navigation, built on Embla.
- [Chart](https://www.prfct.dev/docs/components/chart): Themed, accessible charts built on Recharts, with a validated categorical palette, quiet chrome and tooltips that match the system.
- [Checkbox](https://www.prfct.dev/docs/components/checkbox): Toggles a single option on or off, or selects any number of options from a set — committed when the form is submitted.
- [Collapsible](https://www.prfct.dev/docs/components/collapsible): A single region that people can show or hide — the smallest unit of progressive disclosure.
- [Combobox](https://www.prfct.dev/docs/components/combobox): A text input with a filterable list, for choosing from more options than a select can comfortably show.
- [Command](https://www.prfct.dev/docs/components/command): A fast, keyboard-first list of commands and results with fuzzy search — inline, or as a ⌘K palette on top of the page.
- [Context Menu](https://www.prfct.dev/docs/components/context-menu): Actions for a specific object, opened by right-click or long-press right where the pointer is — a shortcut, never the only path.
- [Dialog](https://www.prfct.dev/docs/components/dialog): A window overlaid on the page that focuses attention on one task and blocks everything else until it is finished or dismissed.
- [Drawer](https://www.prfct.dev/docs/components/drawer): A touch-first panel that slides from an edge, follows the finger, rests on snap points and dismisses with a swipe.
- [Dropdown Menu](https://www.prfct.dev/docs/components/dropdown-menu): A list of actions or options that appears from a trigger, keeping secondary commands one click away without cluttering the interface.
- [Empty](https://www.prfct.dev/docs/components/empty): Explains why there's nothing to show and what to do next — for first use, no results, cleared work and restricted access.
- [Field](https://www.prfct.dev/docs/components/field): The layout system for forms — labels, controls, descriptions and errors arranged consistently, accessibly and at any width.
- [Hover Card](https://www.prfct.dev/docs/components/hover-card): A preview of the content behind a link — a person, a repository, a page — shown when the link is hovered or focused.
- [Input](https://www.prfct.dev/docs/components/input): A single-line text field for names, emails, numbers and search — always paired with a visible label.
- [Input Group](https://www.prfct.dev/docs/components/input-group): An input with icons, text, buttons or keyboard hints attached — bordered, focused and validated as a single control.
- [Input OTP](https://www.prfct.dev/docs/components/input-otp): A segmented field for one-time passcodes, PINs and recovery codes, with paste, SMS autofill and password-manager support.
- [Item](https://www.prfct.dev/docs/components/item): A flexible row that pairs media, a title and a description with actions — the building block for lists, settings and resource rows.
- [Kbd](https://www.prfct.dev/docs/components/kbd): Displays a keyboard key or shortcut, inline with text or inside menus and tooltips.
- [Label](https://www.prfct.dev/docs/components/label): The accessible name of a form control. Clicking it focuses or toggles the control it belongs to.
- [Menubar](https://www.prfct.dev/docs/components/menubar): A persistent row of menus — File, Edit, View — that gives desktop-class applications a complete, discoverable command vocabulary.
- [Native Select](https://www.prfct.dev/docs/components/native-select): The browser's own select element, styled to match prfct — best on mobile, in long forms and wherever zero JavaScript matters.
- [Navigation Menu](https://www.prfct.dev/docs/components/navigation-menu): Top-level site navigation with rich, animated panels — for marketing sites and documentation where each section needs more than a single link.
- [Pagination](https://www.prfct.dev/docs/components/pagination): Splits a long set of results into pages and lets people move between them — predictably, shareably, and with a sense of how much there is.
- [Popover](https://www.prfct.dev/docs/components/popover): A floating panel anchored to a trigger for small, interactive content — settings, quick forms and pickers — without blocking the page.
- [Progress](https://www.prfct.dev/docs/components/progress): Shows how far a task has come, or that it is underway when its length is unknown.
- [Radio Group](https://www.prfct.dev/docs/components/radio-group): Lets people choose exactly one option from a small set, with every option visible at once.
- [Resizable](https://www.prfct.dev/docs/components/resizable): Panels that people can resize by dragging or with the keyboard — for layouts whose proportions are personal.
- [Scroll Area](https://www.prfct.dev/docs/components/scroll-area): A scrollable region with quiet overlay scrollbars that match the theme — native scrolling underneath, consistent chrome on top.
- [Select](https://www.prfct.dev/docs/components/select): Lets people choose one option — or several — from a list that stays out of the way until it's needed.
- [Separator](https://www.prfct.dev/docs/components/separator): A hairline that divides content into groups — horizontally between sections, vertically between inline items.
- [Sheet](https://www.prfct.dev/docs/components/sheet): A panel that slides in from the edge of the screen for longer forms, details and filters, while keeping the page underneath in context.
- [Sidebar](https://www.prfct.dev/docs/components/sidebar): The persistent navigation of an application — collapsible to an icon rail, off-canvas on mobile, and themeable to the last pixel.
- [Skeleton](https://www.prfct.dev/docs/components/skeleton): A placeholder that previews the shape of content while it loads, so the page settles instead of jumping.
- [Slider](https://www.prfct.dev/docs/components/slider): Selects a value, or a range of values, by dragging along a track — best when the approximate position matters more than the exact number.
- [Spinner](https://www.prfct.dev/docs/components/spinner): An indeterminate activity indicator for short waits when the system is working and the result is on its way.
- [Switch](https://www.prfct.dev/docs/components/switch): Turns a setting on or off, taking effect the moment it's flipped.
- [Table](https://www.prfct.dev/docs/components/table): Semantic HTML tables for structured data, with tabular numerals, row states and the parts to build sortable, selectable data tables.
- [Tabs](https://www.prfct.dev/docs/components/tabs): Switches between related views that share a context, showing one panel at a time without leaving the page.
- [Textarea](https://www.prfct.dev/docs/components/textarea): A multi-line text field that grows with its content — for messages, descriptions and feedback.
- [Toast](https://www.prfct.dev/docs/components/toast): A brief, non-blocking notification that confirms an action or reports a background event, then gets out of the way.
- [Toggle](https://www.prfct.dev/docs/components/toggle): A two-state button that turns a single option on or off and shows its current state.
- [Toggle Group](https://www.prfct.dev/docs/components/toggle-group): A set of toggle buttons for choosing one option — or several — from a small, visible set.
- [Tooltip](https://www.prfct.dev/docs/components/tooltip): A short text label that appears on hover and keyboard focus to name an icon-only control or reveal its shortcut.

## Patterns

- [Patterns](https://www.prfct.dev/docs/patterns): How prfct components combine to solve recurring product problems — with the reasoning behind every choice.
- [Forms](https://www.prfct.dev/docs/patterns/forms): Layout, validation, errors and submission — the rules that make forms fast to complete and hard to get wrong.
- [Empty states](https://www.prfct.dev/docs/patterns/empty-states): What to show when there's nothing to show — first use, no results, and errors.
- [Loading](https://www.prfct.dev/docs/patterns/loading): Skeletons, spinners, progress and optimistic updates — chosen by how long people will wait and how much you know.
- [Feedback](https://www.prfct.dev/docs/patterns/feedback): Choosing between inline messages, alerts, toasts and dialogs — so people notice what matters and aren't interrupted by what doesn't.
- [Destructive actions](https://www.prfct.dev/docs/patterns/destructive-actions): Undo when you can, confirm when you must, and make irreversible actions deliberately hard to trigger by accident.
- [Data tables](https://www.prfct.dev/docs/patterns/data-tables): Density, alignment, sorting, filtering, selection and bulk actions — tables that stay readable at a hundred rows.

## Resources

- [Resources](https://www.prfct.dev/docs/resources): Release notes, machine-readable tokens and docs, and the registry — everything for working with prfct outside this site.
- [Changelog](https://www.prfct.dev/docs/resources/changelog): Every release of prfct, newest first.

## Tokens

- [prfct.tokens.json](https://www.prfct.dev/tokens/prfct.tokens.json): typography, radius, durations and easing curves (W3C Design Tokens format).
- [light.tokens.json](https://www.prfct.dev/tokens/light.tokens.json) and [dark.tokens.json](https://www.prfct.dev/tokens/dark.tokens.json): every color scale and semantic role, per mode.

## Other languages

- https://www.prfct.dev/pl/llms.txt