shadcn/ui
Komponensek testreszabása
Saját variánsok, wrapper komponensek, asChild minta és mikor módosíts közvetlenül ui/-ban.
Komponensek testreszabása
Variáns hozzáadása (példa)
// button.tsx-ben a cva variants részben:
success: "bg-green-600 text-white hover:bg-green-700",
warning: "bg-amber-500 text-white hover:bg-amber-600",Wrapper komponens
Gyakran jobb wrapper komponenst építeni (app-szintű logika, loading state, analitika), mint az alap ui/ komponenst mindenhol átírni.
asChild prop
import Link from "next/link"
import { Button } from "@/components/ui/button"
<Button asChild>
<Link href="/dashboard">Dashboard</Link>
</Button>Rövid összefoglaló
- Variánsokat a cva-nál bővítesz.
- App logikához wrapper komponens a tisztább megoldás.
asChildsegít stílust „ráhúzni” Linkre/egyéb elemre.