@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

$3

- @launch77-shared/lib-ui - UI component library

$3

tailwind.config.ts

- Adds node_modules/@launch77-shared/lib-ui/dist/*/.js to content array
- Ensures Tailwind processes UI component styles

$3

`
src/
├── app/
│ └── ui-examples/
│ └── page.tsx # Interactive component showcase
└── modules/
└── ui/
├── README.md # Component documentation
└── index.ts # Convenience re-exports
`

Usage

$3

`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 (



Hello World



Submit

)
}
`

$3

- Form Controls: Button, Input, Textarea, Select, Checkbox, Switch
- Layout: Card, Sidebar
- Feedback: Alert, Badge, Dialog
- Display: Avatar
- Form Utilities: FormField, FormError, FormHelperText

$3

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

$3

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

$3

The plugin's generator (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

$3

All components support Tailwind utility classes via className prop:

`tsx
Custom Button
`

$3

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 /
}
`

$3

Create custom variants by wrapping base components:

`tsx
// src/components/PrimaryButton.tsx
import { Button } from '@launch77-shared/lib-ui'

export function PrimaryButton(props) {
return
}
`

Troubleshooting

$3

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
`

$3

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

$3

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

$3

`bash
cd plugins/ui
npm run build
`

$3

`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