base UI components

Files in src/components/ui/. Feature cards sit on top of these.

See Custom Feature Components, Theme & Navigation Components, Styling System.

Radix + Tailwind + CVA. forwardRef, cn(), CSS variables.

Component layer architecture#

flowchart TD
  Radix["Radix primitive"] --> Wrap["ui/*.jsx forwardRef"]
  Wrap --> CN["cn default + className"]
  Wrap --> Token["bg-background text-foreground"]

Also in the folder: button, button-group, card, chart, dialog, dropdown-menu, form, input, label, popover, progress, select, separator, sheet, skeleton, sonner, tabs, time-picker*. There is no tooltip, checkbox, radio, switch, slider, badge, or avatar wrapper in this tree.

React.forwardRef on Calendar, Select, Sheet, Tabs. displayName copied from the primitive.

cn() from src/lib/utils.js. Theme via bg-background, border-input, ring-ring.

Calendar component#

Component structure#

flowchart TD
  Cal["Calendar"] --> RDP["DayPicker"]
  RDP --> Nav["ChevronLeft ChevronRight buttonVariants"]
  RDP --> Day["day_selected day_today"]

Selected: bg-primary. Today: bg-accent.

Select component#

Component composition#

flowchart TD
  Root["Select"] --> Trigger["SelectTrigger ChevronDown"]
  Root --> Content["SelectContent Portal"]
  Content --> Item["SelectItem Check indicator"]

Used for semesters and exam events.

Sheet component#

Component architecture#

flowchart TD
  Sheet["Sheet = Dialog"] --> Overlay["SheetOverlay bg-black/80"]
  Sheet --> Content["SheetContent CVA side"]

Sides: top, bottom, left, right (default). Attendance uses bottom sheets.

Tabs component#

Component composition#

flowchart TD
  Tabs --> List["TabsList bg-muted"]
  Tabs --> Trigger["TabsTrigger data-state=active"]
  Tabs --> Content["TabsContent"]

Attendance overview/daily. Grades three tabs. Subjects registered/choices. Profile sections.

src/components/ui/button.jsx exports Button and buttonVariants. Calendar nav and day cells reuse buttonVariants.

Tailwind utilities from @theme inline. Animate plugin: animate-in, fade-in-0, slide-in-from-*. Sheet width sm:max-w-sm.

Present: Dialog, Popover, Dropdown Menu, Input, Label, Form, Card, Separator, Skeleton, Progress, Chart, Sonner, Time picker. Do not document missing shadcn pieces as if they shipped.

flowchart TD
  Att["Attendance"] --> Select
  Att --> Tabs
  Att --> Sheet
  Att --> Cal
  Grades["Grades"] --> Tabs
  Grades --> Select
  Grades --> Dialog
  Exams["Exams"] --> Select
  Login["Login"] --> Form
  Login --> Input
  Stats["Cloudflare"] --> Cal
  Stats --> Card