Cursor rule

1# UI Components and Design System
2 
3## Component Library
4 
5- Use shadcn/ui components from `src/components/ui/`
6- All UI components are built on Radix UI primitives
7- Components follow consistent naming: `Button`, `Card`, `Dialog`, etc.
8- Import components from their individual files, not from index
9 
10## Available UI Components
11 
12- **Button**: `Button` with variants (default, destructive, outline, secondary, ghost, link)
13- **Card**: `Card`, `CardHeader`, `CardContent`, `CardFooter`
14- **Form**: `Input`, `Label`, `Textarea`, `Select`, `Checkbox`
15- **Feedback**: `AlertDialog`, `Dialog`, `Toast` (via sonner)
16- **Layout**: `Separator`, `ScrollArea`, `Tabs`
17- **Data**: `Badge`, `Avatar`, `Skeleton`
18 
19## Styling Guidelines
20 
21- Use Tailwind CSS for all styling
22- Follow mobile-first responsive design
23- Use CSS variables for consistent spacing and colors
24- Maintain consistent component spacing and sizing
25 
26## Button Variants
27 
28```typescript
29// Available button variants
30<Button variant="default">Default</Button>
31<Button variant="destructive">Delete</Button>
32<Button variant="outline">Outline</Button>
33<Button variant="secondary">Secondary</Button>
34<Button variant="ghost">Ghost</Button>
35<Button variant="link">Link</Button>
36 
37// Available sizes
38<Button size="sm">Small</Button>
39<Button size="default">Default</Button>
40<Button size="lg">Large</Button>
41<Button size="icon">Icon Only</Button>
42```
43 
44## Form Components
45 
46- Use `Input` for text inputs with proper labels
47- Use `Select` for dropdown selections
48- Use `Checkbox` for boolean selections
49- Always pair form controls with `Label` components
50- Use `Textarea` for multi-line text input
51 
52## Layout Components
53 
54- Use `Card` for content containers
55- Use `Separator` for visual divisions
56- Use `ScrollArea` for scrollable content
57- Use `Tabs` for tabbed interfaces
58 
59## Responsive Design
60 
61- Design for mobile first (320px+)
62- Use Tailwind responsive prefixes (sm:, md:, lg:, xl:)
63- Ensure touch-friendly button sizes (min 44px)
64- Test on various screen sizes
65 
66## Theme Consistency
67 
68- Use project color scheme (purple ping gradient primary, consistent grays)
69- Maintain consistent spacing scale
70- Use consistent typography hierarchy
71- Follow existing component patterns
72 
73## Custom Components
74 
75- Extend existing UI components when possible
76- Create new components in `src/components/ui/` if needed
77- Follow the same naming and structure patterns
78- Use `cn()` utility for conditional classes
79 
80## Example Usage
81 
82```typescript
83import { Button } from "@/components/ui/button";
84import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
85import { Input } from "@/components/ui/input";
86import { Label } from "@/components/ui/label";
87 
88// Good: Proper component composition
89<Card>
90  <CardHeader>
91    <CardTitle>Product Details</CardTitle>
92  </CardHeader>
93  <CardContent>
94    <div className="space-y-4">
95      <div>
96        <Label htmlFor="name">Product Name</Label>
97        <Input id="name" placeholder="Enter product name" />
98      </div>
99      <Button type="submit">Save Product</Button>
100    </div>
101  </CardContent>
102</Card>;
103```
104 
105description:
106globs:
107alwaysApply: false
108 
109---
110