@launch77-shared/plugin-ui 0.1.0

package/README.md

@@ -0,0 +1,242 @@
+# @launch77-shared/plugin-ui
+
+Launch77 UI library plugin - Setup Radix UI component library with design system integration.
+
+## Overview
+
+This plugin installs and configures the `@launch77-shared/lib-ui` component library in your Launch77 application. It automatically:
+
+- ✅ Installs `@launch77-shared/lib-ui` package
+- ✅ Configures Tailwind to include UI library components
+- ✅ Verifies design system integration
+- ✅ Provides interactive component showcase
+- ✅ Includes comprehensive documentation
+
+## Requirements
+
+- **Design System Plugin**: This plugin requires the `design-system` plugin to be installed first
+- **Tailwind CSS**: Your application must have Tailwind CSS configured
+- **Next.js**: Compatible with Next.js App Router applications
+
+## Installation
+
+From your Launch77 application directory:
+
+```bash
+launch77 plugin:install ui
+```
+
+The plugin will automatically:
+
+1. Check for design-system plugin dependency
+2. Install `@launch77-shared/lib-ui` package
+3. Update `tailwind.config.ts` to include UI library in content paths
+4. Copy example pages and documentation to your app
+
+## What Gets Installed
+
+### Package Dependencies
+
+- `@launch77-shared/lib-ui` - UI component library
+
+### Configuration Changes
+
+**tailwind.config.ts**
+
+- Adds `node_modules/@launch77-shared/lib-ui/dist/**/*.js` to content array
+- Ensures Tailwind processes UI component styles
+
+### Template Files
+
+```
+src/
+├── app/
+│   └── ui-examples/
+│       └── page.tsx              # Interactive component showcase
+└── modules/
+    └── ui/
+        ├── README.md              # Component documentation
+        └── index.ts               # Convenience re-exports
+```
+
+## Usage
+
+### Importing Components
+
+```tsx
+// Direct import from library
+import { Button, Input, Card } from '@launch77-shared/lib-ui'
+
+// Or from module re-exports
+import { Button, Input, Card } from '@/modules/ui'
+
+export default function MyComponent() {
+  return (
+    <Card className="p-6">
+      <h2>Hello World</h2>
+      <Input placeholder="Enter text..." />
+      <Button>Submit</Button>
+    </Card>
+  )
+}
+```
+
+### Available Components
+
+- **Form Controls**: Button, Input, Textarea, Select, Checkbox, Switch
+- **Layout**: Card, Sidebar
+- **Feedback**: Alert, Badge, Dialog
+- **Display**: Avatar
+- **Form Utilities**: FormField, FormError, FormHelperText
+
+### Component Showcase
+
+Visit the interactive showcase to explore all components:
+
+```bash
+npm run dev
+# Navigate to http://localhost:3000/ui-examples
+```
+
+## Documentation
+
+After installation, view detailed component documentation at:
+
+- `src/modules/ui/README.md` - Full API reference and examples
+- `/ui-examples` - Live interactive examples
+
+## Architecture
+
+### How It Works
+
+1. **Plugin Dependencies**: Declares `design-system` as a required plugin
+2. **Package Installation**: Adds `@launch77-shared/lib-ui` to your `package.json`
+3. **Tailwind Integration**: Updates content paths so Tailwind processes component styles
+4. **Template Copy**: Copies example pages and documentation to your app
+
+### Generator Logic
+
+The plugin's generator ([src/generator.ts](./src/generator.ts)) extends `StandardGenerator` and:
+
+1. **`updateDependencies()`** - Merges library dependencies into your package.json
+2. **`installDependencies()`** - Runs `npm install` to fetch packages
+3. **`copyTemplates()`** - Copies example and documentation files
+4. **`injectCode()`** - Updates Tailwind config with UI library content path
+5. **`showNextSteps()`** - Displays usage instructions
+
+## Customization
+
+### Styling Components
+
+All components support Tailwind utility classes via `className` prop:
+
+```tsx
+<Button className="w-full bg-purple-600 hover:bg-purple-700">Custom Button</Button>
+```
+
+### Brand Customization
+
+Customize the design system tokens that affect all UI components:
+
+```css
+/* src/modules/design-system/config/brand.css */
+:root {
+  --primary: 220 90% 56%;
+  --secondary: 240 5% 26%;
+  /* ... more tokens */
+}
+```
+
+### Extending Components
+
+Create custom variants by wrapping base components:
+
+```tsx
+// src/components/PrimaryButton.tsx
+import { Button } from '@launch77-shared/lib-ui'
+
+export function PrimaryButton(props) {
+  return <Button className="bg-gradient-to-r from-blue-600 to-purple-600" {...props} />
+}
+```
+
+## Troubleshooting
+
+### Styles Not Appearing
+
+If component styles aren't applying:
+
+1. **Check Tailwind Config**: Verify `tailwind.config.ts` includes:
+
+   ```ts
+   content: [
+     // ... other paths
+     'node_modules/@launch77-shared/lib-ui/dist/**/*.js',
+   ]
+   ```
+
+2. **Rebuild**: Restart your dev server:
+
+   ```bash
+   npm run dev
+   ```
+
+3. **Design System**: Ensure design-system plugin is installed:
+   ```bash
+   launch77 plugin:install design-system
+   ```
+
+### TypeScript Errors
+
+If you see TypeScript errors importing components:
+
+1. **Install Dependencies**:
+
+   ```bash
+   npm install
+   ```
+
+2. **Check Package**: Verify `@launch77-shared/lib-ui` is in your `package.json`
+
+### Missing Components
+
+If example page shows missing components:
+
+1. **Verify Installation**: Check `node_modules/@launch77-shared/lib-ui` exists
+2. **Reinstall Plugin**:
+   ```bash
+   launch77 plugin:install ui
+   ```
+
+## Development
+
+### Building the Plugin
+
+```bash
+cd plugins/ui
+npm run build
+```
+
+### Testing Locally
+
+```bash
+# In your app directory
+launch77 plugin:install ui
+```
+
+## Related Plugins
+
+- **design-system** (required) - Provides design tokens and Tailwind preset
+- **analytics-web** - Track user interactions with UI components
+
+## License
+
+UNLICENSED - Internal use only
+
+## Support
+
+For issues or questions:
+
+1. Check `src/modules/ui/README.md` for component documentation
+2. Review design system at `/design-system-test`
+3. Open an issue in the Launch77 CLI repository

package/dist/generator.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+
+// src/generator.ts
+import * as path from "path";
+import chalk from "chalk";
+import { StandardGenerator } from "@launch77/plugin-runtime";
+
+// src/utils/config-modifier.ts
+import fs from "fs/promises";
+async function addTailwindContent(filePath, contentPath) {
+  try {
+    const fileExists = await fs.access(filePath).then(() => true).catch(() => false);
+    if (!fileExists) {
+      return {
+        success: false,
+        error: `File not found: ${filePath}`
+      };
+    }
+    const content = await fs.readFile(filePath, "utf-8");
+    if (content.includes(contentPath)) {
+      return {
+        success: true,
+        alreadyExists: true
+      };
+    }
+    const lines = content.split("\n");
+    let contentArrayStartIndex = -1;
+    let contentArrayEndIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (line.includes("content:") && line.includes("[")) {
+        contentArrayStartIndex = i;
+        if (line.includes("]")) {
+          contentArrayEndIndex = i;
+          break;
+        }
+        for (let j = i + 1; j < lines.length; j++) {
+          if (lines[j].includes("]")) {
+            contentArrayEndIndex = j;
+            break;
+          }
+        }
+        break;
+      }
+    }
+    if (contentArrayStartIndex === -1) {
+      return {
+        success: false,
+        error: "Could not find content array in Tailwind config"
+      };
+    }
+    let indentation = "    ";
+    for (let i = contentArrayStartIndex + 1; i < contentArrayEndIndex; i++) {
+      const match = lines[i].match(/^(\s+)['"]/);
+      if (match) {
+        indentation = match[1];
+        break;
+      }
+    }
+    const newLine = `${indentation}'${contentPath}',`;
+    lines.splice(contentArrayEndIndex, 0, newLine);
+    const newContent = lines.join("\n");
+    await fs.writeFile(filePath, newContent, "utf-8");
+    return {
+      success: true
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : String(error)
+    };
+  }
+}
+
+// src/generator.ts
+var UiGenerator = class extends StandardGenerator {
+  constructor(context) {
+    super(context);
+  }
+  async injectCode() {
+    console.log(chalk.cyan("\u{1F527} Setting up UI library...\n"));
+    await this.updateTailwindConfig();
+  }
+  async updateTailwindConfig() {
+    const tailwindConfigPath = path.join(this.context.appPath, "tailwind.config.ts");
+    const result1 = await addTailwindContent(tailwindConfigPath, "node_modules/@launch77-shared/lib-ui/dist/**/*.js");
+    const result2 = await addTailwindContent(tailwindConfigPath, "../../node_modules/@launch77-shared/lib-ui/dist/**/*.js");
+    if (result1.success || result2.success) {
+      if (result1.alreadyExists && result2.alreadyExists) {
+        console.log(chalk.gray("   \u2713 UI library already configured in tailwind.config.ts"));
+      } else {
+        console.log(chalk.green("   \u2713 Added UI library to Tailwind content paths"));
+      }
+    } else {
+      console.log(chalk.yellow(`   \u26A0\uFE0F  Could not auto-configure tailwind.config.ts: ${result1.error}`));
+      console.log(chalk.gray("   You will need to add the content paths manually:"));
+      console.log(chalk.gray("   'node_modules/@launch77-shared/lib-ui/dist/**/*.js'"));
+      console.log(chalk.gray("   '../../node_modules/@launch77-shared/lib-ui/dist/**/*.js'"));
+    }
+  }
+  showNextSteps() {
+    console.log(chalk.bold.green("\n\u2705 Plugin installed successfully!\n"));
+    console.log(chalk.bold("Next Steps:\n"));
+    console.log("1. Explore components:");
+    console.log(chalk.cyan("   Visit http://localhost:3000/ui-examples\n"));
+    console.log("2. Import components in your code:");
+    console.log(chalk.cyan("   import { Button, Input, Card } from '@launch77-shared/lib-ui'\n"));
+    console.log("3. View documentation:");
+    console.log(chalk.cyan("   See src/modules/ui/README.md\n"));
+  }
+};
+async function main() {
+  const args = process.argv.slice(2);
+  const appPath = args.find((arg) => arg.startsWith("--appPath="))?.split("=")[1];
+  const appName = args.find((arg) => arg.startsWith("--appName="))?.split("=")[1];
+  const workspaceName = args.find((arg) => arg.startsWith("--workspaceName="))?.split("=")[1];
+  const pluginPath = args.find((arg) => arg.startsWith("--pluginPath="))?.split("=")[1];
+  if (!appPath || !appName || !workspaceName || !pluginPath) {
+    console.error(chalk.red("Error: Missing required arguments"));
+    console.error("Usage: generate --appPath=<path> --appName=<name> --workspaceName=<workspace> --pluginPath=<path>");
+    process.exit(1);
+  }
+  const generator = new UiGenerator({ appPath, appName, workspaceName, pluginPath });
+  await generator.run();
+}
+if (import.meta.url === `file://${process.argv[1]}`) {
+  main().catch((error) => {
+    console.error(chalk.red("\n\u274C Error during UI library setup:"));
+    console.error(error);
+    process.exit(1);
+  });
+}
+export {
+  UiGenerator
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@launch77-shared/plugin-ui",
+  "version": "0.1.0",
+  "description": "Launch77 UI library plugin - Setup Radix UI component library with design system integration",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "dist/generator.js",
+  "bin": {
+    "generate": "./dist/generator.js"
+  },
+  "files": [
+    "dist/",
+    "templates/",
+    "plugin.json"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/**/*.ts",
+    "release:connect": "launch77-release-connect",
+    "release:verify": "launch77-release-verify"
+  },
+  "dependencies": {
+    "@launch77/plugin-runtime": "^0.3.0",
+    "@launch77-shared/lib-ui": "^0.1.0",
+    "chalk": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "launch77": {
+    "installedPlugins": {
+      "release": {
+        "package": "release",
+        "version": "1.0.1",
+        "installedAt": "2026-01-26T00:47:19.303Z",
+        "source": "local"
+      }
+    }
+  }
+}

package/plugin.json

@@ -0,0 +1,9 @@
+{
+  "targets": ["app"],
+  "pluginDependencies": {
+    "design-system": "^2.1.0"
+  },
+  "libraryDependencies": {
+    "@launch77-shared/lib-ui": "^0.1.0"
+  }
+}

package/templates/src/app/ui-examples/page.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import { useState } from 'react'
+import { Alert, Avatar, Badge, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, FormField, FormHelperText, FormError, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea } from '@launch77-shared/lib-ui'
+
+export default function UiExamplesPage() {
+  const [checked, setChecked] = useState(false)
+  const [termsAccepted, setTermsAccepted] = useState(false)
+  const [termsError, setTermsError] = useState(false)
+  const [switchEnabled, setSwitchEnabled] = useState(false)
+  const [selectedValue, setSelectedValue] = useState('')
+  const [textareaValue, setTextareaValue] = useState('')
+  const [textareaError, setTextareaError] = useState(false)
+
+  return (
+    <div className="container mx-auto max-w-6xl py-12 px-4">
+      <div className="mb-12">
+        <h1 className="text-4xl font-bold mb-4">UI Component Library</h1>
+        <p className="text-muted-foreground text-lg">Explore the Launch77 UI component library built with Radix UI primitives</p>
+      </div>
+
+      <div className="space-y-12">
+        {/* Buttons */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Buttons</h2>
+          <div className="flex flex-wrap gap-4">
+            <Button>Default Button</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="destructive">Destructive</Button>
+            <Button size="sm">Small</Button>
+            <Button size="lg">Large</Button>
+            <Button disabled>Disabled</Button>
+          </div>
+        </section>
+
+        {/* Inputs */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Form Controls</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
+            <FormField label="Email Address" helperText="We'll never share your email" htmlFor="input-1">
+              <Input id="input-1" type="email" placeholder="Enter your email..." />
+            </FormField>
+
+            <FormField label="Password" error="Password must be at least 8 characters" required htmlFor="input-2">
+              <Input id="input-2" type="password" placeholder="Enter password..." />
+            </FormField>
+
+            <FormField label="Message" helperText="Enter a brief message (max 200 characters)" htmlFor="textarea">
+              <Textarea
+                id="textarea"
+                placeholder="Enter your message..."
+                rows={4}
+                value={textareaValue}
+                onChange={(e) => {
+                  setTextareaValue(e.target.value)
+                  setTextareaError(e.target.value.length > 200)
+                }}
+                error={textareaError}
+              />
+            </FormField>
+
+            <FormField label="Country" htmlFor="select" required>
+              <Select value={selectedValue} onValueChange={setSelectedValue}>
+                <SelectTrigger id="select">
+                  <SelectValue placeholder="Choose a country" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="us">United States</SelectItem>
+                  <SelectItem value="ca">Canada</SelectItem>
+                  <SelectItem value="uk">United Kingdom</SelectItem>
+                </SelectContent>
+              </Select>
+            </FormField>
+          </div>
+        </section>
+
+        {/* Checkbox & Switch */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Toggle Controls</h2>
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <Checkbox id="checkbox-example" checked={checked} onCheckedChange={(value) => setChecked(value as boolean)} />
+              <label htmlFor="checkbox-example" className="cursor-pointer">
+                Checkbox example
+              </label>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  id="terms-checkbox"
+                  checked={termsAccepted}
+                  onCheckedChange={(value) => {
+                    setTermsAccepted(value as boolean)
+                    setTermsError(false)
+                  }}
+                  error={termsError}
+                />
+                <label htmlFor="terms-checkbox" className="cursor-pointer">
+                  I accept the terms and conditions (required)
+                </label>
+              </div>
+              {termsError && <FormError>You must accept the terms to continue</FormError>}
+              <Button
+                size="sm"
+                onClick={() => {
+                  if (!termsAccepted) {
+                    setTermsError(true)
+                  }
+                }}
+              >
+                Test Validation
+              </Button>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <Switch id="switch-example" checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
+              <label htmlFor="switch-example" className="cursor-pointer">
+                Enable notifications
+              </label>
+            </div>
+          </div>
+        </section>
+
+        {/* Cards */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Cards</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Simple Card</CardTitle>
+                <CardDescription>A basic card with header and content</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">This is the main content area of the card.</p>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Card with Action</CardTitle>
+                <CardDescription>Cards can have footers with actions</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">Use CardFooter for action buttons.</p>
+              </CardContent>
+              <CardFooter>
+                <Button size="sm">View Details</Button>
+              </CardFooter>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Interactive Card</CardTitle>
+                <CardDescription>Multiple actions in footer</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">Cards support multiple action buttons.</p>
+              </CardContent>
+              <CardFooter className="flex gap-2">
+                <Button size="sm" variant="outline">
+                  Cancel
+                </Button>
+                <Button size="sm">Confirm</Button>
+              </CardFooter>
+            </Card>
+          </div>
+        </section>
+
+        {/* Alerts */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Alerts</h2>
+          <div className="space-y-4 max-w-2xl">
+            <Alert title="Information">This is a default alert with some information.</Alert>
+
+            <Alert variant="success" title="Success!">
+              Your changes have been saved successfully.
+            </Alert>
+
+            <Alert variant="warning" title="Warning">
+              Please review your information before proceeding.
+            </Alert>
+
+            <Alert variant="error" title="Error">
+              Something went wrong. Please try again.
+            </Alert>
+          </div>
+        </section>
+
+        {/* Badges */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Badges</h2>
+          <div className="flex flex-wrap gap-4">
+            <Badge>Default</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="warning">Warning</Badge>
+            <Badge variant="error">Error</Badge>
+            <Badge variant="outline">Outline</Badge>
+          </div>
+        </section>
+
+        {/* Avatar */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Avatars</h2>
+          <div className="flex flex-wrap gap-4 items-center">
+            <Avatar src="https://i.pravatar.cc/150?img=1" alt="User 1" />
+            <Avatar src="https://i.pravatar.cc/150?img=2" alt="User 2" size="lg" />
+            <Avatar fallback="JD" />
+            <Avatar fallback="AB" size="sm" />
+          </div>
+        </section>
+
+        {/* Dialog */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Dialog</h2>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button>Open Dialog</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Dialog Example</DialogTitle>
+                <DialogDescription>This is a modal dialog built with Radix UI Dialog primitive.</DialogDescription>
+              </DialogHeader>
+              <div className="py-4">
+                <p className="text-sm text-muted-foreground">Dialogs are great for getting user attention and requiring action before continuing.</p>
+              </div>
+              <DialogFooter>
+                <Button variant="outline">Cancel</Button>
+                <Button>Confirm</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </section>
+      </div>
+    </div>
+  )
+}

package/templates/src/modules/ui/README.md

@@ -0,0 +1,229 @@
+# UI Component Library
+
+This module provides access to the Launch77 UI component library built with Radix UI primitives and integrated with the design system.
+
+## Available Components
+
+### Form Controls
+
+- **Button** - Primary action buttons with multiple variants
+- **Input** - Text input fields
+- **Textarea** - Multi-line text input
+- **Select** - Dropdown selection
+- **Checkbox** - Toggle checkboxes
+- **Switch** - Toggle switches
+- **FormField** - Form field wrapper
+- **FormHelperText** - Helper text for form fields
+- **FormError** - Error messages for form fields
+
+### Layout & Display
+
+- **Card** - Container component for content sections
+- **Alert** - Alert messages with variants (success, warning, error)
+- **Badge** - Small status indicators
+- **Avatar** - User avatar images with fallbacks
+- **Dialog** - Modal dialogs
+- **Sidebar** - Navigation sidebar layout
+
+## Usage Examples
+
+### Basic Button
+
+```tsx
+import { Button } from '@launch77-shared/lib-ui'
+
+export default function MyComponent() {
+  return <Button onClick={() => console.log('clicked')}>Click me</Button>
+}
+```
+
+### Button Variants
+
+```tsx
+<Button variant="default">Default</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="destructive">Destructive</Button>
+```
+
+### Form Field with Validation
+
+```tsx
+import { Input, FormField } from '@launch77-shared/lib-ui'
+
+export default function MyForm() {
+  const [email, setEmail] = useState('')
+  const [error, setError] = useState('')
+
+  return (
+    <FormField label="Email Address" error={error} helperText="We'll never share your email" required htmlFor="email">
+      <Input id="email" type="email" placeholder="Enter your email" value={email} onChange={(e) => setEmail(e.target.value)} />
+    </FormField>
+  )
+}
+```
+
+### Select Dropdown
+
+```tsx
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@launch77-shared/lib-ui'
+
+export default function MySelect() {
+  const [value, setValue] = useState('')
+
+  return (
+    <Select value={value} onValueChange={setValue}>
+      <SelectTrigger>
+        <SelectValue placeholder="Choose an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+        <SelectItem value="option3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
+```
+
+### Dialog Modal
+
+```tsx
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Button } from '@launch77-shared/lib-ui'
+
+export default function MyDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Confirm Action</DialogTitle>
+          <DialogDescription>Are you sure you want to continue?</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+```
+
+### Card Layout
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '@launch77-shared/lib-ui'
+
+export default function MyCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Optional description text</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card content goes here.</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Action</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+```
+
+### Alerts
+
+```tsx
+import { Alert } from '@launch77-shared/lib-ui'
+
+export default function MyAlerts() {
+  return (
+    <>
+      <Alert variant="success" title="Success!">
+        Operation completed successfully.
+      </Alert>
+
+      <Alert variant="error" title="Error">
+        Something went wrong.
+      </Alert>
+    </>
+  )
+}
+```
+
+### Checkbox & Switch
+
+```tsx
+import { Checkbox, Switch, FormError } from '@launch77-shared/lib-ui'
+
+export default function MyToggles() {
+  const [checked, setChecked] = useState(false)
+  const [termsAccepted, setTermsAccepted] = useState(false)
+  const [termsError, setTermsError] = useState(false)
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <Checkbox id="terms" checked={checked} onCheckedChange={(value) => setChecked(value as boolean)} />
+        <label htmlFor="terms">Accept terms</label>
+      </div>
+
+      {/* Checkbox with error state */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="terms-required"
+            checked={termsAccepted}
+            onCheckedChange={(value) => {
+              setTermsAccepted(value as boolean)
+              setTermsError(false)
+            }}
+            error={termsError}
+          />
+          <label htmlFor="terms-required">I accept the terms (required)</label>
+        </div>
+        {termsError && <FormError>You must accept the terms</FormError>}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch id="notifications" checked={enabled} onCheckedChange={setEnabled} />
+        <label htmlFor="notifications">Enable notifications</label>
+      </div>
+    </>
+  )
+}
+```
+
+## Styling
+
+All components are styled using Tailwind CSS and the Launch77 design system tokens. You can customize component appearance using:
+
+- **Tailwind classes** - Apply utility classes via `className` prop
+- **Design tokens** - Use CSS variables from the design system
+- **Brand customization** - Edit `src/modules/design-system/config/brand.css`
+
+## Live Examples
+
+Visit [http://localhost:3000/ui-examples](http://localhost:3000/ui-examples) to see all components in action.
+
+## Documentation
+
+For detailed component API documentation and advanced usage, refer to the Radix UI documentation:
+
+- [Radix UI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction)
+
+## Utility Functions
+
+The library also exports the `cn` utility function for merging Tailwind classes:
+
+```tsx
+import { cn } from '@launch77-shared/lib-ui'
+
+const className = cn('base-class', condition && 'conditional-class', 'another-class')
+```

package/templates/src/modules/ui/index.ts

@@ -0,0 +1,14 @@
+/**
+ * UI Component Library
+ *
+ * Re-exports all components from @launch77-shared/lib-ui
+ * for convenient importing throughout the application.
+ *
+ * Usage:
+ *   import { Button, Input, Card } from '@/modules/ui'
+ *
+ * Or import directly from the library:
+ *   import { Button, Input, Card } from '@launch77-shared/lib-ui'
+ */
+
+export * from '@launch77-shared/lib-ui'