@xocialive/ui-components
@xocialive/ui-components is the shared UI component library for all Xocialive portal applications. It is built on React 19 and Material UI 7, published to the private Azure Artifacts feed, and ships seven named entry points so consuming apps can import only what they need.
What lives where
| Content type | Storybook | This docs site |
|---|---|---|
| Interactive prop sandbox and controls | ✅ Primary | — |
| Component state variants (loading, error, empty…) | ✅ Primary | Link to story |
| Theming / branding showcase across 25+ dimensions | ✅ Primary | Guide + embed |
| Detailed autodocs prop reference | ✅ Primary | Concise summary |
| Unit / snapshot visual regression | ✅ Primary | — |
| Getting started, installation, peer deps | — | ✅ Primary |
| Hooks, contexts, utilities, utilities API | — | ✅ Primary |
| Integration patterns, architecture, auth flows | — | ✅ Primary |
| Multi-step form flows and business logic | — | ✅ Primary |
| Component usage guide + concise API summary | Embed | ✅ Primary |
Live previews inside these docs
Every component page on this site shows an embedded live preview rendered directly from the published Storybook. The iframe runs inside Storybook's own runtime — full MUI theme, RTL support, and React context are all intact. Use the ↗ Open in Storybook link on any preview to switch to the full interactive explorer with controls, variants, and the theme switcher.
Storybook is the component lab. This site is the developer guide and API reference — they are complementary and do not duplicate each other.
Package entry points
| Import path | Contents |
|---|---|
@xocialive/ui-components | All exports (default barrel) |
@xocialive/ui-components/components | UI components only |
@xocialive/ui-components/themes | MUI theme builder and effects |
@xocialive/ui-components/contexts | React providers (Theme, Language, App) |
@xocialive/ui-components/hooks | Custom React hooks |
@xocialive/ui-components/layout | Shell layout components |
@xocialive/ui-components/utils | Utility functions |
@xocialive/ui-components/style.css | Fonts and global styles |
Tech stack
- React 19 + TypeScript 5.9
- Material UI 7 (MUI) + Emotion for CSS-in-JS
- Redux Toolkit for toast state
- React Context for theme and language
- Vite 5 in library mode for the build