Components

All UI components are exported from @xocialive/ui-components/components (or the default barrel @xocialive/ui-components).

Categories

Category	Components	Purpose
Common	Section, GenericCard, StatusToggle, GenericViewSection, GenericEnumChip, UploadButton	General-purpose display primitives
Feedback	AppLoader, ConfigLoader, DataContainer, ErrorBoundary, ToastContainer, Loadable	Loading, error, and notification states
Forms	GenericForm, FormHeader, FormActions, AsyncAutoComplete, AsyncAutoCompleteV2, Attachments, GenericSearch	Form building blocks
Modals	ModalWrapper, ConfirmationModal, StatusActivationModal	Dialog and confirmation patterns
Table / Data View	DataViewContainer, TableView, CardView	List data display with table and card modes
Dashboard	GenericDashboard, DashboardTabs, GenericChart, ReportChart, GroupedChart, KpiCardsGrid, TableChart	Analytics and reporting engine

Import patterns

// Named imports from default barrel
import { GenericCard, DataContainer, AppLoader } from "@xocialive/ui-components";

// Named imports from components sub-entry (smaller bundle when tree-shaking is incomplete)
import { GenericCard, DataContainer } from "@xocialive/ui-components/components";

Documentation model

Each component page below follows this structure:

1. Description — what the component does and when to use it
2. Live preview — an embedded Storybook canvas showing the default story (themed, RTL-aware, no setup required)
3. Import — the exact import path
4. Usage — a minimal code example
5. API summary — key props; use the Storybook autodocs page for the full interactive reference
6. See also — links to related components

The live preview is rendered from the published Storybook. Use ↗ Open in Storybook on any preview to explore all variants, states, and the theme switcher.

📖 Open Storybook

Common prop conventions

All components follow these conventions:

Prop	Type	Purpose
sx	SxProps<Theme>	MUI style overrides for the root element
textOverrides	object	i18n text substitution without prop drilling
onAction	(item) => void	Event callbacks use the on* prefix
show*	boolean	Display toggles, e.g. showHeader, showFooter