BrutalLab UI
en
EnglishEspañol
PatternAvailable

Item

A structured row with media, content, and contextual actions.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

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

Usage

Import the component into your project and keep the source code under your 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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

  • A surface or content, not a control by default. No artificial hover, pressed or focus state.
  • Internal actions use Button or links. Informational states need text as well as color.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

PropTypeDefaultDescription
variantdefault / outline / muteddefaultSurface treatment.

Accessibility

Rules that should remain intact when adapting the component to a product.

Keep visible text labels and the semantic HTML shown in the example.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.