Documentación

Componentes

Catálogo de los componentes usados en la plataforma Deiman. Todos provienen de shadcn/ui y están personalizados con los tokens del tema tweakcn.

Button

@/components/ui/button
shadcn/ui docs

Botón con variantes (default, secondary, outline, ghost, destructive) y tamaños (sm, default, lg, icon).

Preview

import { Button } from "@/components/ui/button"

<Button>Primario</Button>
<Button variant="secondary">Secundario</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructivo</Button>

Badge

@/components/ui/badge
shadcn/ui docs

Etiqueta visual para estados, categorías y metadata. Variantes: default, secondary, outline, destructive.

Preview

Default
Secondary
Outline
Destructive
import { Badge } from "@/components/ui/badge"

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>

Input + Label

@/components/ui/input
shadcn/ui docs

Campo de texto con etiqueta asociada para formularios accesibles.

Preview

<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="hola@deiman.com.mx" />

Card

@/components/ui/card
shadcn/ui docs

Contenedor con header, contenido y descripción. Base para listados de productos, recetas y métricas.

Preview

Vainilla líquida
1 L — Línea Palapa
Esencia natural para repostería.
<Card>
  <CardHeader>
    <CardTitle>Vainilla líquida</CardTitle>
    <CardDescription>1 L — Línea Palapa</CardDescription>
  </CardHeader>
  <CardContent>Esencia natural para repostería.</CardContent>
</Card>

Switch + Checkbox

@/components/ui/switch
shadcn/ui docs

Controles booleanos para preferencias, filtros y configuraciones.

Preview

<Switch />
<Checkbox />

Alert

@/components/ui/alert
shadcn/ui docs

Mensajes contextuales para informar, advertir o confirmar acciones.

Preview

<Alert>
  <Info className="h-4 w-4" />
  <AlertTitle>Nuevo lote disponible</AlertTitle>
  <AlertDescription>Colorantes Deiman edición limitada.</AlertDescription>
</Alert>

Tabs

@/components/ui/tabs
shadcn/ui docs

Navegación por pestañas. Usada en filtros de catálogo y vistas alternas.

Preview

Colorantes y esencias para postres.
<Tabs defaultValue="repo">
  <TabsList>
    <TabsTrigger value="repo">Repostería</TabsTrigger>
    <TabsTrigger value="pan">Panadería</TabsTrigger>
  </TabsList>
  <TabsContent value="repo">...</TabsContent>
</Tabs>