Usage
Use these for inline and transient feedback. For React Query list/detail pages, prefer LoadingState, ErrorState, and EmptyState from the query-states docs.
Alert
Inline message for success, warning, info, or error.
TSXAlert
1import {
2 Alert,
3 AlertTitle,
4 AlertDescription,
5} from "@quan-erp/shared-ui";
6
7<Alert>
8 <AlertTitle>Heads up</AlertTitle>
9 <AlertDescription>Check your branch settings.</AlertDescription>
10</Alert>Badge
Compact status / label chip.
TSXBadge
import { Badge } from "@quan-erp/shared-ui";
<Badge variant="secondary">Draft</Badge>Skeleton
Placeholder shimmer while content loads.
TSXSkeleton
import { Skeleton } from "@quan-erp/shared-ui";
<Skeleton className="h-4 w-[200px]" />Progress
Determinate progress bar.
TSXProgress
import { Progress } from "@quan-erp/shared-ui";
<Progress value={66} />Spinner
Indeterminate loading spinner.
TSXSpinner
import { Spinner } from "@quan-erp/shared-ui";Sonner
Toast notifications via Sonner. Prefer the shared-ui toast helpers configured by the host app.
TSXSonner
1import {
2 toast,
3 Toaster,
4} from "@quan-erp/shared-ui";
5
6toast.success("Saved");Toast
Legacy Shadcn toast API. Prefer Sonner when both exist in shared-ui.
TSXToast
1import {
2 useToast,
3 Toast,
4 ToastAction,
5 Toaster,
6} from "@quan-erp/shared-ui";Empty
Empty-state layout primitives. Quan ERP also exports EmptyState for query empty results.
- Prefer EmptyState from the Loading / Error / Empty docs for list/query empties
TSXEmpty
1import {
2 Empty,
3 EmptyHeader,
4 EmptyTitle,
5 EmptyDescription,
6 EmptyContent,
7} from "@quan-erp/shared-ui";