Перейти к содержимому
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 любого компонента добавляется точно так же.