How Quan ERP uses Shadcn
Quan ERP’s design system is built on Shadcn. The source of truth for plugin UIs is @quan-erp/shared-ui, which re-exports the standard primitives with platform theming and ERP helpers.
- Always import from @quan-erp/shared-ui
- Do not run shadcn CLI or add components.json inside a plugin
- Do not install radix / shadcn packages directly in the plugin
- For API details and variants, use the official Shadcn docs linked on each page
Catalog in these docs
Sibling pages under UI Components cover every basic primitive. Each includes a shared-ui import and a link to the matching Shadcn docs page.
- Shadcn Form & Input — Button, Input, Select, Checkbox, Switch, Label, Form, …
- Shadcn Layout & Navigation — Accordion, Tabs, Breadcrumb, Sidebar, Separator, …
- Shadcn Overlays & Dialogs — Dialog, Sheet, Drawer, Popover, Dropdown Menu, …
- Shadcn Feedback & Status — Alert, Badge, Skeleton, Progress, Toast / Sonner, …
- Shadcn Display & Media — Card, Table, Avatar, Item, Chart, Carousel, …
- Shadcn Misc — Collapsible, Toggle, Pagination, Direction, …
ERP-specific docs
Some primitives have Quan ERP wrappers or patterns documented separately.
- Forms — full Form + Zod stack (prefer over bare Field / register)
- Responsive Dialog — Dialog / Drawer / Sheet adaptive pattern
- Calendar — raw / popover / drawer / automatic variants
- cn — className helper for Tailwind composition
Import pattern
TSXimport
import { Button, Card, CardContent, Input } from "@quan-erp/shared-ui";
// Prefer shared-ui — do not copy from ui.shadcn.com into the plugin