UI Components Package

Shared UI components in the @jubiloop/ui package, built with shadcn/ui.

Overview

The UI package centralizes common components used across both the web app and marketing site to ensure consistency.

Package Structure

packages/ui/
├── src/
│   ├── components/
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── checkbox.tsx
│   │   ├── form.tsx
│   │   ├── input.tsx
│   │   ├── label.tsx
│   │   ├── logo.tsx
│   │   ├── sonner.tsx     # Toast notifications
│   │   └── textarea.tsx
│   ├── lib/
│   │   └── utils.ts       # Utility functions
│   └── globals.css        # Global styles
├── components.json        # shadcn/ui config
└── package.json

Available Components

Currently implemented components:

• Button - Interactive button component with variants
• Card - Container component for content
• Checkbox - Checkbox input component
• Form - Form wrapper with react-hook-form integration
• Input - Text input field
• Label - Form field labels
• Logo - Jubiloop logo component
• Sonner - Toast notification system
• Textarea - Multi-line text input

Using Components

Components are imported from the UI package in both apps:

import { Button } from '@jubiloop/ui/button'
import { Card } from '@jubiloop/ui/card'
import { Input } from '@jubiloop/ui/input'
import { Label } from '@jubiloop/ui/label'

Adding New Components

To add new shadcn/ui components:

# From an app directory (webapp or marketing)
cd apps/webapp
npx shadcn@canary add [COMPONENT]

The component will be automatically added to the packages/ui directory.

Styling

Components use Tailwind CSS with CSS variables for theming. The theme is configured in globals.css and supports light/dark modes.

Best Practices

1. Keep components generic and reusable
2. Avoid app-specific logic in shared components
3. Use TypeScript for all component props
4. Follow shadcn/ui patterns for consistency