项

一款适用于通知信息流、设置列表和文件行、带有媒体、标题、描述和操作插槽的弹性行——采用新粗野主义风格。

Basic Item

A simple item with title and description.

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

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

Item 是一条带命名插槽的 flex 行——媒体、内容、操作——用来实现几乎每个应用都会碰到的「事物列表」模式。底下没有无头基元，只是样式化的元素（再加上 Base UI 的 useRender 以支持 render prop），并按新粗野主义配方收尾：2px 边框——在 outline 变体上可见——以及硬偏移焦点环。

适合以下场景：

通知与动态流——每行头像、消息、时间戳，以及关闭或操作按钮。
设置与集成列表——图标、名称、状态行，尾部放开关或按钮。
文件浏览器与搜索结果——缩略图或图标加元数据，整行通过 render 做成链接。

Item 组件是一个简单的 flex 容器，几乎可以容纳任何类型的内容。用它来展示标题、描述和操作。搭配 ItemGroup 组件即可创建项目列表。

安装


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

将以下代码复制并粘贴到您的项目中。

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,
}

更新导入路径以匹配您的项目结构。

用法

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>

组合

使用以下组合来构建 Item：

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

Item vs Field

如果需要展示复选框、输入框、单选按钮或选择框等表单输入，请使用 Field。

如果只需展示标题、描述和操作等内容，请使用 Item。

Variant

使用 variant 属性更改项目的视觉样式。

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

使用 size 属性更改项目的尺寸。可用的尺寸有 default、sm 和 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 {

示例

图标

为 ItemMedia 指定 variant="icon" 以展示图标。

Security Alert

New login detected from unknown device.

import { ShieldAlertIcon } from "lucide-react"

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

头像

可为 ItemMedia 指定 variant="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 {

图片

为 ItemMedia 指定 variant="image" 以展示图片。

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 {

分组

使用 ItemGroup 将相关项目组合在一起。

Neo Designer

[email protected]

maxleiter

[email protected]

evilrabbit

[email protected]

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

页眉

使用 ItemHeader 在项目内容上方添加页眉。

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 {

链接

使用 render 属性将项目渲染为链接。悬停和聚焦状态将应用到锚点元素上。

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

若要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

عنصر أساسي

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

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

"use client"

import * as React from "react"

Item 是表现层组件——样式化的元素，自身没有 ARIA 接线，不过 ItemGroup 会渲染 role="list"（若需要播报列表结构，请给每个 Item 加上 role="listitem"）。可交互的行不要在 div 上挂点击处理——通过 render prop 渲染真正的 <a> 或 <button>，以获得原生焦点与键盘行为；可见焦点环已经配好。装饰性图标媒体标 aria-hidden，图片媒体给有意义的 alt 文本。

API 参考

Item

用于展示带媒体、标题、描述和操作的内容的主组件。

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

ItemGroup

一个以一致的样式将相关项目组合在一起的容器。

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

ItemSeparator

分组内各项目之间的分隔符。

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

ItemMedia

使用 ItemMedia 展示图标、图片或头像等媒体内容。

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

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

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

ItemContent

包裹项目的标题和描述。

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

ItemTitle

展示项目的标题。

<ItemTitle>Item Title</ItemTitle>

ItemDescription

展示项目的描述。

<ItemDescription>Item description</ItemDescription>

ItemActions

用于放置操作按钮或其他交互元素的容器。

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

ItemHeader

在项目内容上方展示页眉。

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

ItemFooter

在项目内容下方展示页脚。

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