Elemento

Una riga flessibile con slot per contenuti multimediali, titolo, descrizione e azione, pensata per i feed di notifiche, gli elenchi delle impostazioni e le righe dei file — in stile neobrutalista.

Basic Item

A simple item with title and description.

Your profile has been verified.

import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"

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

L’item è una riga flex con slot dedicati — media, contenuto, azioni — per quel pattern «elenco di cose» a cui ogni app prima o poi arriva. Non c’è nessuna primitiva headless sotto, solo elementi con lo stile applicato (più l’hook useRender di Base UI per la prop render), rifiniti secondo la ricetta neobrutalista: un bordo di 2px — visibile nella variante outline — e un anello di focus con offset netto.

Quando usarlo:

Feed di notifiche e attività — avatar, messaggio, orario e un pulsante di chiusura o di azione per ogni riga.
Elenchi di impostazioni e integrazioni — icona, nome, riga di stato, con uno switch o un pulsante sul lato finale.
File browser e risultati di ricerca — miniatura o icona più metadati, con l’intera riga resa un link tramite render.

Il componente Item è un semplice contenitore flex in grado di ospitare quasi ogni tipo di contenuto. Usalo per mostrare un titolo, una descrizione e delle azioni. Raggruppalo con il componente ItemGroup per creare un elenco di elementi.

Installazione


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/item.json
npx shadcn@latest add https://neobrutalism.com/r/base/item.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/item.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/item.json

Copia e incolla il seguente codice nel tuo progetto.

components/ui/item.tsx

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"

function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      role="list"
      data-slot="item-group"
      className={cn(
        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
        className
      )}
      {...props}
    />
  )
}

function ItemSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="item-separator"
      orientation="horizontal"
      className={cn("my-2", className)}
      {...props}
    />
  )
}

const itemVariants = cva(
  "group/item flex w-full flex-wrap items-center rounded border-2 text-sm transition-colors duration-100 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary [a]:transition-colors [a]:hover:bg-accent",
  {
    variants: {
      variant: {
        default: "border-transparent",
        outline: "border-border",
        muted: "border-transparent bg-muted/50",
      },
      size: {
        default: "gap-2.5 px-3 py-2.5",
        sm: "gap-2.5 px-3 py-2.5",
        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Item({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"div"> &
  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "div"
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cn(itemVariants({ variant, size, className }))}
      {...props}
    />
  )
}

const itemMediaVariants = cva(
  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        icon: "[&_svg:not([class*='size-'])]:size-4",
        image:
          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function ItemMedia({
  className,
  variant = "default",
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
  return (
    <div
      data-slot="item-media"
      data-variant={variant}
      className={cn(itemMediaVariants({ variant, className }))}
      {...props}
    />
  )
}

function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="item-content"
      className={cn(
        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
        className
      )}
      {...props}
    />
  )
}

function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="item-title"
      className={cn(
        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
        className
      )}
      {...props}
    />
  )
}

function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="item-description"
      className={cn(
        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
        className
      )}
      {...props}
    />
  )
}

function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="item-actions"
      className={cn("flex items-center gap-2", className)}
      {...props}
    />
  )
}

function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="item-header"
      className={cn(
        "flex basis-full items-center justify-between gap-2",
        className
      )}
      {...props}
    />
  )
}

function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="item-footer"
      className={cn(
        "flex basis-full items-center justify-between gap-2",
        className
      )}
      {...props}
    />
  )
}

export {
  Item,
  ItemMedia,
  ItemContent,
  ItemActions,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
  ItemDescription,
  ItemHeader,
  ItemFooter,
}

Aggiorna i percorsi di importazione in base alla configurazione del tuo progetto.

Utilizzo

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

Composizione

Usa la seguente composizione per costruire un Item:

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Item vs Field

Usa Field se devi mostrare un campo di un modulo come una checkbox, un input, un radio o un select.

Se devi mostrare solo contenuti come un titolo, una descrizione e delle azioni, usa Item.

Variant

Usa la prop variant per cambiare lo stile visivo dell’elemento.

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

import { InboxIcon } from "lucide-react"

import {

Size

Usa la prop size per cambiare la dimensione dell’elemento. Le dimensioni disponibili sono default, sm e xs.

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

Extra Small Size

The most compact size available.

import { InboxIcon } from "lucide-react"

import {

Esempi

Icona

Usa ItemMedia con variant="icon" per mostrare un’icona.

Security Alert

New login detected from unknown device.

import { ShieldAlertIcon } from "lucide-react"

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

Avatar

Puoi usare ItemMedia con variant="avatar" per mostrare un avatar.

Evil Rabbit

Last seen 5 months ago

NBNSHE

No Team Members

Invite your team to collaborate on this project.

import { Plus } from "lucide-react"

import {

Immagine

Usa ItemMedia con variant="image" per mostrare un’immagine.

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

import Image from "next/image"

import {

Gruppo

Usa ItemGroup per raggruppare elementi correlati.

Neo Designer

[email protected]

maxleiter

[email protected]

evilrabbit

[email protected]

import * as React from "react"
import { PlusIcon } from "lucide-react"

Intestazione

Usa ItemHeader per aggiungere un’intestazione sopra il contenuto dell’elemento.

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

import Image from "next/image"

import {

Collegamento

Usa la prop render per renderizzare l’elemento come un collegamento. Gli stati hover e focus verranno applicati all’elemento di ancoraggio.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react"

import {

<Item render={<a href="/dashboard" />}>
  <ItemMedia variant="icon">
    <HomeIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Dashboard</ItemTitle>
    <ItemDescription>Overview of your account and activity.</ItemDescription>
  </ItemContent>
</Item>

"use client"

import { ChevronDownIcon } from "lucide-react"

RTL

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

عنصر أساسي

عنصر بسيط يحتوي على عنوان ووصف.

تم التحقق من ملفك الشخصي.

"use client"

import * as React from "react"

Accessibilità

L’item è presentazionale — elementi con lo stile applicato, senza alcun collegamento ARIA proprio, anche se ItemGroup rende role="list" (aggiungi role="listitem" a ogni Item se la struttura a elenco va annunciata). Per le righe interattive non mettere un gestore di clic sul div — rendi un vero <a> o <button> tramite la prop render, così ottiene focus e comportamento da tastiera nativi; l’anello di focus visibile è già stilizzato. Contrassegna con aria-hidden le icone decorative nei media e dai alle immagini un testo alt significativo.

Riferimento API

Item

Il componente principale per mostrare contenuti con media, titolo, descrizione e azioni.

Prop	Type	Default
`variant`	`"default" \| "outline" \| "muted"`	`"default"`
`size`	`"default" \| "sm" \| "xs"`	`"default"`
`render`	`React.ReactElement`

ItemGroup

Un contenitore che raggruppa elementi correlati con uno stile coerente.

<ItemGroup>
  <Item />
  <Item />
</ItemGroup>

ItemSeparator

Un separatore tra gli elementi di un gruppo.

<ItemGroup>
  <Item />
  <ItemSeparator />
  <Item />
</ItemGroup>

ItemMedia

Usa ItemMedia per mostrare contenuti multimediali come icone, immagini o avatar.

Prop	Type	Default
`variant`	`"default" \| "icon" \| "image"`	`"default"`

<ItemMedia variant="icon">
  <Icon />
</ItemMedia>

<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>

ItemContent

Racchiude il titolo e la descrizione dell’elemento.

<ItemContent>
  <ItemTitle>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</ItemContent>

ItemTitle

Mostra il titolo dell’elemento.

<ItemTitle>Item Title</ItemTitle>

ItemDescription

Mostra la descrizione dell’elemento.

<ItemDescription>Item description</ItemDescription>

ItemActions

Contenitore per i pulsanti di azione o altri elementi interattivi.

<ItemActions>
  <Button>Action</Button>
</ItemActions>

ItemHeader

Mostra un’intestazione sopra il contenuto dell’elemento.

<Item>
  <ItemHeader>Header</ItemHeader>
  <ItemContent>...</ItemContent>
</Item>

ItemFooter

Mostra un piè di pagina sotto il contenuto dell’elemento.

<Item>
  <ItemContent>...</ItemContent>
  <ItemFooter>Footer</ItemFooter>
</Item>