Skip to content
prfct.dev
1.1Localization: docs in Polish, components in any language

Interfaces, perfected

prfct is an open-code design system for React. A generated OKLCH palette with contrast solved at build time, 54 accessible components on Base UI, and tokens you own — for Next.js, Tailwind CSS and shadcn.

Get startedBrowse componentsBuild a theme
$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/prfct.json
meridian.app/overview

Overview

AL
Requests
12.4M
+18.2%
p95 latency
84 ms
−6.1%
Error rate
0.12%
+0.02
Uptime
99.99%
30 days
Traffic
Requests per hour, last 24 hours
Team
4 people deployed today
ALGHKJMS
Ada merged#4822m
Grace opened#48714m
Katherine fixed#4791h
DeploymentStatusAge
AL
Ship the new billing pagedpl_8f2c
Ready2m
GH
Command palette with fuzzy searchdpl_7a91
Building6m
KJ
Format dates in the viewer's zonedpl_6d04
Ready1h
MS
Try streaming for the dashboarddpl_5be3
Failed3h
A deployment console built entirely from prfct components.

Systematic by design

Decisions made once, so you never make them again.

Every prfct component is composed from the same foundations. Change a foundation and the whole interface follows.

4.9:1
4.6:1
4.6:1
4.6:1
Color

A palette you can prove

Twelve steps per hue, generated in OKLCH. Text steps are solved for WCAG AA on every fill they can sit on — and verified across 1,152 generated scales in the test suite.

Aa
Inter 4.1opsz 14 → 32wght 100 → 900tnum · zero · cv11
Typography

Type that adapts

Inter with optical sizing switches to its Display cut as text grows. Every OpenType feature survives self-hosting.

ease-spring · 521ms · no JavaScript
Motion

Springs in pure CSS

Physical springs simulated at build time and shipped as CSS linear() curves. Interruptible, and off with reduced motion.

// light.tokens.json — DTCG 2025.10
"brand": { "9": {
  "$type": "color",
  "$value": { "colorSpace": "oklch",
    "components": [0.515, 0.24, 267],
    "hex": "#2c4fee" } } }
Tokens

Tokens are data

Defined once in TypeScript. Exported as CSS, Tailwind utilities and W3C design-token JSON for Figma and Tokens Studio.

  • Text ≥ 4.5:1 on every fill
  • Control boundaries ≥ 3:1
  • Visible focus in forced colors
  • Keyboard patterns from WAI-ARIA
  • Reduced motion honored
  • Targets ≥ 24 × 24px
Accessibility

AA by construction

Base UI primitives implement the ARIA patterns; prfct makes the accessible choice the default one.

Components
54
Color tokens
169
Type roles
21
Runtime CSS-in-JS
0

Make it yours

One hue in. Twelve accessible steps out.

Pick a brand color and prfct regenerates the whole scale for light and dark mode — re-solving every text step for contrast. This entire page is repainting as you choose.

267°
oklch(0.515 0.24 267)6.07:1 AA
LivePreview
x

Read the theming guide.

Open code

You own every line.

Components are copied into your project with the shadcn CLI. Read them, change them, delete what you don’t need. Updates are a diff you review — never a breaking upgrade you’re forced into.

  • Base UI primitives for behavior and accessibility
  • Tailwind CSS v4 with a closed, tokenized theme
  • A shadcn registry: one command per component
components/ui/button.tsx
const buttonVariants = cva(base, {
 variants: {
 variant: {
 default: "bevel bg-primary text-primary-foreground",
 brand: "bevel bg-brand text-brand-foreground",
 outline: "border border-border-strong bg-card",
 ghost: "hover:bg-accent",
 },
 size: { xs, sm, default, lg, xl, icon },
 },
})

// Loading keeps width and focus — no layout shift.
<Button loading={saving}>Save changes</Button>

Nothing left to take away.

Install the theme, add your first component, and ship an interface that is precise from the first commit.

Read the installation guideExplore the foundations