āđāļāļĢāļ·āđāļāļāļŠāļĢāđāļēāļāļāļĩāļĄ shadcn/ui āļŠāđāļāļāļāļāļāļąāļ§āđāļāļĢāļŠāļĩāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ
āļŠāļĢāđāļēāļāļāļąāļ§āđāļāļĢāļŠāļĩāļāļĩāļĄāļāļĢāļāļāļļāļāļŠāļģāļŦāļĢāļąāļ shadcn/ui āļāļĢāļāļāļāļĨāļļāļĄāļāļąāđāļāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āļāļąāļāļĨāļāļāđāļāđāļāđāļāļāļĨāļīāļāđāļāļĩāļĒāļ§āđāļāđāļāđāļāļąāļāđāļĨāļāļĢāļēāļĢāļĩāļāļāļĄāđāļāđāļāļāļāđāđāļāđāļāļąāļāļāļĩ
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
āļāļąāļ§āļāļĒāđāļēāļ
āļāļąāļ§āļāļĒāđāļēāļāļāļāļĄāđāļāđāļāļāļāđ
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}āļŠāļĢāđāļēāļāļāļąāļ§āđāļāļĢāļŠāļĩāļāļĩāļĄāļāļĢāļāļāļļāļāļŠāļģāļŦāļĢāļąāļ shadcn/ui āļāļĢāļāļāļāļĨāļļāļĄāļāļąāđāļāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āļāļąāļāļĨāļāļāđāļāđāļāđāļāļāļĨāļīāļāđāļāļĩāļĒāļ§āđāļāđāļāđāļāļąāļāđāļĨāļāļĢāļēāļĢāļĩāļāļāļĄāđāļāđāļāļāļāđāđāļāđāļāļąāļāļāļĩ
āđāļāļĢāļ·āđāļāļāļŠāļĢāđāļēāļāļāļĩāļĄ shadcn/ui āļŠāđāļāļāļāļāļāļąāļ§āđāļāļĢāļŠāļĩāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āđāļŠāļāļāđāļāļāļēāļ°āļāļąāļ§āļāļ§āļāļāļļāļĄāđāļĨāļ°āļāļĨāļĨāļąāļāļāđāļāļĩāđāđāļāļĩāđāļĒāļ§āļāđāļāļāļāļąāļāļŦāļāđāļēāļāļĩāđāļāļāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļ āļāļąāļ§āđāļĨāļ·āļāļāļāļĩāđāļĄāļĩāļāļķāđāļāļāļĒāļđāđāļāļąāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāđāļĨāļ°āļāđāļāļĄāļđāļĨāļāļģāđāļāđāļē
āļĢāļđāļāđāļāļāļāļĩāđāļĢāļāļāļĢāļąāļ
āļ§āļīāļāļĩāđāļāđāļāļēāļ
āļāļąāđāļāļāļāļ 1
āđāļāļīāļ āđāļāļĢāļ·āđāļāļāļŠāļĢāđāļēāļāļāļĩāļĄ shadcn/ui āļŠāđāļāļāļāļāļāļąāļ§āđāļāļĢāļŠāļĩāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āđāļĨāļ°āđāļāļĢāļĩāļĒāļĄāļāđāļāļĄāļđāļĨāļāļĩāđāļāļīāļāđāļāļāļĢāđāđāļāļāļĢāđāļāļāļāļ
āļāļąāđāļāļāļāļ 2
āļāļĢāļąāļāļāļąāļ§āļāļ§āļāļāļļāļĄāļāļĩāđāļĄāļāļāđāļŦāđāļāļāļēāļĄāļāļĨāļĨāļąāļāļāđāļāļĩāđāļāđāļāļāļāļēāļĢ
āļāļąāđāļāļāļāļ 3
āļāļĢāļ§āļāļŠāļāļāļāļĨāļĨāļąāļāļāđāļāđāļāļāļāļąāļāļĨāļāļ āļŠāđāļāļāļāļ āļŦāļĢāļ·āļāļāļģāđāļāđāļāđāļāđāļģ
āļāđāļāļāļīāļāļāļĨāļēāļāļāļĩāđāļāļāļāđāļāļĒāļāļĩāđāļāļ§āļĢāļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļ
- āļāļĒāđāļēāļāļ·āļāļ§āđāļēāļĢāļđāļāđāļāļāļŦāļĢāļ·āļāļāļąāļ§āđāļĨāļ·āļāļāđāļāđāļĢāļąāļāļāļēāļĢāļĢāļāļāļĢāļąāļāļŦāļēāļāđāļĄāđāļāļĢāļēāļāļāđāļāļāļīāļāđāļāļāļĢāđāđāļāļ
- āļāļĢāļ§āļāļŠāļāļāļāđāļēāļāđāļāļāļāļģāđāļāđāļāđāđāļāđāļāļĢāļāļāđ āļāļīāļāđāļāļāļĢāđāđāļāļ āļŦāļĢāļ·āļāđāļāļĨāđāļāļēāļāļāļĢāļīāļ
- āļŦāļēāļāđāļāđāļāļąāļāļāđāļāļāļ§āļēāļĄāļŦāļĢāļ·āļ UI āļāļ§āļĢāļāļĢāļ§āļāļŠāļāļāļāļāļāļāļĢāļēāļŠāļāđāļāđāļ§āļĒ
āđāļāļĨāđāļāļĨāļąāļāļāļēāļāļĄāļ·āļāđāļāļĢ
- āđāļāđāļāļāđāļēāļāđāļāļāļēāļāđāļ§āđāļāļąāļāļāļĨāļĨāļąāļāļāđāđāļĄāļ·āđāļāđāļāļĢāļĩāļĒāļāđāļāļĩāļĒāļāļŦāļĨāļēāļĒāļāļąāļ§āđāļĨāļ·āļāļ
- āđāļāđāļĢāļđāļāđāļāļāļāļĩāđāđāļāļĢāļ·āđāļāļāļĄāļ·āļāđāļŠāļāļāļāļĢāļīāļāđāļāļāļāļēāļĢāļāļēāļāđāļāļēāļāļēāļĢāđāļāļĨāļ
- āļāļāļĄāļ·āļāļāļ·āļāđāļĨāļ°āđāļāđāļāđāļĨāđāļāđāļŦāđāļāđāļāļāļ§āļēāļĄāđāļĨāļ°āļāļąāļ§āļāļ§āļāļāļļāļĄāļāļąāļāļāļķāđāļāļāļĢāļĢāļāļąāļāđāļŦāļĄāđāđāļāđ
āļāļēāļĢāļāļąāļāļāļēāļĢāļāđāļāļĄāļđāļĨ
āļāļēāļĢāļāļĢāļ°āļĄāļ§āļĨāļāļĨāļāđāļāļĄāļđāļĨāļāļķāđāļāļāļĒāļđāđāļāļąāļāļāļąāļāļāđāļāļąāļāļāļĩāđāđāļāđ āļāļēāļĢāļĒāļīāļāļĒāļāļĄ āļāļēāļĢāļ§āļīāđāļāļĢāļēāļ°āļŦāđ āđāļĨāļ°āļāļąāļāļāđāļāļąāļāļāļąāļāļāļĩāļāļāļāđāļ§āđāļāđāļāļāđāđāļĒāļāļāļēāļāļāļēāļĢāļāļģāļāļēāļāļāļąāļāļŠāļĩ
āđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļĩāđāļāļģāļāļ°āđāļĢ
āļŠāļĢāđāļēāļāļāļąāļ§āđāļāļĢāļŠāļĩāļāļĩāļĄāļāļĢāļāļāļļāļāļŠāļģāļŦāļĢāļąāļ shadcn/ui āļāļĢāļāļāļāļĨāļļāļĄāļāļąāđāļāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āļāļąāļāļĨāļāļāđāļāđāļāđāļāļāļĨāļīāļāđāļāļĩāļĒāļ§āđāļāđāļāđāļāļąāļāđāļĨāļāļĢāļēāļĢāļĩāļāļāļĄāđāļāđāļāļāļāđāđāļāđāļāļąāļāļāļĩ āđāļāļĢāļ·āđāļāļāļŠāļĢāđāļēāļāļāļĩāļĄ shadcn/ui āļŠāđāļāļāļāļāļāļąāļ§āđāļāļĢāļŠāļĩāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āļĄāļļāđāļāđāļāđāļāļāļēāļāļāļĩāđāđāļĨāļ°āđāļĄāđāļāđāļēāļāļāļķāļāļāļąāļāļāđāļāļąāļāļāļĩāđāđāļĄāđāļāļĢāļēāļāļāđāļāļāļīāļāđāļāļāļĢāđāđāļāļ āđāļāđāļāļąāļ§āļāļ§āļāļāļļāļĄāļāļĩāđāļĄāļĩāđāļāļ·āđāļāđāļŦāđāđāļāđāļāļĨāļĨāļąāļāļāđāļāļĩāđāļāđāļāļāļāļēāļĢ āđāļĨāđāļ§āļāļĢāļ§āļāļŠāļāļāļāđāļēāļāļĩāđāđāļŠāļāļāļāđāļāļāļāļģāđāļāđāļāđāđāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļ·āđāļ āļŠāđāļāļĨāđāļāļĩāļ āđāļāļĨāđāļāļāļāđāļāļ āļŦāļĢāļ·āļāđāļāļāļŠāļēāļĢ
āđāļāļĢāļĩāļĒāļĄāļāđāļāļĄāļđāļĨāļāļģāđāļāđāļēāļāļĩāđāđāļŦāļĄāļēāļ°āļŠāļĄ
āđāļĢāļīāđāļĄāļāļēāļāļāđāļāļĄāļđāļĨāļāļĩāđ āđāļāļĢāļ·āđāļāļāļŠāļĢāđāļēāļāļāļĩāļĄ shadcn/ui āļŠāđāļāļāļāļāļāļąāļ§āđāļāļĢāļŠāļĩāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āļāļ āļāļķāđāļāļāļēāļāđāļāđāļāļŠāļĩ āļāđāļē āļĢāļđāļāļ āļēāļ āļŦāļĢāļ·āļāļāļēāļĢāļāļąāđāļāļāđāļēāļāļēāļĄāļŦāļāđāļēāļāļ āļĢāļđāļāđāļāļāļāļĩāđāļĢāļ°āļāļļāđāļāļŦāļāđāļēāļāļĩāđāļāļ·āļ CSS, Tailwind, HSL, shadcn/ui āļŦāļēāļāļĢāļđāļāđāļāļāļŦāļĢāļ·āļāļāļąāļ§āđāļĨāļ·āļāļāđāļĄāđāđāļŠāļāļāđāļāļāļīāļāđāļāļāļĢāđāđāļāļ āļāļĒāđāļēāļāļ·āļāļ§āđāļēāļāļąāļāļāđāļāļąāļāļāļĩāđāļĢāļāļāļĢāļąāļ
āļāđāļēāļāđāļĨāļ°āļāļĢāļ§āļāļŠāļāļāļāļĨāļĨāļąāļāļāđ
āļāđāļēāļāļāļĨāļĨāļąāļāļāđāļāļēāļĄāļāļĢāļīāļāļāļāļāļāļāļēāļĢāļāļģāļāļēāļāļāļĩāđāļāļļāļāļāļģāđāļāļīāļāļāļēāļĢ āđāļāļĢāļĩāļĒāļāđāļāļĩāļĒāļāļāļąāļāļāđāļēāļāđāļāļāļēāļāđāļĨāļ°āļāļĢāļ§āļāļŠāļāļāļāļēāļĢāļāļąāđāļāļāđāļēāļāļĩāđāļĄāļĩāļāļĨāļāđāļāļāļēāļĢāļāļģāļāļ§āļ āļŠāļģāļŦāļĢāļąāļāļāļēāļāļ āļēāļāļŠāļģāļāļąāļāļāļ§āļĢāļāļđāļāļĨāļĨāļąāļāļāđāđāļāļāļīāļāđāļāļāļĢāđāđāļāļāļāļĢāļīāļāļāļĩāđāļāļ°āđāļāđāļāļēāļāļāđāļ§āļĒ āđāļĄāđāļāļ§āļĢāļāļēāļĻāļąāļĒāđāļāđāļāđāļāļĩāļĒāļāļāļĒāđāļēāļāđāļāļĩāļĒāļ§
āđāļāđāļāļēāļāļāļāļĄāļ·āļāļāļ·āļāđāļĨāļ°āđāļāđāļāđāļĨāđāļ
āđāļāļĢāļ·āđāļāļāļŠāļĢāđāļēāļāļāļĩāļĄ shadcn/ui āļŠāđāļāļāļāļāļāļąāļ§āđāļāļĢāļŠāļĩāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āđāļāđāđāļĨāļĒāđāđāļāļēāļāđāđāļāļ responsive āļāļāļāđāļ§āđāļāđāļāļāđ āļāļāļŦāļāđāļēāļāļāđāļāļ āļŦāļąāļ§āļāđāļ āļāļģāļāļāļīāļāļēāļĒ breadcrumbs āđāļĨāļ°āļāļąāļ§āļāļ§āļāļāļļāļĄāļŠāļēāļĄāļēāļĢāļāļāļąāļāļāļķāđāļāļāļĢāļĢāļāļąāļāđāļŦāļĄāđāđāļāļ·āđāļāđāļĄāđāđāļŦāđāļāļģāđāļāļĨāļĒāļēāļ§āļāļđāļāļāļąāļ āļāļĒāđāļēāļāđāļĢāļāđāļāļēāļĄāļāļ§āļĢāļāļĢāļ§āļāļŠāļāļāļāļĨāļĨāļąāļāļāđāļŠāļļāļāļāđāļēāļĒāļāļāļāļļāļāļāļĢāļāđāđāļĨāļ°āļāļĢāļīāļāļāļāļĩāđāļāļ°āđāļāđāļāļēāļāļāļĢāļīāļ
āļāļģāļāļĨāļĨāļąāļāļāđāđāļāđāļāđāđāļāđāļāļĢāđāļāļāļāđ
āļŦāļĨāļąāļāļāļĢāļ§āļāļŠāļāļāļāļĨāļĨāļąāļāļāđāđāļĨāđāļ§ āđāļŦāđāđāļāđāđāļāļāļēāļ°āļāļēāļĢāļāļģāļāļēāļāļāļĩāđ āđāļāļĢāļ·āđāļāļāļŠāļĢāđāļēāļāļāļĩāļĄ shadcn/ui āļŠāđāļāļāļāļāļāļąāļ§āđāļāļĢāļŠāļĩāđāļŦāļĄāļāļŠāļ§āđāļēāļāđāļĨāļ°āļĄāļ·āļ āļĄāļĩāļāļĢāļīāļ āđāļāđāļ āļāļēāļĢāļāļąāļāļĨāļāļāļŦāļĢāļ·āļāļŠāđāļāļāļāļāđāļĄāļ·āđāļāļĄāļĩāļāļąāļ§āđāļĨāļ·āļāļāļāļĩāđ āđāļāđāļāļāđāļēāļāđāļāļāļēāļāđāļ§āđāļŦāļēāļāļāđāļāļāļŠāļĢāđāļēāļāļāļēāļĢāļāļąāđāļāļāđāļēāđāļāļīāļĄāļāļĩāļ āđāļĨāļ°āļŠāļģāļŦāļĢāļąāļāļŠāļĩ UI āļāļ§āļĢāļāļąāļāļāļķāļāļāļāļāļēāļāļāļāļāļŠāļĩāđāļĨāļ°āļāđāļāļāļģāļŦāļāļāļāđāļēāļāļāļāļāļāļĢāļēāļŠāļāđāļāđāļ§āļĒ
āđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļĩāđāđāļāļĩāđāļĒāļ§āļāđāļāļ
āļāļđāđāļĄāļ·āļāđāļĨāļ°āļāļāļāđāļ§āļĒāļŠāļāļ
āđāļĢāļĩāļĒāļāļĢāļđāđāļ§āļīāļāļĩāļāļēāļĢāđāļāđāļāļēāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļāļāđāļĢāļēāļāđāļ§āļĒāļāļđāđāļĄāļ·āļāđāļāļāļĨāļ°āđāļāļĩāļĒāļ
shadcn-theme: āļāļđāđāļĄāļ·āļāđāļāđāļāļēāļ developer
āļāļđāđāļĄāļ·āļāļ āļēāļĐāļēāđāļāļĒāļŠāļģāļŦāļĢāļąāļāđāļāđ shadcn-theme āđāļāđāļēāđāļāđāļāļ§āļāļēāļ developer āđāļĨāļ°āļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļāļāđāļāļāļīāļāļāļĨāļēāļāļāļąāđāļ§āđāļ
shadcn-theme: āļāļđāđāļĄāļ·āļāđāļāđāļāļēāļ developer
āļāļđāđāļĄāļ·āļāļ āļēāļĐāļēāđāļāļĒāļŠāļģāļŦāļĢāļąāļāđāļāđ shadcn-theme āđāļāđāļēāđāļāđāļāļ§āļāļēāļ developer āđāļĨāļ°āļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļāļāđāļāļāļīāļāļāļĨāļēāļāļāļąāđāļ§āđāļ
shadcn-theme: āļāļđāđāļĄāļ·āļāđāļāđāļāļēāļ developer
āļāļđāđāļĄāļ·āļāļ āļēāļĐāļēāđāļāļĒāļŠāļģāļŦāļĢāļąāļāđāļāđ shadcn-theme āđāļāđāļēāđāļāđāļāļ§āļāļēāļ developer āđāļĨāļ°āļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļāļāđāļāļāļīāļāļāļĨāļēāļāļāļąāđāļ§āđāļ
āļāļģāļāļēāļĄāļāļĩāđāļāļāļāđāļāļĒ
āđāļĢāļĩāļĒāļāļĢāļđāđāļ§āļīāļāļĩāļāļēāļĢāđāļāđāļāļēāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļāļāđāļĢāļēāļāđāļ§āļĒāļāļđāđāļĄāļ·āļāđāļāļāļĨāļ°āđāļāļĩāļĒāļ