274 lines
3.6 KiB
Markdown
274 lines
3.6 KiB
Markdown
# UI Components Research
|
|
|
|
## Common Across All (48 components)
|
|
|
|
All three platforms (Lovable, Replit, Base44) share these - likely shadcn/ui base:
|
|
|
|
- accordion
|
|
- alert-dialog
|
|
- alert
|
|
- aspect-ratio
|
|
- avatar
|
|
- badge
|
|
- breadcrumb
|
|
- button
|
|
- calendar
|
|
- card
|
|
- carousel
|
|
- chart
|
|
- checkbox
|
|
- collapsible
|
|
- command
|
|
- context-menu
|
|
- dialog
|
|
- drawer
|
|
- dropdown-menu
|
|
- form
|
|
- hover-card
|
|
- input-otp
|
|
- input
|
|
- label
|
|
- menubar
|
|
- navigation-menu
|
|
- pagination
|
|
- popover
|
|
- progress
|
|
- radio-group
|
|
- resizable
|
|
- scroll-area
|
|
- select
|
|
- separator
|
|
- sheet
|
|
- sidebar
|
|
- skeleton
|
|
- slider
|
|
- sonner
|
|
- switch
|
|
- table
|
|
- tabs
|
|
- textarea
|
|
- toast
|
|
- toaster
|
|
- toggle-group
|
|
- toggle
|
|
- tooltip
|
|
|
|
## Replit-Only (7 unique)
|
|
|
|
- button-group
|
|
- empty
|
|
- field
|
|
- input-group
|
|
- item
|
|
- kbd
|
|
- spinner
|
|
|
|
---
|
|
|
|
## Lovable
|
|
|
|
- accordion
|
|
- alert-dialog
|
|
- alert
|
|
- aspect-ratio
|
|
- avatar
|
|
- badge
|
|
- breadcrumb
|
|
- button
|
|
- calendar
|
|
- card
|
|
- carousel
|
|
- chart
|
|
- checkbox
|
|
- collapsible
|
|
- command
|
|
- context-menu
|
|
- dialog
|
|
- drawer
|
|
- dropdown-menu
|
|
- form
|
|
- hover-card
|
|
- input-otp
|
|
- input
|
|
- label
|
|
- menubar
|
|
- navigation-menu
|
|
- pagination
|
|
- popover
|
|
- progress
|
|
- radio-group
|
|
- resizable
|
|
- scroll-area
|
|
- select
|
|
- separator
|
|
- sheet
|
|
- sidebar
|
|
- skeleton
|
|
- slider
|
|
- sonner (toast notifications)
|
|
- switch
|
|
- table
|
|
- tabs
|
|
- textarea
|
|
- toast
|
|
- toaster
|
|
- toggle-group
|
|
- toggle
|
|
- tooltip
|
|
|
|
## Replit
|
|
|
|
- accordion
|
|
- alert-dialog
|
|
- alert
|
|
- aspect-ratio
|
|
- avatar
|
|
- badge
|
|
- breadcrumb
|
|
- button-group
|
|
- button
|
|
- calendar
|
|
- card
|
|
- carousel
|
|
- chart
|
|
- checkbox
|
|
- collapsible
|
|
- command
|
|
- context-menu
|
|
- dialog
|
|
- drawer
|
|
- dropdown-menu
|
|
- empty
|
|
- field
|
|
- form
|
|
- hover-card
|
|
- input-group
|
|
- input-otp
|
|
- input
|
|
- item
|
|
- kbd (keyboard shortcut display)
|
|
- label
|
|
- menubar
|
|
- navigation-menu
|
|
- pagination
|
|
- popover
|
|
- progress
|
|
- radio-group
|
|
- resizable
|
|
- scroll-area
|
|
- select
|
|
- separator
|
|
- sheet
|
|
- sidebar
|
|
- skeleton
|
|
- slider
|
|
- sonner
|
|
- spinner
|
|
- switch
|
|
- table
|
|
- tabs
|
|
- textarea
|
|
- toast
|
|
- toaster
|
|
- toggle-group
|
|
- toggle
|
|
- tooltip
|
|
|
|
## Base44
|
|
|
|
- accordion
|
|
- alert-dialog
|
|
- alert
|
|
- aspect-ratio
|
|
- avatar
|
|
- badge
|
|
- breadcrumb
|
|
- button
|
|
- calendar
|
|
- card
|
|
- carousel
|
|
- chart
|
|
- checkbox
|
|
- collapsible
|
|
- command
|
|
- context-menu
|
|
- dialog
|
|
- drawer
|
|
- dropdown-menu
|
|
- form
|
|
- hover-card
|
|
- input-otp
|
|
- input
|
|
- label
|
|
- menubar
|
|
- navigation-menu
|
|
- pagination
|
|
- popover
|
|
- progress
|
|
- radio-group
|
|
- resizable
|
|
- scroll-area
|
|
- select
|
|
- separator
|
|
- sheet
|
|
- sidebar
|
|
- skeleton
|
|
- slider
|
|
- sonner
|
|
- switch
|
|
- table
|
|
- tabs
|
|
- textarea
|
|
- toast
|
|
- toaster
|
|
- toggle-group
|
|
- toggle
|
|
- tooltip
|
|
|
|
---
|
|
|
|
## Analysis Summary
|
|
|
|
### Key Patterns from Competitors
|
|
|
|
1. **forwardRef** - All components use `React.forwardRef` for ref access
|
|
2. **CVA** - Class Variance Authority for variant management
|
|
3. **Compound exports** - Multiple sub-components per file
|
|
4. **Radix primitives** - 15+ Radix packages for accessibility
|
|
5. **CSS animations** - `data-[state=open]:animate-in` patterns
|
|
|
|
### Our Differences
|
|
|
|
| Aspect | Competitors | Our Approach | Why |
|
|
|--------|-------------|--------------|-----|
|
|
| Animation | CSS only | Framer Motion | More powerful for marketing sites |
|
|
| Variants | CVA | CSS classes | AI edits CSS directly |
|
|
| Exports | Compound | Single default | Simpler for AI |
|
|
| Backgrounds | None | 13 components | Unique value for marketing |
|
|
|
|
---
|
|
|
|
## Action Items
|
|
|
|
### 1. New Components to Add
|
|
|
|
| Component | Purpose | Approach |
|
|
|-----------|---------|----------|
|
|
|
|
### 2. Dependencies to Install
|
|
|
|
```bash
|
|
pnpm add embla-carousel-react react-day-picker
|
|
```
|
|
|
|
**No Radix dependencies** - Dropdown and Tooltip built from scratch with Framer Motion.
|
|
|
|
---
|
|
|
|
## Research Files
|
|
|
|
Competitor component files stored in:
|
|
- `research/base44/` - 49 JSX files
|
|
- `research/lovable/` - 48 TSX files
|
|
- `research/replit/` - 53 TSX files
|