Introduction
prfct is an open-code design system for building precise, accessible interfaces with React.
prfct is a design system you own. Its components are copied into your codebase with the shadcn CLI, built on Base UI primitives, styled with Tailwind CSS v4 and driven by a closed set of design tokens — so every surface, in every theme, is made of the same decisions.
Why “prfct”
The name is perfect with the letters it doesn't need taken out — and that is how the system works. Every token, component and guideline has a job; anything that doesn't earn its place is left out. The mark follows the same idea: a try square, the carpenter's tool for a true right angle, and the point every measurement starts from.
What's in the box
What makes prfct different
Color you can prove
prfct's palettes aren't picked by hand. Each hue is generated in OKLCH, twelve steps per scale, with a job for every step. Text steps are then solved — moved until they meet WCAG contrast on every fill they can sit on. The test suite checks those guarantees across 1,152 generated scales, and the theme builder runs the same code, so custom themes keep them too. See Color.
Accessible by construction
Components are built on Base UI, which implements the WAI-ARIA patterns for focus, keyboard and screen reader support. prfct adds focus that stays visible in every theme, targets of at least 24×24px, reduced-motion fallbacks and an automated axe check of every documentation page in light and dark mode. See Accessibility.
One set of tokens, any theme
Components never use dark:. Every color is a semantic token that switches with the .light and .dark classes — on the page or on any subtree, as in the preview above. Rebranding is a change of two inputs, not a search and replace. See Theming.
Open code
There's no package to upgrade and no styles to override. You own the code the moment you install it: read it, change it, delete what you don't need. Updates are opt-in, and the CLI can show you the diff before you accept one. See Installation.
In your language
Components say almost nothing on their own — and what they do say, they say in your language. One LocaleProvider switches every built-in label, landmark and date; English and Polish ship with the system. This documentation is available in both.
Documentation that explains why
Component pages cover when to use a component and when not to, do's and don'ts, keyboard support and the full API — with anatomy diagrams measured from the live component, so they can't drift from the code. Guidelines carry their reasons, so you can make the next decision the same way. See Principles.
The stack
Where to start
- Building a product? Start with Installation, read Composition once, then browse the components.
- Designing with prfct? Read the Principles, then the Foundations, then try the theme builder.
- Writing interface copy? Voice and tone has the rules and the reasons.
- Shipping in several languages? Localization covers the words components say on their own, and how this site is translated.
Status and support
prfct is at version 1.1.0. Every component page shows a status — Stable, Beta, New or Deprecated — and changes are listed in the changelog.
prfct supports the same browsers as Tailwind CSS v4: Safari 16.4, Chrome 111 and Firefox 128 or later. It relies on OKLCH colors, color-mix(), :has() and CSS linear() easing, which older browsers don't support.