ui-components

---

description: globs: alwaysApply: true

UI Components

Component Organization

• Basic UI components should be placed in src/components/ui/
• Blog-specific components should be placed in src/components/Blog/
• MDX components should be placed in src/components/MDX/
• Layout components should be placed in src/components/

UI Component Guidelines

• Create small, reusable components
• Use TypeScript interfaces for props
• Follow a consistent naming convention
• Implement proper accessibility attributes
• Use Tailwind CSS for styling
• Follow shadcn/ui patterns when possible

Component Examples

Button Component

// Basic button component example
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

const Button = ({ 
  variant = 'primary', 
  size = 'md', 
  children, 
  onClick, 
  disabled = false,
  className = ''
}: ButtonProps) => {
  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
  
  const variantClasses = {
    primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
    outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
  };
  
  const sizeClasses = {
    sm: 'h-9 px-3 text-sm',
    md: 'h-10 px-4 py-2',
    lg: 'h-11 px-8 text-lg'
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
    >
      {children}
    </button>
  );
};

Card Component

// Basic card component example
interface CardProps {
  title?: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
}

const Card = ({ title, description, children, className = '' }: CardProps) => {
  return (
    <div className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}>
      <div className="p-6">
        {title && <h3 className="text-2xl font-semibold leading-none tracking-tight mb-2">{title}</h3>}
        {description && <p className="text-sm text-muted-foreground mb-4">{description}</p>}
        {children}
      </div>
    </div>
  );
};