A design system for Next.js.Built on shadcn, yours to change.

Tokens with tested contrast, accessible components and complete example apps. You install them with the shadcn CLI, and the code is yours.

Get started Browse components

$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json

Components that agree with each other

One radius, one spacing scale and one set of states, across every component.

Team

Three people can open this project.

MMaya ChenOwner

JJonah OkaforAdmin

LLena ParkMember

Plan

Change it whenever you like.

Hobby

One project

$0

Pro

Unlimited projects

$20

Contrast you don't have to check

Every scale is generated, and its text steps are tested against WCAG AA on the fills they sit on, in light and dark.

Type with roles

Each role sets size, line height, weight and tracking together.

Display
Heading
Body
Label
Code

Usable without a mouse

Keyboard support, focus management and ARIA come with every component.

One theme, any brand

Pick a color in the theme builder. Every component follows it.

Open the theme builder

Code you own

The shadcn CLI copies components into your project. Read them, change them, delete what you don't need.

$ shadcn add button
✔ components/ui/button.tsx
✔ components/ui/spinner.tsx
✔ components/ui/locale.tsx
✔ lib/utils.ts

Whole screens, not only parts

Example apps you install with one command and adapt.

From an empty folder to a first screen

01
Start a project
Create a Next.js app with shadcn. In an app you already have, leave out --template next.
$ pnpm dlx shadcn@latest init --template next --base base --preset nova
02
Add the theme
Tokens, base styles and font faces arrive as files in your project. The guide shows the stylesheet import and the two font files to download.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json
03
Add what you need
A single component or a whole example app. Each one brings what it depends on.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/dashboard.json

Questions people ask before they install

Yes. It is open source under the MIT license, for personal and commercial work.

Install the theme. Build your first screen today.

Read the installation guide

$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json

Landing page: bento

A two-tone headline and a bento grid where every feature is shown with the thing itself.

prfctGet started

NewExample apps you can install

A design system for Next.js, built on shadcn

Tokens with tested contrast, accessible components and complete example apps. You install them with the shadcn CLI, and the code is yours.

Get started Browse components

$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json

Create an account

Start with your work email.

Send me product updates

or

Usage On track

Resets on the first of the month.

Build minutes3,120 of 6,000

x

Team

Three people can open this project.

MMaya ChenOwner

JJonah OkaforAdmin

LLena ParkMember

Plan

Change it whenever you like.

Hobby

One project

$0

Pro

Unlimited projects

$20

Deployment ready

Production now serves the build from main.

Notifications

Changes save as you switch.

Deployments

Comments

Weekly digest

Appearance

How the editor looks on this device.

Two-step verification

Enter the code from your authenticator.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Every element above is a prfct component in its default theme.

What you start with

The decisions a design system has to make, already made and written down.

Contrast you don't have to check

Every scale is generated, and its text steps are tested against WCAG AA on the fills they sit on, in light and dark.

Accessible from the first render

Keyboard support, focus management and ARIA come with every component, and automated tests check them in both themes.

Code you own

The shadcn CLI copies components into your project. Read them, change them, delete what you don't need.

One theme, any brand

Pick a color in the theme builder and paste one stylesheet. Every component follows it.

Whole screens, not only parts

A dashboard, a checkout, a mail client and more: example apps you install with one command and adapt.

Ready for more than English

The text built into components, dates and numbers follow the language of your page.

From an empty folder to a first screen

No package to configure and nothing to wrap your app in.

01
Start a project
Create a Next.js app with shadcn. In an app you already have, leave out --template next.
$ pnpm dlx shadcn@latest init --template next --base base --preset nova
02
Add the theme
Tokens, base styles and font faces arrive as files in your project. The guide shows the stylesheet import and the two font files to download.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json
03
Add what you need
A single component or a whole example app. Each one brings what it depends on.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/dashboard.json

Start from a finished screen

Example apps written to be read, each installed with one command.

All examples

Questions

The ones people ask before they install anything.

Yes. It is open source under the MIT license, for personal and commercial work.

Install the theme and build your first screen

$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json

Read the installation guide See the examples

Landing page: classic

A centered hero with a wall of components, features with icons, install steps, a list of examples and questions.

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

Deployment	Branch	Status	Age
AL Ship the new billing pagedpl_8f2c	main	Ready	2m
GH Command palette with fuzzy searchdpl_7a91	feat/search	Building	6m
KJ Format dates in the viewer's zonedpl_6d04	fix/tz	Ready	1h
MS Try streaming for the dashboarddpl_5be3	exp/edge	Failed	3h

Dashboard

A deployment console: navigation, stats with sparklines, a traffic chart, team activity and a deployments table.

Inbox

Launch review: Halden 3.2

Launch

PR

Priya Ramanpriya@halden.app

To Product team

Thu, Oct 29, 1:18 PM

Hi team,

Thanks for a focused review this morning. We're a go for Tuesday, November 3, with two conditions we agreed on in the room:

The billing migration finishes in staging by Friday noon, and Amara signs off on the rollback plan.
Help center articles for the new scheduling view are published before the announcement email goes out.

If either slips, we move to Thursday rather than ship half the story. Kenji will post the final checklist in the launch channel by the end of the day.

The slides and the decision log are attached.

Priya

launch-review-3.2.pdfPDF · 1.2 MB

Mail

A three-pane inbox: folders, a message list with unread states, and a reading pane with a reply box.

Trial activation benchmarks

You: What share of B2B trials invite a teammate in the first week, and how should we measure it for our workspaces?

KestrelSearched 12 sources

Across B2B collaboration tools, 30 to 40% of trial workspaces invite a teammate in their first week, and those trials convert to paid at about three times the rate of solo ones . Meridian sits at the low end: 31% of September trials sent an invite within seven days .

Timing explains most of the gap. Teams invite people once they have something worth showing, not at signup . Three changes tend to move the rate:

Ask after the first win. Prompt for invites when someone shares their first document, not on the welcome screen .
Invite to something specific. Links that open a shared document are accepted far more often than workspace invites .
Count sent invites, not accepted ones. Your dashboard counts acceptances, which lag by days and hide intent .

To track it weekly, this query returns the share of trial workspaces that sent an invite within seven days of signup:

sql

select
  date_trunc('week', w.created_at) as signup_week,
  count(*) as trials,
  avg((exists (
    select 1 from workspace_invites i
    where i.workspace_id = w.id
      and i.sent_at < w.created_at + interval '7 days'
  ))::int) as invite_rate
from workspaces w
where w.plan = 'trial'
group by 1
order by 1 desc;

Add i.accepted_at is not null to the subquery for the stricter version your Q3 review used .

Sources

You: How do Northwind and Halden ask for invites during onboarding? Compare their flows step by step.

KestrelDeep research

Reading 9 of 14 sources

Answers can be wrong. Check important information.

Assistant

A workspace for an AI assistant: conversation history, answers with sources and code, and a composer.

Halden Studio

Checkout

A one-page checkout: contact, delivery and payment, with an order summary that stays in view.

Plans and pricing

Deploy personal projects on Northwind for free, and pay per member once your team ships to production.

2 months free

Hobby

For personal projects and experiments.

€0

No credit card required

Includes

3 projects
100 build minutes a month
100 GB bandwidth
A preview deployment for every push
Automatic HTTPS and custom domains
Community support

Pro

Recommended

For teams that ship to production every week.

€24per user / month

Billed monthly

Everything in Hobby, plus

Unlimited projects
6,000 build minutes a month
1 TB bandwidth
4 concurrent builds
Roles and shared environment variables
Email support within one business day

Enterprise

For organizations with security and compliance needs.

Custom

Volume pricing on an annual contract

Everything in Pro, plus

SAML single sign-on and SCIM
Custom build capacity and bandwidth
Deployment approvals and audit log export
Data residency in the EU or US
99.99% uptime SLA
A dedicated support engineer

Prices in euros, excluding VAT.

Compare plans

Feature	Hobby€0	Pro€24 per user / month	EnterpriseCustom
Usage
Projects	3	Unlimited	Unlimited
Build minutes per month	100	6,000	Custom
Bandwidth per month	100 GB	1 TB	Custom
Concurrent builds	1	4	Custom
Preview deployments	Included	Included	Included
Log retention	1 day	30 days	1 year
Collaboration
Team members	1	Unlimited	Unlimited
Comments on previews	Included	Included	Included
Roles and permissions	Not included	Included	Custom roles
Shared environment variables	Not included	Included	Included
Deployment approvals	Not included	Not included	Included
Security
Two-factor authentication	Included	Included	Included
Audit log	Not included	90 days	1 year, with export
SAML single sign-on	Not included	Not included	Included
SCIM provisioning	Not included	Not included	Included
Data residency	Not included	Not included	EU or US
Uptime SLA	Not included	Not included	99.99%
Support
Community forum	Included	Included	Included
Email support	Not included	Included	Included
First response	Not included	1 business day	1 hour
Dedicated support engineer	Not included	Not included	Included
Migration help	Not included	Not included	Included

Frequently asked questions

Billing, seats and invoices. Anything else goes to our support team, who reply within one business day.

For custom contracts, security reviews or invoicing by purchase order, talk to our team.

Pricing

Three plans with a monthly and yearly switch, a feature comparison and answers to common questions.

Notifications

Choose what we email you about. Changes save as you switch.

Deployments

When a production deployment succeeds or fails.

Comments

When someone mentions you or replies to you.

Weekly digest

A summary of usage and activity every Monday.

Plan Pro

Renews monthly on the 18th.

Build minutes5,420 of 6,000

x

Danger zone

Irreversible actions for this project.

Settings

Responsive setting rows, notification toggles, plan usage and a danger zone with typed confirmation.

Invoice		Status
INV-2043	Meridian LabsOverdue	Overdue	Aug 30	890.00
INV-2046	Arbor & FinchOverdue	Overdue	Sep 1	1,999.00
INV-2041	Northwind TradersPaid	Paid	Sep 2	12,400.00
INV-2044	Kestrel HealthPaid	Paid	Sep 10	25,600.00
INV-2042	Halden StudioPending	Pending	Sep 28	3,180.50
INV-2045	Lumen FreightPending	Pending	Oct 4	7,420.75

6 of 6 invoices

Invoices

A data table with search, status filters, sortable columns, row selection and bulk actions.

Authentication

Passwordless sign-in with social providers and a one-time code: two steps on one screen.

MCMaya Chen

Intro call

A walkthrough of Meridian for your team. Bring your questions.

30 minutes
Video call, link sent by email
Central European Time

September 2026

Thursday, September 24

Booking

Scheduling a call: a calendar with unavailable days, free time slots, a short form and a confirmation.

Team

Members and invitations: search, roles that change in place, removal with undo and an invite dialog.

Contact

Delivery address

Delivery method

Payment

Hobby

Pro

Enterprise