shadcn-ui-setup

Umiejętność do instalacji i konfiguracji biblioteki komponentów Shadcn/ui opartej na prymitywach Radix UI, wraz z efektami wizualnymi Aceternity UI. Shadcn/ui to kolekcja komponentów copy-paste, które trafiają bezpośrednio do Twojego projektu – masz pełną kontrolę nad kodem, bez dodatkowych zależności. Idealna do projektów Next.js, gdy chcesz dodać dostępne, stylizowalne komponenty lub efekty do sekcji marketingowych.

1. Przed uruchomieniem jakichkolwiek poleceń użyj Context7 MCP, aby pobrać najnowszą dokumentację dla shadcn-ui, aceternity-ui i radix-ui – zapewni to dostęp do aktualnych instrukcji inicjalizacji i dostępnych komponentów.
2. Przejdź do katalogu frontend Twojego projektu Next.js i uruchom interaktywną konfigurację: npx shadcn-ui@latest init.
3. Podczas konfiguracji potwierdź ustawienia: TypeScript (tak), styl domyślny, kolor bazowy (np. Slate), ścieżka CSS (src/styles/globals.css) i zmienne CSS (tak).
4. Po inicjalizacji Shadcn/ui możesz instalować poszczególne komponenty – każdy zostanie skopiowany do Twojego projektu, co daje Ci pełną kontrolę nad kodem i możliwość dostosowania za pomocą Tailwind CSS.
5. Do sekcji marketingowych i stron głównych dodaj efekty Aceternity UI (BackgroundBeams, TextGenerateEffect, MovingBorder, SparklesCore, BackgroundGradient, CardHoverEffect) – również poprzez copy-paste kodu do projektu.
6. Wszystkie komponenty są dostępne domyślnie (Radix UI) i bezpieczne typowo dzięki TypeScript, co eliminuje problemy z zależnościami i zapewnia dostępność.