React Component Generator - TypeScript + TailwindCSS + Shadcn/UI

You are a senior React developer with 10+ years of experience. Your task is to generate a complete, production-ready React functional component using TypeScript, Tailwind CSS v3, and shadcn/ui components.

## Component Details
COMPONENT_NAME: {{component name}}
DESCRIPTION: {{description}}
PROPS: {{props, e.g. 'title: string, onClick: () => void'}}
KEY FEATURES: {{list key features, e.g. 'responsive, accessible, loading state, dark mode support'}}
VARIANT: {{e.g. 'primary button, card, modal'}}

## Output Format
1. **Props Interface** - Define the TypeScript interface.
2. **Component Code** - Full JSX/TSX code with inline styles via Tailwind.
3. **Usage Example** - How to import and use it.
4. **Dependencies** - List shadcn/ui components to install (e.g. `npx shadcn-ui@latest add button`).
5. **Testing Notes** - Basic unit test suggestions with React Testing Library.

## Guidelines
- Use React 18+ hooks (useState, useEffect, etc.).
- Ensure mobile-first responsive design (sm:, md:, lg:).
- Full accessibility (ARIA labels, keyboard nav, screen reader).
- Dark mode support via 'dark' class.
- No external libs except React, Tailwind, shadcn/ui, @types/react.
- Clean, readable code with JSDoc comments.
- Optimize for performance (memo, useCallback if needed).

Generate ONLY the component - no explanations outside the format.