placebo.mk/SHADCN_SETUP.md

# Shadcn/ui Setup Complete ✅

## What's Been Added

### 1. Core Dependencies Installed
- `tailwindcss-animate` - Animations for shadcn/ui
- `class-variance-authority` - Variant management
- `clsx` - Conditional class names
- `tailwind-merge` - Tailwind class merging
- `lucide-react` - Icons
- `@radix-ui/react-slot` - Headless UI primitives

### 2. Configuration Files Created
- `components.json` - shadcn/ui configuration
- `tailwind.config.js` - Tailwind CSS config with shadcn theme
- `tsconfig.json` - TypeScript path aliases (`@/`)
- `vite.config.ts` - Vite path resolution

### 3. CSS Setup
- Updated `src/index.css` with shadcn/ui:
  - CSS variables for theming
  - Dark mode support
  - Tailwind directives

### 4. Utilities
- `src/lib/utils.ts` - `cn()` function for merging classes

### 5. UI Components
- `src/components/ui/card.tsx` - Card component with:
  - Card
  - CardHeader
  - CardTitle
  - CardDescription
  - CardContent
  - CardFooter

- `src/components/ui/button.tsx` - Button component with variants:
  - Default, destructive, outline, secondary, ghost, link
  - Sizes: default, sm, lg, icon

### 6. Home Page
- `src/routes/__root.tsx` - Article grid with:
  - Cards displaying articles
  - Loading and error states
  - Responsive grid layout (1/2/3 columns)
  - Empty state for no articles

### 7. Routing
- Simplified to single route (home page)
- All articles displayed on home page as cards

## How to Use

### Adding New UI Components

Use the shadcn/ui CLI to add components:
```bash
npx shadcn@latest add [component-name]
```

For example:
```bash
npx shadcn@latest add badge
npx shadcn@latest add input
npx shadcn@latest add dialog
```

### Using Components

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Content goes here</p>
      </CardContent>
      <Button>Click me</Button>
    </Card>
  )
}
```

### Using Utility Function

```tsx
import { cn } from "@/lib/utils"

export function MyComponent() {
  return (
    <div className={cn(
      "base-class",
      "conditional-class" && someCondition && "active-class"
    )}>
      Content
    </div>
  )
}
```

## Customization

### Theme Colors
Edit `src/index.css` to change color scheme:
```css
--primary: 222.2 47.4% 11.2%;  /* Change primary color */
--background: 0 0% 100%;      /* Change background */
--foreground: 222.2 84% 4.9%;    /* Change text color */
```

### Tailwind Config
Edit `tailwind.config.js` to:
- Add custom colors
- Add custom spacing
- Add custom breakpoints
- Add custom animations

## Next Steps

1. **Add more shadcn/ui components**:
   - Badge for article tags
   - Input for search
   - Dialog for article details
   - Skeleton for loading states

2. **Add article detail page**:
   - Click on article to view full content
   - Add back button
   - Add related articles

3. **Add filters**:
   - Category filter
   - Tag filter
   - Date range filter

4. **Add dark mode toggle**:
   - Add button to toggle dark mode
   - Persist preference in localStorage

## Troubleshooting

### Styles Not Applying
1. Check Tailwind is running (look for CSS in browser DevTools)
2. Restart dev server
3. Check `vite.config.ts` has correct path aliases

### Imports Not Working
1. Verify `tsconfig.json` has `@/` paths configured
2. Verify `vite.config.ts` has path resolution
3. Restart TypeScript server (if using VSCode)

### Component Not Found
1. Check file path: `src/components/ui/[component].tsx`
2. Verify export name: `export const ComponentName = ...`
3. Check import path: `@/components/ui/component`

## File Structure

```
frontend/
├── src/
│   ├── components/
│   │   └── ui/          # shadcn/ui components
│   │       ├── button.tsx
│   │       └── card.tsx
│   ├── lib/
│   │   ├── api.ts        # API functions
│   │   ├── query-client.ts
│   │   └── utils.ts      # cn() utility
│   ├── routes/
│   │   └── __root.tsx   # Home page with articles
│   ├── index.css         # Tailwind + shadcn styles
│   └── ...
├── components.json        # shadcn configuration
└── tailwind.config.js     # Tailwind configuration
```

## Resources

- [shadcn/ui Documentation](https://ui.shadcn.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Radix UI](https://www.radix-ui.com/)
- [Lucide Icons](https://lucide.dev/)