shadcn/ui
Styling
CSS változók + Tailwind, className merge cn-nel, cva variánsok, dark mode next-themes-szel.
Styling
Tailwind + CSS változók
A shadcn/ui tipikusan:
- CSS változókkal kezeli a témaszíneket (
--primary,--background, stb.) - Tailwind utility classokkal kezeli a layoutot, spacinget, typography-t
className prop és a cn helper
<Button className="w-full mt-4">Bejelentkezés</Button>Variáns alapú styling (cva)
<Button variant="default">Alap</Button>
<Button variant="destructive">Törlés</Button>
<Button variant="outline">Körvonal</Button>
<Button variant="secondary">Másodlagos</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>Dark mode (next-themes)
npm install next-themesimport { ThemeProvider } from "@/components/theme-provider"Rövid összefoglaló
- CSS változók adják a témát; Tailwind a komponens layoutját.
cnsegít a classok biztonságos merge-elésében.