UGC Component Library

A Wise-inspired React component library for the UGC Creator Campaign Management Platform.

Design System

This component library is built on the Wise Design System principles with the following key characteristics:

Colors

| Token | Value | Usage | | --- | --- | --- | | wise-green-bright | #9FE870 | Primary accent, highlights | | wise-green-forest | #163300 | Interactive elements, primary buttons | | wise-bg-neutral | rgba(22, 51, 0, 0.08) | Subtle backgrounds | | content-primary | #0E0F0C | Primary text | | content-secondary | #454745 | Secondary text | | border | rgba(14, 15, 12, 0.12) | Borders, dividers |

Border Radius (Desktop)

| Token | Value | | --- | --- | | wise-sm | 16px | | wise-md | 20px | | wise-lg | 30px | | wise-xl | 40px | | wise-2xl | 60px | | wise-full | 9999px |

Typography

Uses Inter font family with the following scale:

• heading-1: 24px / 700
• heading-2: 20px / 600
• heading-3: 16px / 600
• body: 14px / 400
• body-small: 12px / 400
• caption: 11px / 400

Components

Form Controls

• Button - Primary, Accent, Secondary, Outline, Ghost, Destructive variants
• Input - Text input with label, error, and hint support
• Textarea - Multi-line text input
• Select - Dropdown selection
• Checkbox - Boolean selection
• RadioGroup - Single selection from group
• Switch - Toggle switch
• Chip - Multi-select pill/chip selector

Data Display

• Badge - Status indicator badge
• RatingBadge - Rating tier display (7 levels)
• StatusBadge - Collaboration/creator status
• Avatar - User avatar with fallback
• AvatarGroup - Multiple avatars with overflow
• Card - Content container
• Table - Data table

Navigation

• Tabs - Tab navigation
• DropdownMenu - Dropdown menu

Feedback

• Alert - Inline alert messages
• Progress - Progress bar
• StepIndicator - Multi-step progress
• Spinner - Loading spinner
• EmptyState - Empty state placeholder

Overlay

• Dialog - Modal dialog

Utility

• FileUpload - Drag and drop file upload
• CopyLink - Copy to clipboard input
• Separator - Horizontal/vertical divider

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Usage with Lovable

1. Push this repository to GitHub
2. Connect the repository to Lovable
3. Lovable will recognize and use these components

When prompting Lovable, reference components like:

Use the Button component from @/components/ui with the "accent" variant for the primary action.

File Structure

src/
├── components/
│   └── ui/
│       ├── button.tsx
│       ├── input.tsx
│       ├── chip.tsx
│       ├── badge.tsx
│       ├── rating-badge.tsx
│       ├── status-badge.tsx
│       ├── card.tsx
│       ├── avatar.tsx
│       ├── table.tsx
│       ├── tabs.tsx
│       ├── dialog.tsx
│       ├── alert.tsx
│       ├── progress.tsx
│       ├── file-upload.tsx
│       ├── copy-link.tsx
│       ├── empty-state.tsx
│       ├── separator.tsx
│       ├── dropdown-menu.tsx
│       └── index.ts
├── lib/
│   └── utils.ts
├── styles/
│   └── globals.css
├── App.tsx
└── main.tsx

Dependencies

• React 18
• Tailwind CSS
• Radix UI primitives
• class-variance-authority (CVA)
• Lucide React icons