@dipinraj/shared-ui

Shared UI components for the PWA Micro-Frontend platform. This package provides shadcn/ui components, utilities, and styles that are bundled into the host shell and consumed by remote modules via Module Federation.

Installation

npm install @dipinraj/shared-ui@^1.0.0 --save-dev

Note: Install as a dev dependency. At runtime, components are consumed from the host shell via Module Federation.

Package Status: ✅ Published to npm - View on npm

Usage

Import Components

import { Button, Card, CardContent, CardHeader, CardTitle } from '@dipinraj/shared-ui';

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Title</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Import Utilities

import { cn } from '@dipinraj/shared-ui/utils';

function MyComponent({ className }: { className?: string }) {
  return <div className={cn('base-styles', className)}>Content</div>;
}

Available Components

• Button - Button component with variants (default, destructive, outline, secondary, ghost, link)
• Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter - Card components

More components will be added over time.

Module Federation Configuration

When using this package in a remote module, configure Module Federation to consume shared UI from the host:

// module-federation.config.ts
shared: {
  '@dipinraj/shared-ui': {
    singleton: true,
    eager: false, // Consume from host at runtime
  },
}

Development

This package is bundled into the host shell and exposed via Module Federation. Remote modules consume it at runtime, ensuring:

• ✅ No duplicate UI code in remote bundles
• ✅ Consistent UI across all modules
• ✅ Offline support (shared UI is part of host shell)
• ✅ Single source of truth for UI components

Documentation

See the Developer Guide for complete setup instructions.

License

MIT