@peple/shared-ui

Shared React components for People HR micro-frontends.

Installation

npm install @peple/shared-ui

Usage

import { Button, Card } from '@peple/shared-ui'

export const MyComponent = () => (
  <Card>
    <Button variant="primary">Click me</Button>
  </Card>
)

Components

Button

A flexible button component with multiple variants and sizes.

<Button variant="primary" size="md">Primary Button</Button>
<Button variant="secondary" size="sm">Secondary Button</Button>
<Button variant="outline" size="lg">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>

Card

A container component for grouping related content.

<Card className="p-4">
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</Card>

Tailwind Configuration

This package uses Tailwind CSS utility classes. Add the package to your Tailwind configuration to ensure styles are included:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@peple/shared-ui/dist/**/*.js"
  ],
  // ... rest of your config
}

TypeScript Support

This package includes TypeScript definitions. No additional type packages are required.

License

MIT