Instruction file imported from VyomRaturi/songs_wrapped_frontend (.cursor/rules/shadcn-ui.mdc). Copyright stays with the author.

description: "Use shadcn/ui components as needed for any UI code" patterns: "*.tsx"

Shadcn UI Components

This project uses @shadcn/ui for UI components. These are beautifully designed, accessible components that you can copy and paste into your apps.

Finding and Using Components

Components are available in the src/components/ui directory, following the aliases configured in components.json

Using Components

Import components from the ui directory using the configured aliases:

import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

Example usage:

<Button variant="outline">Click me</Button>

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Installing Additional Components

Many more components are available but not currently installed. You can view the complete list at https://ui.shadcn.com/r

To install additional components, use the Shadcn CLI:

npx shadcn@latest add [component-name]

For example, to add the Accordion component:

npx shadcn@latest add accordion

Note: npx shadcn-ui@latest is deprecated, use npx shadcn@latest instead

Some commonly used components are

• Accordion
• Alert
• AlertDialog
• AspectRatio
• Avatar
• Calendar
• Checkbox
• Collapsible
• Command
• ContextMenu
• DataTable
• DatePicker
• Dropdown Menu
• Form
• Hover Card
• Menubar
• Navigation Menu
• Popover
• Progress
• Radio Group
• ScrollArea
• Select
• Separator
• Sheet
• Skeleton
• Slider
• Switch
• Table
• Textarea
• Toast
• Toggle
• Tooltip

Use charts from shadcn where ever seems fit. Remember to strictly use shadcn for charts. You can find charts at https://ui.shadcn.com/charts/ .