UI Components
Quick Start
When working with UI components:
-
Use shadcn/ui components from @/components/ui/
-
Follow mobile-first approach
-
Use Tailwind CSS for styling
-
Maintain accessibility (WCAG 2.1 AA)
-
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