shadcn/ui

Projekt struktúra és best practice

Ajánlott mappaszerkezet, ui vs shared/forms réteg, variáns konvenciók és cn használat.

Projekt struktúra és best practice

Ajánlott mappaszerkezet

src/
  app/
  components/
    ui/         # shadcn generált komponensek
    forms/      # app-specifikus formok
    layout/     # layout elemek
    shared/     # wrapper/összetett UI
  lib/
    utils.ts

Best practice-ek

ui/ legyen „alap réteg” (minél kevesebb üzleti logika).
App-specifikus viselkedéshez használj wrapper komponenseket shared/ alatt.
Legyen konzisztens variáns-konvenció (default/outline/destructive/ghost).
Tailwind classokat mindig cn(...)-nel merge-eld.

Rövid összefoglaló

Rétegezz: ui/ (alap), shared/forms (app).
Következetesség (variánsok + cn) = skálázható UI rendszer.

Gyakorlati példák

Login form, Dialog/Modal, Dropdown menu és Toast értesítések minták shadcn/ui-val.

Gyakori hibák

Tipikus csapdák shadcn/ui használatnál: ui/ túl-módosítás, cn hiánya, duplikáció, use client, import utak.

On this page

Projekt struktúra és best practice Ajánlott mappaszerkezet Best practice-ek Rövid összefoglaló