Skip to main content

Overview

@xond/ui is the design system and component library that powers every Xond frontend. It bundles our React/Vite build tooling with a production-ready set of Tailwind components, Storybook examples and data-aware widgets.

Key capabilities​

  • Consistent layout primitives – navigation shells, responsive page templates and grid systems for dashboards, admin portals and public-facing apps.
  • Data-driven inputs – reusable form controls (React Hook Form, Zod-ready) aligned with backend DTOs and validation rules.
  • Generated views – tables, cards, detail panels and filters produced automatically from Prisma metadata.
  • Storybook documentation – every component ships with MDX docs, interactive stories and usage guidelines to keep teams aligned.
  • Tailwind configuration – shared tokens, typography and spacing rules that mirror the Nufaza brand.

Folder layout​

  • src/components – base elements, inputs, layouts, data components.
  • src/lib – utilities for JSON formatting, query builders, localization helpers.
  • src/stories – Storybook landing pages and additional guides.
  • .storybook/ – Storybook configuration aligned with our token design decisions.

Component Architecture​

@xond/ui follows a layered architecture:

  1. Base Components – Fundamental building blocks (Button, Alert, Link)
  2. Elements – UI primitives (Badge, Breadcrumb, Icons)
  3. Inputs – Form controls integrated with React Hook Form
  4. Layouts – Structural components (Modal, PageContainer, Tab)
  5. Navigation – Navigation components (BottomNavigation, SideNavigation)
  6. Table – Data display and manipulation (Table, Form, View)
  7. View – Display components (ValueView, EntityCard)
  8. Dashboard – Dashboard widgets (StatCards, FrequentModules)

Data-Driven Components​

The library's power comes from data-driven components:

  • Data Sources – Unified interface for local arrays, remote APIs, and tree data
  • Form Generation – Automatic form generation from model definitions
  • Table Integration – Tables that automatically handle sorting, filtering, pagination
  • Type Safety – Full TypeScript integration with @xond/api generated models

Development Workflows​

  • Run Storybook
    pnpm --filter @xond/ui storybook
  • Build the library
    pnpm --filter @xond/ui build

Documentation Structure​

Storybook vs Documentation​

  • Storybook – Interactive component demos, visual testing, design system reference
  • This Documentation – Architecture, integration patterns, data flow, best practices

Use Storybook for exploring components visually, and this documentation for understanding how to integrate and use them in your applications.