npm package: @platform-hub/forter-design-system
Description: A modern, accessible React component library with flexible styling options.
Latest version: 0.0.10

# Forter Design System

A modern, accessible React component library with flexible styling options.

## Installation

```bash
npm install @platform-hub/forter-design-system
```

That's it! All dependencies are bundled. Just install and use.

## Usage

### Quick Start

```tsx
// Import the pre-compiled styles ONCE in your app entry
import '@platform-hub/forter-design-system/styles'

// Use components
import { Button, Typography, Icon } from '@platform-hub/forter-design-system'

function App() {
  return (
    <div>
      <Typography variant="h1" color="primary">Hello World</Typography>
      <Button variant="default" size="md">Click me</Button>
      <Icon name="Check" size="md" />
    </div>
  )
}
```

**Required peer dependencies:**
```bash
npm install react react-dom
```

That's it! No Tailwind installation needed. The design system comes with all styles pre-compiled.

---

## Usage Options

### Option 1: Pre-compiled CSS (Default - Recommended) ✨

The simplest way to use the design system. All styles are pre-compiled and ready to use.

```tsx
// Import styles once in your app entry (e.g., main.tsx or App.tsx)
import '@platform-hub/forter-design-system/styles'

// Import and use components
import { Button, Typography, Icon } from '@platform-hub/forter-design-system'
```

**Advantages:**
- ✅ Zero configuration
- ✅ No Tailwind installation required
- ✅ All dependencies bundled
- ✅ Small bundle size (93KB CSS)
- ✅ Works with any React setup

---

### Option 2: Source CSS with Tailwind v4 (Advanced) 🎨

For monorepo internal projects using Tailwind CSS v4 (like `apps/portal-next`):

```css
/* In your global CSS */
@import "@platform-hub/forter-design-system/styles/globals.css";
```

This gives you:
- ✅ Access to design tokens
- ✅ Ability to customize Tailwind configuration
- ✅ Use Tailwind classes alongside components
- ✅ Hot reload during development

**Required setup:**
```bash
npm install tailwindcss@4 @tailwindcss/postcss
```

```javascript
// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}
```

---

## Dark Mode

Add the `dark` class to enable dark theme:

```tsx
<html className="dark">
  <body>{/* Your app */}</body>
</html>
```

---

## Components

- **Button** - Versatile button component with multiple variants
- **Typography** - Text components with semantic variants and colors
- **Icon** - Lucide icon wrapper with consistent sizing
- **Input** - Form input component
- **Select** - Dropdown select
- **Card** - Container component
- **Badge** - Status indicators
- **Alert Dialog** - Modal dialogs
- **Dropdown Menu** - Contextual menus
- **Field** - Form field wrapper
- **Label** - Form labels
- **Textarea** - Multiline text input
- **Separator** - Visual dividers
- **Combobox** - Searchable select

---

## Bundle Size

### Pre-compiled CSS:
- **CSS**: 93KB minified → **~16KB gzipped** 🎉
- **JS**: Tree-shakeable, only import what you use
- **All dependencies bundled**: No peer dependencies except React

---

## Development

For contributors working in the monorepo:

```bash
# Install dependencies
npm install

# Run Storybook
npm run storybook

# Build package
npm run build

# Run tests
npm test

# Lint
npm run lint
```

---

## Publishing

See `PUBLISHING.md` for maintainer instructions.

---

## License

MIT