PatternDisponible

Item

Fila estructurada con contenido multimedia, texto y acciones.

BrutalLab components

Reusable building blocks for your next interface.

View

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/item.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import Link from 'next/link';

import {
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
} from '@/components/ui/item';
import { Button } from '@/components/ui/button';
import { PackageIcon as Package } from "@phosphor-icons/react";

export default function Demo() {
  return (
    <Item variant="outline" className="w-full max-w-lg">
      <ItemMedia variant="icon">
        <Package weight="bold" aria-hidden="true" />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>BrutalLab components</ItemTitle>
        <ItemDescription>
          Reusable building blocks for your next interface.
        </ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button
          variant="outline"
          nativeButton={false}
          render={<Link href="/en/docs/components/card" />}
        >
          View
        </Button>
      </ItemActions>
    </Item>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
variant	default / outline / muted	default	Surface treatment.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.