UI Components

Shadcn primitives

All basic Shadcn components are re-exported from @quan-erp/shared-ui. Browse the Shadcn section in these docs for imports and usage, and open the official Shadcn site for full API details.

• Form & Input — Button, Input, Select, Checkbox, Switch, Form, …
• Layout & Navigation — Tabs, Accordion, Breadcrumb, Sidebar, …
• Overlays & Dialogs — Dialog, Sheet, Drawer, Dropdown Menu, …
• Feedback & Status — Alert, Badge, Skeleton, Toast / Sonner, …
• Display & Media — Card, Table, Avatar, Item, Chart, …
• Misc — Collapsible, Toggle, Pagination, …

Package

Always import components, hooks, and cn from @quan-erp/shared-ui. Do not install Shadcn or individual UI libraries in your plugin.

• Pages — Page / PageTitle / PageContent shell
• cn — conditional className helper
• Forms — Form + Zod stack
• Responsive Dialog — Dialog / Drawer / Sheet
• Calendar — raw / popover / drawer / automatic
• Loading, Error, Empty — query feedback states
• Hooks — debounce, media query, mobile back, i18n
• Portal Styling — data-plugin on portaled content
• Side menu, Home shortcuts, Setting, Report, Dashboard, Change Log — AppRegistry / base-frontend UI
• Pull to refresh, Floating action button, Menu icons, Workflow nodes — shared-ui / base-frontend components

Import rules

• Do NOT import RequestDto or ResponseDto from @quan-erp/shared-ui — use @quan-erp/shared-frontend-core
• ChangeLog and its hooks come from @quan-erp/base-frontend — not shared-ui

Prefer shared primitives

• <button> → Button / ButtonGroup
• Bare form + register() → Form + FormField + FormControl + FormMessage + Zod
• Hand-rolled panels → Card / CardHeader / CardTitle / CardContent
• Custom loading / empty / error → LoadingState / EmptyState / ErrorState / Alert
• Custom list rows → Item / ItemGroup / ItemMedia / ItemContent / ItemTitle / ItemActions
• Status pills → Badge
• Conditional className strings → cn