S
shadcn-ui-setup
Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.
How to use
- 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.
- Przejdź do katalogu frontend Twojego projektu Next.js i uruchom interaktywną konfigurację: npx shadcn-ui@latest init.
- Podczas konfiguracji potwierdź ustawienia: TypeScript (tak), styl domyślny, kolor bazowy (np. Slate), ścieżka CSS (src/styles/globals.css) i zmienne CSS (tak).
- 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.
- 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.
- 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ść.