Skip to content
prfct
All examples

Landing page: bento

The home page of this site. A left-aligned hero with a command to copy, a bento grid of live components, color scales, type roles and a terminal, three install steps, questions and a closing call to action. Its own header and footer are optional.

prfctGet started
New: example apps you can install

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 startedBrowse components
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json

Features

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.

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

  1. 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
  2. 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
  3. 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