Перейти до вмісту
1.6k

Next.js

Налаштуйте Neobrutalism у проєкті Next.js.

1. Створіть проєкт

Створіть новий застосунок Next.js або пропустіть цей крок, щоб використати наявний:

pnpm create next-app@latest my-app --typescript --tailwind --app
npx create-next-app@latest my-app --typescript --tailwind --app
yarn create next-app@latest my-app --typescript --tailwind --app
bunx --bun create-next-app@latest my-app --typescript --tailwind --app

2. Запустіть ініціалізацію

Ініціалізуйте shadcn у своєму проєкті. Це створює components.json і налаштовує ваші шляхи та Tailwind:

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

3. Додайте реєстр Neobrutalism

Додайте реєстри Neobrutalism до свого components.json:

components.json
{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

4. Додайте шрифти та тему

Виконайте кроки з розділу Шрифти та тема, щоб отримати фірмовий вигляд Neobrutalism — заголовки Archivo Black, основний текст Space Grotesk і необруталістські токени кольорів та тіней.

5. Додайте компонент

pnpm dlx shadcn@latest add @neobrutalism/button
npx shadcn@latest add @neobrutalism/button
yarn dlx shadcn@latest add @neobrutalism/button
bunx --bun shadcn@latest add @neobrutalism/button

Потім імпортуйте його та використовуйте:

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

Готово 🚀 — варіант Radix або Base UI будь-якого компонента додається так само.