UI Components

Quick Start

When working with UI components:

1. Use shadcn/ui components from @/components/ui/
2. Follow mobile-first approach
3. Use Tailwind CSS for styling
4. Maintain accessibility (WCAG 2.1 AA)
5. Use design system colors and spacing

Key Files

• src/components/ui/ – shadcn/ui components
• tailwind.config.ts – Tailwind configuration
• src/styles/ – Global styles
• src/components/ – Custom components

Common Patterns

Using shadcn/ui Components

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

function ProductForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Nuevo Producto</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Nombre del producto" />
        <Button className="mt-4">Guardar</Button>
      </CardContent>
    </Card>
  );
}

Mobile-First Responsive

<div className="
  flex flex-col
  md:flex-row md:items-center
  gap-4
  p-4
  md:p-6
">
  <h1 className="text-2xl md:text-3xl lg:text-4xl">
    Título
  </h1>
</div>

Button Styles

// Primary action (yellow)
<Button className="bg-yellow-400 text-2xl rounded-xl">
  Agregar al Carrito
</Button>

// Secondary
<Button variant="outline">
  Cancelar
</Button>

// Destructive
<Button variant="destructive">
  Eliminar
</Button>

Tenant Colors

// Use CSS variables for tenant-specific colors
<div 
  className="bg-[var(--tenant-primary)]"
  style={{
    '--tenant-primary': tenant.primary_color || '#ea5a17',
  }}
>
  Content
</div>

Design System

Colors

• Primary: Blaze Orange (#ea5a17)
• Secondary: Fun Green
• Accent: Bright Sun
• Use Tailwind color palette

Spacing

• Use Tailwind spacing scale (4, 8, 12, 16, 24, 32, etc.)
• Mobile: Smaller padding/margins
• Desktop: Larger spacing

Typography

• Mobile: text-base (16px) default
• Desktop: text-lg (18px) default
• Headings: text-2xl, text-3xl, text-4xl

Accessibility

• Use semantic HTML
• Include ARIA labels when needed
• Ensure keyboard navigation
• Maintain color contrast ratios
• Support screen readers