Usage
Prefer Card / Table / Item stacks over hand-rolled panels and list rows so plugins match the host design system.
Card
Surface container with header, content, and footer slots.
TSXCard
1import {
2 Card,
3 CardHeader,
4 CardTitle,
5 CardDescription,
6 CardContent,
7 CardFooter,
8} from "@quan-erp/shared-ui";
9
10<Card>
11 <CardHeader>
12 <CardTitle>Branch</CardTitle>
13 <CardDescription>Primary location</CardDescription>
14 </CardHeader>
15 <CardContent>{/* … */}</CardContent>
16</Card>Table
Semantic HTML table styling primitives.
TSXTable
1import {
2 Table,
3 TableHeader,
4 TableBody,
5 TableRow,
6 TableHead,
7 TableCell,
8 TableCaption,
9} from "@quan-erp/shared-ui";Data Table
Pattern for TanStack Table + Shadcn Table (sorting, filtering, pagination). Build on Table primitives from shared-ui.
TSXData Table
1import {
2 Table,
3 TableHeader,
4 TableBody,
5 TableRow,
6 TableHead,
7 TableCell,
8} from "@quan-erp/shared-ui";Avatar
User / entity avatar with image and fallback.
TSXAvatar
1import {
2 Avatar,
3 AvatarImage,
4 AvatarFallback,
5} from "@quan-erp/shared-ui";
6
7<Avatar>
8 <AvatarImage src="/avatar.png" alt="User" />
9 <AvatarFallback>PD</AvatarFallback>
10</Avatar>Aspect Ratio
Container that locks a width/height ratio for media.
TSXAspect Ratio
import { AspectRatio } from "@quan-erp/shared-ui";
<AspectRatio ratio={16 / 9}>{/* media */}</AspectRatio>Carousel
Embla-based carousel for image or card slides.
TSXCarousel
1import {
2 Carousel,
3 CarouselContent,
4 CarouselItem,
5 CarouselPrevious,
6 CarouselNext,
7} from "@quan-erp/shared-ui";Chart
Recharts wrappers themed for Shadcn.
TSXChart
1import {
2 ChartContainer,
3 ChartTooltip,
4 ChartTooltipContent,
5 ChartLegend,
6} from "@quan-erp/shared-ui";Typography
Documented text styles and prose patterns from Shadcn. Prefer theme tokens and shared text utilities in plugins.
TSXTypography
import { cn } from "@quan-erp/shared-ui";Item
List / menu row primitives — prefer over custom list markup.
TSXItem
1import {
2 Item,
3 ItemGroup,
4 ItemMedia,
5 ItemContent,
6 ItemTitle,
7 ItemDescription,
8 ItemActions,
9} from "@quan-erp/shared-ui";Kbd
Keyboard shortcut display.
TSXKbd
import { Kbd } from "@quan-erp/shared-ui";
<Kbd>⌘</Kbd><Kbd>K</Kbd>