Usage
Portaled overlays need plugin CSS isolation — see Portal Styling. Prefer UncontrolledResponsiveDialog when parent re-renders are expensive.
Dialog
Centered modal dialog. Prefer Responsive Dialog for mobile-friendly ERP flows.
TSXDialog
1import {
2 Dialog,
3 DialogTrigger,
4 DialogContent,
5 DialogHeader,
6 DialogTitle,
7 DialogDescription,
8 DialogFooter,
9} from "@quan-erp/shared-ui";Alert Dialog
Confirmation / destructive action dialog that interrupts the flow.
TSXAlert Dialog
1import {
2 AlertDialog,
3 AlertDialogTrigger,
4 AlertDialogContent,
5 AlertDialogHeader,
6 AlertDialogTitle,
7 AlertDialogDescription,
8 AlertDialogAction,
9 AlertDialogCancel,
10} from "@quan-erp/shared-ui";Sheet
Edge slide-over panel. Often used via Responsive Dialog with DesktopDialogType.SHEET.
TSXSheet
1import {
2 Sheet,
3 SheetTrigger,
4 SheetContent,
5 SheetHeader,
6 SheetTitle,
7 SheetDescription,
8} from "@quan-erp/shared-ui";Drawer
Mobile-friendly bottom drawer (Vaul). Responsive Dialog uses this on small screens.
TSXDrawer
1import {
2 Drawer,
3 DrawerTrigger,
4 DrawerContent,
5 DrawerHeader,
6 DrawerTitle,
7 DrawerDescription,
8} from "@quan-erp/shared-ui";Popover
Floating content anchored to a trigger.
TSXPopover
1import {
2 Popover,
3 PopoverTrigger,
4 PopoverContent,
5} from "@quan-erp/shared-ui";Tooltip
Short hover/focus hint. Wrap app roots with TooltipProvider when required by the shared-ui build.
TSXTooltip
1import {
2 Tooltip,
3 TooltipTrigger,
4 TooltipContent,
5 TooltipProvider,
6} from "@quan-erp/shared-ui";
7
8<TooltipProvider>
9 <Tooltip>
10 <TooltipTrigger asChild>
11 <Button variant="ghost" size="icon">?</Button>
12 </TooltipTrigger>
13 <TooltipContent>Help</TooltipContent>
14 </Tooltip>
15</TooltipProvider>Hover Card
Rich preview card on hover.
TSXHover Card
1import {
2 HoverCard,
3 HoverCardTrigger,
4 HoverCardContent,
5} from "@quan-erp/shared-ui";Command
Command palette / searchable list (cmdk). Used by Combobox and spotlight-style UIs.
TSXCommand
1import {
2 Command,
3 CommandInput,
4 CommandList,
5 CommandEmpty,
6 CommandGroup,
7 CommandItem,
8} from "@quan-erp/shared-ui";