prowler/ui/components/shadcn

shadcn Components

This directory contains all shadcn/ui based components for the Prowler application.

Directory Structure

shadcn/
├── card.tsx                    # shadcn Card component
├── resource-stats-card/        # Custom ResourceStatsCard built on shadcn
│   ├── resource-stats-card.tsx
│   ├── resource-stats-card.example.tsx
│   └── index.ts
├── index.ts                    # Barrel exports
└── README.md

Usage

All shadcn components can be imported from @/components/shadcn:

import { Card, CardHeader, CardContent } from "@/components/shadcn";
import { ResourceStatsCard } from "@/components/shadcn";

Adding New shadcn Components

When adding new shadcn components using the CLI:

npx shadcn@latest add [component-name]

The component will be automatically added to this directory due to the configuration in components.json:

{
  "aliases": {
    "ui": "@/components/shadcn"
  }
}

Component Guidelines

1. shadcn base components - Use as-is from shadcn/ui (e.g., card.tsx)
2. Custom components built on shadcn - Create in subdirectories (e.g., resource-stats-card/)
3. CVA variants - Use Class Variance Authority for type-safe variants
4. Theme support - Include dark: classes for dark/light theme compatibility
5. TypeScript - Always export types and use proper typing

Resources

• shadcn/ui Documentation
• CVA Documentation
• Tailwind CSS Documentation