Instalacja

Dodaj prfct do nowego lub istniejącego projektu Next.js w kilka minut — za pomocą shadcn CLI albo ręcznie.

prfct jest dystrybuowany jako otwarty kod: komponenty są kopiowane do twojego projektu i od tej chwili należą do ciebie. Kopiowaniem i zależnościami zajmuje się shadcn CLI, a rejestr prfct dostarcza motyw i komponenty.

Wymagania

Next.js 15 lub nowszy z App Routerem (działają też Vite, TanStack Start i React Router)
React 19
Tailwind CSS v4
Node.js 20.9 lub nowszy

Utwórz projekt

Pomiń ten krok, jeśli masz już projekt ze skonfigurowanym shadcn. W przeciwnym razie to polecenie utworzy aplikację Next.js z shadcn skonfigurowanym pod Base UI — bibliotekę prymitywów, na której zbudowane są komponenty prfct:

$ pnpm dlx shadcn@latest init --template next --base base

W istniejącym projekcie Next.js uruchom zamiast tego shadcn@latest init --base base.

Zainstaluj motyw prfct

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

To polecenie kopiuje do styles/prfct/ tokeny, style bazowe, klasy narzędziowe ruchu i fokusu oraz definicje fontów, dodaje do lib/utils.ts funkcję cn() rozpoznającą tokeny, tworzy ThemeProvider i instaluje zależności.

Zaimportuj style

Zastąp zawartość globalnego arkusza stylów czterema importami poniżej. Tokeny prfct zastępują bloki :root, .dark i @theme inline wygenerowane przez shadcn init — jeśli je zostawisz, nadpiszą wartości prfct.

app/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "../styles/prfct/index.css";

@custom-variant dark (&:where(.dark, .dark *));

Dodaj fonty

prfct używa kroju Inter 4.1 hostowanego samodzielnie — dzięki temu przy przycinaniu fontu do podzbioru znaków (subsetting) nie przepada żadna funkcja OpenType. Pobierz oba pliki do public/fonts:

curl --create-dirs -o public/fonts/inter-4.1-variable.woff2 https://www.prfct.dev/fonts/inter-4.1-variable.woff2
curl -o public/fonts/inter-4.1-variable-italic.woff2 https://www.prfct.dev/fonts/inter-4.1-variable-italic.woff2

Następnie zaktualizuj główny layout: usuń font bezszeryfowy, który ładuje next/font (arkusz stylów prfct sam definiuje --font-sans), załaduj Geist Mono jako --font-geist-mono, wczytaj Inter z wyprzedzeniem (preload) i opakuj aplikację w ThemeProvider.

app/layout.tsx

import { Geist_Mono } from "next/font/google"
import ReactDOM from "react-dom"

import { ThemeProvider } from "@/components/theme-provider"
import "./globals.css"

const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })

export default function RootLayout({ children }: { children: React.ReactNode }) {
  ReactDOM.preload("/fonts/inter-4.1-variable.woff2", {
    as: "font",
    type: "font/woff2",
    crossOrigin: "anonymous",
  })

  return (
    <html lang="en" className={geistMono.variable} suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Dodaj komponenty

Dodawaj komponenty pojedynczo, gdy ich potrzebujesz. Każdy przynosi ze sobą komponenty, na których się opiera:

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

Możesz też raz zarejestrować prfct jako przestrzeń nazw i od tej pory używać krótkich nazw:

components.json

{
  "registries": {
    "@prfct": "https://www.prfct.dev/r/{name}.json"
  }
}

$ pnpm dlx shadcn@latest add @prfct/button @prfct/dialog @prfct/field

Używaj ich

app/page.tsx

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Get started</Button>
}

Sprawdzone od A do Z

Te kroki zostały przetestowane na świeżym projekcie utworzonym poleceniem shadcn init --template next --base base: motyw i komponenty się instalują, przechodzą sprawdzanie typów i budują się przez next build.

Instalacja ręczna

Wolisz mieć wgląd w każdy plik? Na stronie każdego komponentu jest zakładka Ręcznie z jego kodem źródłowym i zależnościami. Podstawa jest niewielka:

Style. Skopiuj pięć plików do styles/prfct/, zmieniając nazwę styles/prfct.css na index.css. Importuje on fonts.css, tokens.css, base.css i utilities.css z tego samego folderu. Zaimportuj styles/prfct/index.css w globalnym arkuszu stylów po Tailwindzie, tak jak wyżej.
Funkcje pomocnicze. lib/utils.ts eksportuje funkcję cn() rozpoznającą tokeny. Jej jedyną zależność zainstalujesz poleceniem pnpm add cn.
Fonty. Dwa pliki Intera w public/fonts oraz Geist Mono ładowany przez next/font jako --font-geist-mono. Bez niego kod wyświetli się systemowym fontem o stałej szerokości znaków.
Pakiety. @base-ui/react, class-variance-authority, lucide-react, next-themes, shadcn (ze względu na warianty Tailwinda) i tw-animate-css.

Tryb ciemny

ThemeProvider podąża za preferencją systemu i zapamiętuje dokonany wybór. Komponenty nigdy nie używają dark: — odczytują tokeny, które przełączają się razem z klasą .dark; działa ona także w dowolnym poddrzewie. Zobacz Motywy.

Aktualizacje

Kod należy do ciebie, więc aktualizacje przyjmujesz tylko wtedy, gdy chcesz. Zanim przyjmiesz zmianę z rejestru, podejrzyj, co dokładnie się zmieniło:

$ pnpm dlx shadcn@latest add @prfct/button --diff button.tsx