Landing page: classic
A centered hero with a command to copy, a wall of live components, six features, three install steps, a list of examples, questions and a closing call to action. Its own header and footer are optional.
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.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.jsonEvery 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.
- DashboardNavigation, stats, a traffic chart and a deployments table.
- MailFolders, a message list and a reading pane with a reply box.
- CheckoutContact, delivery and payment with an order summary in view.
- BookingA calendar, free time slots, a short form and a confirmation.
- TeamMembers, roles that change in place and an invite dialog.
- PricingThree plans, a comparison table and answers to questions.
Questions
The ones people ask before they install anything.
Install the theme and build your first screen
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json