Skip to content
prfct

Introduction

prfct is a design system for Next.js, built on shadcn, for precise and accessible interfaces.

prfct is a design system for Next.js that you own. It is built on shadcn: the shadcn CLI copies its components into your codebase, where they keep shadcn's names and parts. They sit on Base UI primitives and are styled with Tailwind CSS v4 from a closed set of design tokens, so every surface, in every theme, is made of the same decisions.

meridian-webReady
main · 2 minutes ago
Build cache82%
x
Deploy on push
MCJO
meridian-webReady
main · 2 minutes ago
Build cache82%
x
Deploy on push
MCJO

Built on shadcn

shadcn is the base of prfct, not one of its ingredients. The system is installed with the shadcn CLI from a shadcn registry, and its components are shadcn's components, restyled.

  • The same parts. Every name a shadcn component exports and every data-slot it sets exists in prfct, so code written for shadcn/ui works with prfct's components. pnpm test:install compares the two sets on every run.
  • The same tokens. background, primary, muted, border, ring and the rest keep shadcn's names, so a component added from shadcn itself or from another registry takes prfct's theme.
  • A few additions. Status variants for Alert and Badge, a loading state and an xl size for Button, sizes for Input, a floating Sheet, and a LocaleProvider for the words components say on their own.
  • One part left out. NavigationMenuIndicator, which Base UI has no part for.

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

FoundationsColor, type, space, shape, elevation and motion: the decisions every component is built from.Components54 accessible components, each with live examples, guidelines, a keyboard reference and its full API.PatternsForms, empty states, loading, feedback, destructive actions and data tables — with the reasoning.Theme builderPick up to two brand colors, a neutral and a radius. Contrast is solved live, and the theme exports as CSS.Design tokensEvery token as a CSS variable; color, type, radius and motion tokens as DTCG JSON for design tools, too.ExamplesComplete screens, from a dashboard and mail to checkout and two landing pages, built only from prfct. Each installs with one command.

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 three inputs, a neutral and two brand colors, 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

LayerChoiceWhy
Coreshadcn: its CLI, registry and conventionsComponents land in your project as source you own.
FrameworkNext.js 16 with the App Router, on React 19The theme provider, the fonts and the security headers are written for it, and every release is tested in a fresh Next.js project.
StylingTailwind CSS v4Tokens become utilities through @theme; no runtime CSS-in-JS.
PrimitivesBase UIUnstyled, accessible behavior for focus, keyboard and dismissal.
TypeInter 4.1, Geist MonoOptical sizing, tabular figures and a full set of OpenType features.
IconsLucideOne stroke weight and grid, sized with the text around them.
TokensCSS variables, DTCG JSONThe same values in code and in design tools.

Where to start

Status and support

Components are stable unless their page says otherwise: a New, Beta or Deprecated badge marks the exceptions. Every release is described 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() and :has(), which older browsers don't support. Spring easing uses CSS linear(), which needs Safari 17.2 or Chrome 113; in earlier versions those transitions run on the browser's default curve.