Primitivas de UI

Componentes primitivos de UI incluyendo Button, Input, Dialog, Card, Badge, Alert, Select, Tooltip, Tabs y mas, construidos sobre Radix UI.

Última actualización: 2025-02-18

Primitivas de UI

Las 42 primitivas de UI de Certexi estan construidas sobre Radix UI para accesibilidad y Tailwind CSS para estilos. Cada componente esta completamente tipado, es navegable por teclado y cumple con WCAG 2.1 AA.

Button

El elemento interactivo principal con multiples variantes y tamanos:

Variantes de Button

<div className="flex gap-2 flex-wrap">
  <Button>Default</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>
  <Button size="sm">Small</Button>
  <Button size="lg">Large</Button>
  <Button disabled>Disabled</Button>
</div>

Props

Prop	Tipo	Predeterminado	Descripcion
`variant`	`default \| secondary \| destructive \| outline \| ghost \| link`	`default`	Estilo visual
`size`	`default \| sm \| lg \| icon`	`default`	Variante de tamano
`disabled`	`boolean`	`false`	Deshabilitar interaccion
`asChild`	`boolean`	`false`	Fusionar con elemento hijo

Input

Input de texto con estados de validacion integrados:

Input

<div className="flex flex-col gap-2 max-w-sm">
  <Input placeholder="Default input" />
  <Input type="email" placeholder="Email address" />
  <Input type="password" placeholder="Password" />
  <Input disabled placeholder="Disabled" />
</div>

Dialog

Dialogo modal construido sobre la primitiva Dialog de Radix:

Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir Dialogo</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirmar Accion</DialogTitle>
      <DialogDescription>
        Esta accion no se puede deshacer.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancelar</Button>
      <Button>Confirmar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Card

Componente contenedor para agrupar contenido relacionado:

Card

<Card className="max-w-sm">
  <CardHeader>
    <CardTitle>Unidad de Transporte</CardTitle>
    <CardDescription>TU-2024-00042</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Etapa: Pesaje</p>
    <p>Peso: 24,500 kg</p>
  </CardContent>
</Card>

Badge

Indicadores de estado en linea:

Variantes de Badge

<div className="flex gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Error</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Alert

Mensajes de retroalimentacion contextual:

Variantes de Alert

<div className="flex flex-col gap-4">
  <Alert>
    <AlertTitle>Aviso</AlertTitle>
    <AlertDescription>
      La unidad de transporte TU-2024-00042 ha sido marcada para inspeccion.
    </AlertDescription>
  </Alert>
  <Alert variant="destructive">
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
      La variacion de peso excede el umbral de tolerancia.
    </AlertDescription>
  </Alert>
</div>

Select

Seleccion desplegable con busqueda y agrupacion:

Select

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Seleccionar zona" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Zonas</SelectLabel>
      <SelectItem value="a">Zona A - Almacenamiento</SelectItem>
      <SelectItem value="b">Zona B - Estadia</SelectItem>
      <SelectItem value="c">Zona C - Almacenamiento en Frio</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Primitivas Adicionales

Componente	Descripcion
Tooltip	Popover informativo al hover/focus
Dropdown Menu	Menu de acciones con navegacion por teclado
Context Menu	Menu de clic derecho
Tabs	Navegacion por pestanas de contenido
Accordion	Secciones de contenido colapsables
Avatar	Imagen de perfil de usuario con fallback
Separator	Divisor visual de contenido
Progress	Indicador de barra de progreso
Skeleton	Placeholder de carga
Switch	Control toggle booleano
Checkbox	Opcion de seleccion multiple
Radio Group	Grupo de opciones de seleccion unica
Slider	Selector de valor de rango
Textarea	Input de texto multi-linea
Toast	Notificacion temporal
Sheet	Panel deslizable
Popover	Panel de contenido flotante
Command	Paleta de comandos / busqueda
Calendar	Calendario selector de fecha
Scroll Area	Contenedor con scrollbar personalizado
Table	Tabla de datos con ordenamiento

Primitivas de UI

Button

Props

Input

Dialog

Card

Badge

Alert

Select

Primitivas Adicionales

Relacionado