Introducing Plate AI, a rich text editor powered by AI commands and Copilot. ◆ Configurable plugins ◆ 200+ shadcn/ui components ◆ AI SDK

Title: Create React Component with Variants Description: Generates a template for a React component with customizable variants using class-variance-authority Rules: - When reading this file, I expect you to generate a new file in the src/components/ui directory - Use explicit prop types with inline TypeScript interfaces - Keep variant names descriptive and semantic (e.g., variant, size, etc.) - Follow the shadcn naming convention: lowercase for variants, PascalCase for components - Always include className prop for composition - Always use cn() utility for merging classNames - CRITICAL: Reuse existing components, Radix UI when relevant. - CRITICAL: We're using React 19 that includes ref in props, so avoid using React.forwardRef Body: ```tsx import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const ${1:component}Variants = cva( "${2:base classes}", { variants: { ${3:variantName}: { ${4:variantValue}: "${5:classes}", }, }, defaultVariants: { ${3}: "${4}", }, } ) export function ${6:ComponentName}({ className, ${3}, ...props }: { className?: string ${3}?: VariantProps["${3}"] } & React.ComponentProps<"${9:element}">) { return ( <${9:element} className={cn(${1}Variants({ ${3} }), className)} {...props} /> ) } ``` ### Example ```tsx import * as React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const tagVariants = cva( 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', { variants: { variant: { default: 'border bg-background text-foreground hover:bg-accent hover:text-accent-foreground', primary: 'bg-primary text-primary-foreground hover:bg-primary/90', success: 'bg-success text-success-foreground hover:bg-success/90', warning: 'bg-warning text-warning-foreground hover:bg-warning/90', danger: 'bg-danger text-danger-foreground hover:bg-danger/90', }, size: { sm: 'h-7 rounded-md px-2', default: 'h-8 rounded-md px-3', lg: 'h-9 rounded-md px-4', }, }, defaultVariants: { variant: 'default', size: 'default', }, } ); export function Tag({ className, variant, size, ...props }: { className?: string; variant?: VariantProps['variant']; size?: VariantProps['size']; } & React.ComponentProps<'div'>) { return (

); } ```

0

0

3