Usage
Use these for in-page structure. App chrome (side menu, home shortcuts) has dedicated Quan ERP docs under UI Components.
Accordion
Collapsible sections for FAQs and dense settings.
TSXAccordion
1import {
2 Accordion,
3 AccordionItem,
4 AccordionTrigger,
5 AccordionContent,
6} from "@quan-erp/shared-ui";Tabs
Tabbed panels for switching related views.
TSXTabs
1import {
2 Tabs,
3 TabsList,
4 TabsTrigger,
5 TabsContent,
6} from "@quan-erp/shared-ui";
7
8<Tabs defaultValue="general">
9 <TabsList>
10 <TabsTrigger value="general">General</TabsTrigger>
11 <TabsTrigger value="advanced">Advanced</TabsTrigger>
12 </TabsList>
13 <TabsContent value="general">{/* … */}</TabsContent>
14</Tabs>Separator
Horizontal or vertical visual divider.
TSXSeparator
import { Separator } from "@quan-erp/shared-ui";
<Separator />Scroll Area
Custom scrollable region with styled scrollbars.
TSXScroll Area
import { ScrollArea } from "@quan-erp/shared-ui";
<ScrollArea className="h-72 w-full">{/* … */}</ScrollArea>Resizable
Resizable split panels.
TSXResizable
1import {
2 ResizablePanelGroup,
3 ResizablePanel,
4 ResizableHandle,
5} from "@quan-erp/shared-ui";