@soulbuilder/ui

Shared UI component library for Soul Builder — built on Ant Design 5 + styled-components with a complete theme system, dark mode support, and 15+ production-ready components.

Install

yarn add @soulbuilder/ui
# or
npm install @soulbuilder/ui

Peer Dependencies

yarn add react react-dom antd styled-components react-router-dom lucide-react

Quick Start

import { SoulBuilderProvider, PageHeader, StatCard, StatusTag } from '@soulbuilder/ui';

function App() {
  return (
    <SoulBuilderProvider mode="light">
      <PageHeader title="Dashboard" subtitle="Overview" />
      <StatCard label="Orders" value={128} icon={<ShoppingCart />} color="#1525E1" />
      <StatusTag status="active" colorMap={{ active: 'green' }} labelMap={{ active: 'Active' }} />
    </SoulBuilderProvider>
  );
}

Components

| Component | Description | |-----------|-------------| | SoulBuilderProvider | Theme provider (Ant Design + styled-components) with light/dark mode | | PageHeader | Page title with breadcrumb and optional actions | | StatCard | Stat display card with icon, label, value (v1/v2/v3 variants) | | StatusTag | Colored status tag with customizable color/label maps | | FilterBar | Search + filter bar for list pages | | SectionCard | Content section card with title and optional extra | | ChartCard | Card wrapper for chart components | | ProgressCard | Progress visualization card | | DeleteModal | Confirmation modal for delete actions | | EmptyState | Empty state placeholder | | AppBreadcrumb | Navigation breadcrumb | | AuthBrandPanel | Branded panel for login/auth pages | | PlanBadge | Plan/tier badge display | | StatusBadge | Status badge component | | Spinner | Loading spinner | | AppButton | Semantic buttons (Success, Warning, Danger, Info) |

Theme System

import { themecolor, darkthemecolors, customStyle } from '@soulbuilder/ui';

// Light theme tokens
console.log(themecolor.token.colorPrimary);

// Dark theme tokens
console.log(darkthemecolors.token.colorPrimary);

// Custom style overrides
console.log(customStyle.token.borderRadius);

Theme Provider with Custom Colors

<SoulBuilderProvider
  mode="dark"
  theme={{
    colorPrimary: '#1525E1',
    colorSuccess: '#07B15B',
    borderRadius: 8,
  }}
>
  {children}
</SoulBuilderProvider>

Storybook

Live documentation: https://sm-builder-storybook.soulmesh.io

License

MIT