//
A collapsible vertical panel often used to organize navigation links.
bun add xiod-ui1import {2 Sidebar,3 SidebarContent,4 SidebarFooter,5 SidebarGroup,6 SidebarGroupAction,7 SidebarGroupContent,8 SidebarGroupLabel,9 SidebarHeader,10 SidebarInput,11 SidebarInset,12 SidebarMenu,13 SidebarMenuAction,14 SidebarMenuBadge,15 SidebarMenuButton,16 SidebarMenuItem,17 SidebarMenuSkeleton,18 SidebarMenuSub,19 SidebarMenuSubButton,20 SidebarMenuSubItem,21 SidebarProvider,22 SidebarRail,23 SidebarSeparator,24 SidebarTrigger25} from "xiod-ui/sidebar";1<Sidebar>2 <SidebarInput />3 <SidebarTrigger />4 <SidebarContent>5 <SidebarHeader>6 <SidebarGroupLabel />7 </SidebarHeader>8 <SidebarGroup>9 <SidebarMenuItem />10 <SidebarMenuSubItem />11 </SidebarGroup>12 <SidebarGroupContent />13 <SidebarInset />14 <SidebarMenu />15 <SidebarMenuBadge />16 <SidebarMenuButton />17 <SidebarMenuSkeleton />18 <SidebarMenuSub />19 <SidebarMenuSubButton />20 <SidebarProvider />21 <SidebarRail />22 <SidebarSeparator />23 <SidebarFooter>24 <SidebarGroupAction />25 <SidebarMenuAction />26 </SidebarFooter>27 </SidebarContent>28</Sidebar>| Prop | Type | Default | Description |
|---|---|---|---|
side | "left"| "right"| undefined | left | |
variant | "modal"| "inset"| "sidebar"| "floating"| undefined | sidebar | |
collapsible | "none"| "icon"| "offcanvas"| undefined | offcanvas |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string| number| readonly string[]| undefined | - | The default value of the input. Use when uncontrolled. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, InputState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
value | string| number| readonly string[]| undefined | - | The value of the input. Use when controlled. |
onValueChange | ((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Callback fired when the `value` changes. Use when controlled. |
size | number| "default"| "sm"| "lg"| undefined | default | |
unstyled | boolean| undefined | - | |
nativeInput | boolean| undefined | - | |
className | string| undefined | - | |
style | CSSProperties| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
showOnHover | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
isActive | boolean| undefined | false | |
tooltip | string| (TooltipPopupProps & { align?: Align| undefined; side?: Side| undefined; sideOffset?: number| OffsetFunction| undefined; anchor?: Element| ... 4 more ...| undefined; hideArrow?: boolean| undefined; })| undefined | - | |
size | "default"| "sm"| "lg"| null| undefined | default | |
variant | "default"| "outline"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
showIcon | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
size | "sm"| "md"| undefined | md | |
isActive | boolean| undefined | false |
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean| undefined | true | |
open | boolean| undefined | - | |
onOpenChange | ((open: boolean) => void)| undefined | - |
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | Orientation| undefined | vertical | The orientation of the separator. |
className | string| ((state: SeparatorState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, SeparatorState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: SeparatorState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default"| "link"| "secondary"| "destructive"| "destructive-outline"| "ghost"| "outline"| null| undefined | default | |
size | "default"| "sm"| "lg"| "xs"| "xl"| "icon"| "icon-lg"| "icon-sm"| "icon-xl"| "icon-xs"| null| undefined | default | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |