Shadcn/ui

Áttekintés

Az alkalmazásunk a modern megjelenés érdekében a shadcn/ui -t is használja, amely nem egy közönséges UI könyvtár, inkább (ahogy az oldalukon is szerepel) egy újrafelhasználható komponensek gyűjteménye.

A shadcn komponensei gyárilag hozzáférhetővé teszik az alkalmazásainkat, emellett letisztult megjelenést biztosít, illetve teljesen testreszabhatóak saját igényeink szerint.

Telepítés és Konfiguráció


# shadcn/ui CLI telepítése
 
bunx --bun shadcn-ui@latest init
 
# Ezután felajánlásra kerül a konfiguráció alapfelállítása egy pár kérdésben.

Komponens Hozzáadása a Projekthez

A következőképpen tudunk hozzáadni projektünkhöz egy shadcn komponenst:


# Ebben a példában a gomb komponenst adjuk hozzá a projekthez.
bunx --bun shadcn-ui@latest add button

Használt Komponensek

A komponensek megtalálhatóak itt: shadcn/ui components

AlertDialog
Avatar
Badge
Breadcrumb
Button
Card
Checkbox
Combobox
Command
Dialog
Drawer
Dropdown Menu
Hover Card
Input
Label
Pagination
Popover
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Sonner
Textarea
Toast
Tooltip

Téma Konfiguráció

A színeket a globals.css fájlban lehet személyre szabni, illetve ha új színeket szeretnénk vagy akár betűtípusokat, azt a tailwind.config.ts fájlban tehetjük meg.

app/globals.css


@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --emerald: 149 56% 53%;
    --emerald-hover: 149 56% 32%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}