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:

npx shadcn@latest add [component-name]

For example:

npx shadcn@latest add badge
npx shadcn@latest add input
npx shadcn@latest add dialog

Using Components

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

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:

--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
• Tailwind CSS
• Radix UI
• Lucide Icons