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
typescript
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
typescript
<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
typescript
// 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
typescript
// 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