42 lines
1023 B
YAML
42 lines
1023 B
YAML
# <!-- Powered by BMAD™ Core -->
|
|
name: React Component Template
|
|
description: Template for creating TypeScript React components with Tailwind CSS
|
|
version: 1.0.0
|
|
|
|
template: |
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface {ComponentName}Props {
|
|
className?: string
|
|
children?: React.ReactNode
|
|
// Add your props here
|
|
}
|
|
|
|
export function {ComponentName}({
|
|
className,
|
|
children,
|
|
...props
|
|
}: {ComponentName}Props) {
|
|
return (
|
|
<div className={cn("", className)} {...props}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{ComponentName}.displayName = "{ComponentName}"
|
|
|
|
variables:
|
|
- name: ComponentName
|
|
type: string
|
|
description: The name of the React component (PascalCase)
|
|
required: true
|
|
|
|
instructions: |
|
|
1. Replace {ComponentName} with your component name in PascalCase
|
|
2. Add specific props to the interface
|
|
3. Implement component logic and styling
|
|
4. Add proper TypeScript types
|
|
5. Use Tailwind classes for styling
|
|
6. Consider accessibility (a11y) requirements
|