App-Rahmen

Die linke Navigation ist selbst die Sidebar-Referenz: 243 px, Suche, quiet/nav-Einträge, Einklappen im Kopf, keine Desktop-Leiste.

Untermenü

shadcn Collapsible, aktiv dunkel, Hover warmgrau

Breadcrumbs

shadcn Breadcrumb

Tabs

shadcn Tabs · Status-Tabs (Listen) und kompakte Akten-Tabs

Integrierter Footer: Seitenwechsel mittig, Zeilen pro Seite rechts (siehe Tabellen/Filter).

24 Einheiten in 3 Gebäuden.

Sidebar

shadcn/ui · sidebar

Live-Beispiel: die Navigation links.

Import

import { Sidebar, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"

Verwendung

243 px inkl. Trennlinie, Fläche #FBF9F9.
Einklappen auf Iconleiste über den Trigger oben links oder Strg/⌘+B.
SidebarMenuButton variant=quiet size=nav: 40 px, Icons 20 px, aktiv dunkler Text + kräftigeres Icon, keine blaue Platte.
Mobil: 56-px-Leiste mit 44-px-Auslöser; Schließen nach Navigation, Fokus zurück an den Auslöser.

Accordion

shadcn/ui · accordion

Auf einem separaten Kautionskonto (Demo-Text).

Import

import { Accordion, AccordionItem } from "@/components/ui/accordion"

Verwendung

Pagination

shadcn/ui · pagination

Import

import { Pagination, PaginationLink } from "@/components/ui/pagination"

Verwendung