dxDigitexa UI
HomeDocsComponentsExamplesAI
Get started
Sections
IntroductionComponentsInstallationThemingCLIFor AI agentsChangelog
Examples
Workspace overviewSettings
Components
AccordionActivity feedAlertAlert dialogAvatarBadgeBreadcrumbButtonCalendarCalendar viewCardCheckboxCollapsibleComboboxCommandContext menuData tableDate pickerDialogDropdown menuEmpty stateFieldHover cardInputInput groupKanbanKbdLabelMeterPaginationPopoverPriorityProgressRadio groupScroll areaSelectSeparatorSheetSidebarSkeletonSliderSpinnerStatus iconSwitchTableTabsTask rowTextareaTimelineToastToggleToggle groupTooltip

Sidebar

App frame: AppShell, Sidebar with groups and items, Topbar.

NNorthwind Studio
Workspace
OverviewProjects6BoardList
Settings
Click to collapse to an icon rail (⌘B in the example app)
Page content

Installation

$ curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add sidebar

Also adds button, tooltip, utils, theme and installs @radix-ui/react-slot, lucide-react.

Usage

import { AppShell, SidebarProvider, useSidebar, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarItem, SidebarTrigger, Topbar } from "@/components/ui/sidebar";

The Code tab above shows a complete example.

SheetSkeleton
On this page
PreviewInstallationUsage