Item

A versatile component for displaying content with media, title, description, and actions.

New comment
Someone replied to your post.

New message
You have a new direct message.

1
import { Button } from "@/components/ui/pxl/button";
2
import {
3
  Item,
4
  ItemActions,
5
  ItemContent,
6
  ItemDescription,
7
  ItemGroup,
8
  ItemMedia,
9
  ItemSeparator,
10
  ItemTitle,
11
} from "@/components/ui/pxl/item";
12

13
export default function ItemDemo() {
14
  return (
15
    <ItemGroup className="w-full max-w-md">
16
      <Item variant="outline">
17
        <ItemMedia variant="icon">
18
          <svg
19
            xmlns="http://www.w3.org/2000/svg"
20
            fill="currentColor"
21
            viewBox="0 0 24 24"
22
          >
23
            <path d="M9 2h6v2H9zM7 4h2v2H7zm8 0h2v2h-2zM5 6h2v7H5zm12 0h2v7h-2zM3 13h2v4H3zm16 0h2v4h-2z"></path>
24
            <path d="M3 15h18v2H3zm5 3h2v2H8zm6 0h2v2h-2zm-4 2h4v2h-4z"></path>
25
          </svg>
26
        </ItemMedia>
27
        <ItemContent>
28
          <ItemTitle>New comment</ItemTitle>
29
          <ItemDescription>Someone replied to your post.</ItemDescription>
30
        </ItemContent>
31
        <ItemActions>
32
          <Button size="sm" variant="outline">
33
            View
34
          </Button>
35
        </ItemActions>
36
      </Item>
37
      <ItemSeparator />
38
      <Item variant="outline">
39
        <ItemMedia variant="icon">
40
          <svg
41
            xmlns="http://www.w3.org/2000/svg"
42
            fill="currentColor"
43
            viewBox="0 0 24 24"
44
          >
45
            <path d="M20 20H4v-2h16v2ZM4 18H2V6h2v12Zm18 0h-2V6h2v12Zm-8-4h-4v-2h4v2Zm-4-2H8v-2h2v2Zm6 0h-2v-2h2v2Zm-8-2H6V8h2v2Zm10 0h-2V8h2v2Zm2-4H4V4h16v2Z"></path>
46
          </svg>
47
        </ItemMedia>
48
        <ItemContent>
49
          <ItemTitle>New message</ItemTitle>
50
          <ItemDescription>You have a new direct message.</ItemDescription>
51
        </ItemContent>
52
        <ItemActions>
53
          <Button size="sm" variant="outline">
54
            View
55
          </Button>
56
        </ItemActions>
57
      </Item>
58
    </ItemGroup>
59
  );
60
}

The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

pnpm dlx shadcn@latest add pxl-ui/registry/item

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { mergeProps } from "@base-ui/react/merge-props";
2
import { useRender } from "@base-ui/react/use-render";
3
import { cva, type VariantProps } from "class-variance-authority";
4
import type { ComponentProps, PropsWithChildren } from "react";
5

6
import { cn } from "@/lib/utils";
7
import { Button } from "@/ui/pxl/button";
8
import {
9
  DropdownMenu,
10
  DropdownMenuContent,
11
  DropdownMenuGroup,
12
  DropdownMenuItem,
13
  DropdownMenuTrigger,
14
} from "@/ui/pxl/dropdown-menu";
15
import { Separator } from "@/ui/pxl/separator";
16

17
function ItemGroup({ className, ...props }: ComponentProps<"ul">) {
18
  return (
19
    <ul
20
      data-slot="item-group"
21
      className={cn(
22
        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
23
        className,
24
      )}
25
      {...props}
26
    />
27
  );
28
}
29

30
function ItemSeparator({
31
  className,
32
  ...props
33
}: ComponentProps<typeof Separator>) {
34
  return (
35
    <Separator
36
      data-slot="item-separator"
37
      orientation="horizontal"
38
      border="dashed"
39
      size="md"
40
      className={cn("my-2", className)}
41
      {...props}
42
    />
43
  );
44
}
45

46
const itemVariants = cva(
47
  "group/item flex w-full flex-wrap items-center pixel-size-lg pixel-rounded pixel-border text-sm transition-colors duration-100 outline-none [a]:transition-colors [a]:hover:bg-muted",
48
  {
49
    variants: {
50
      variant: {
51
        default: "pixel-color-[transparent] bg-transparent",
52
        outline: "pixel-color-border bg-transparent",
53
        muted:
54
          "pixel-color-[transparent] bg-[color-mix(in_oklab,var(--muted)_50%,transparent)]",
55
        primary: "pixel-color-[transparent] bg-primary text-primary-foreground",
56
        success: "pixel-color-[transparent] bg-success text-success-foreground",
57
        danger: "pixel-color-[transparent] bg-danger text-danger-foreground",
58
        warning: "pixel-color-[transparent] bg-warning text-warning-foreground",
59
        info: "pixel-color-[transparent] bg-info text-info-foreground",
60
      },
61
      size: {
62
        default: "gap-3.5 px-4 py-3.5",
63
        sm: "gap-2.5 px-3 py-2.5",
64
        xs: "gap-2 px-2.5 py-2 pixel-size-[3px] in-data-[slot=dropdown-menu-content]:p-0",
65
      },
66
    },
67
    defaultVariants: {
68
      variant: "default",
69
      size: "default",
70
    },
71
  },
72
);
73

74
function Item({
75
  className,
76
  variant = "default",
77
  size = "default",
78
  render,
79
  ...props
80
}: useRender.ComponentProps<"li"> & VariantProps<typeof itemVariants>) {
81
  return useRender({
82
    defaultTagName: "li",
83
    props: mergeProps<"li">(
84
      {
85
        className: cn(itemVariants({ variant, size, className })),
86
      },
87
      props,
88
    ),
89
    render,
90
    state: {
91
      slot: "item",
92
      variant,
93
      size,
94
    },
95
  });
96
}
97

98
const itemMediaVariants = cva(
99
  "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",
100
  {
101
    variants: {
102
      variant: {
103
        default: "bg-transparent",
104
        icon: "[&_svg:not([class*='size-'])]:size-4",
105
        image:
106
          "size-10 overflow-hidden px-rounded-sm pixel-size-md group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
107
      },
108
    },
109
    defaultVariants: {
110
      variant: "default",
111
    },
112
  },
113
);
114

115
function ItemMedia({
116
  className,
117
  variant = "default",
118
  ...props
119
}: ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
120
  return (
121
    <div
122
      data-slot="item-media"
123
      data-variant={variant}
124
      className={cn(itemMediaVariants({ variant, className }))}
125
      {...props}
126
    />
127
  );
128
}
129

130
function ItemContent({ className, ...props }: ComponentProps<"div">) {
131
  return (
132
    <div
133
      data-slot="item-content"
134
      className={cn(
135
        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
136
        className,
137
      )}
138
      {...props}
139
    />
140
  );
141
}
142

143
const itemTitleVariants = cva(
144
  "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug underline-offset-4",
145
  {
146
    variants: {
147
      font: {
148
        default: "font-heading",
149
        heading: "font-heading",
150
        sans: "font-sans",
151
        mono: "font-mono",
152
      },
153
    },
154
    defaultVariants: {
155
      font: "default",
156
    },
157
  },
158
);
159

160
function ItemTitle({
161
  className,
162
  font,
163
  ...props
164
}: ComponentProps<"div"> & VariantProps<typeof itemTitleVariants>) {
165
  return (
166
    <div
167
      data-slot="item-title"
168
      className={cn(itemTitleVariants({ font }), className)}
169
      {...props}
170
    />
171
  );
172
}
173

174
function ItemDescription({ className, ...props }: ComponentProps<"p">) {
175
  return (
176
    <p
177
      data-slot="item-description"
178
      className={cn(
179
        "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",
180
        className,
181
      )}
182
      {...props}
183
    />
184
  );
185
}
186

187
function ItemActions({ className, ...props }: ComponentProps<"div">) {
188
  return (
189
    <div
190
      data-slot="item-actions"
191
      className={cn("flex items-center gap-2", className)}
192
      {...props}
193
    />
194
  );
195
}
196

197
function ItemActionsMenu({
198
  children,
199
  ...props
200
}: Omit<ComponentProps<typeof DropdownMenu>, "children"> & PropsWithChildren) {
201
  return (
202
    <DropdownMenu {...props}>
203
      <DropdownMenuTrigger
204
        render={
205
          <Button size="icon-xs" variant="ghost" title="More">
206
            <svg
207
              xmlns="http://www.w3.org/2000/svg"
208
              fill="currentColor"
209
              viewBox="0 0 24 24"
210
            >
211
              <path d="M13 23h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-2-2h-2v-2h2v2Zm0-4h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-2-2h-2V9h2v2Zm0-4h-2V5h2v2Zm-2-2H9V3h2v2Zm4 0h-2V3h2v2Zm-2-2h-2V1h2v2Z" />
212
            </svg>
213
          </Button>
214
        }
215
      />
216
      <DropdownMenuContent align="end">
217
        <DropdownMenuGroup>{children}</DropdownMenuGroup>
218
      </DropdownMenuContent>
219
    </DropdownMenu>
220
  );
221
}
222

223
function ItemActionsMenuItem(props: ComponentProps<typeof DropdownMenuItem>) {
224
  return <DropdownMenuItem {...props} />;
225
}
226

227
function ItemHeader({ className, ...props }: ComponentProps<"div">) {
228
  return (
229
    <div
230
      data-slot="item-header"
231
      className={cn(
232
        "flex basis-full items-center justify-between gap-2",
233
        className,
234
      )}
235
      {...props}
236
    />
237
  );
238
}
239

240
function ItemFooter({ className, ...props }: ComponentProps<"div">) {
241
  return (
242
    <div
243
      data-slot="item-footer"
244
      className={cn(
245
        "flex basis-full items-center justify-between gap-2",
246
        className,
247
      )}
248
      {...props}
249
    />
250
  );
251
}
252

253
export {
254
  Item,
255
  ItemActions,
256
  ItemActionsMenu,
257
  ItemActionsMenuItem,
258
  ItemContent,
259
  ItemDescription,
260
  ItemFooter,
261
  ItemGroup,
262
  ItemHeader,
263
  ItemMedia,
264
  ItemSeparator,
265
  ItemTitle,
266
};

Update the import paths to match your project setup.

Usage

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

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

Composition

Use the following composition to build an Item:

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

Variant

Use the variant prop to change the visual style of the item.

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

Primary Variant

Primary background for secondary content.

Success Variant

Success background for secondary content.

Danger Variant

Danger background for secondary content.

Warning Variant

Warning background for secondary content.

Info Variant

Info background for secondary content.

1
import {
2
  Item,
3
  ItemContent,
4
  ItemDescription,
5
  ItemMedia,
6
  ItemTitle,
7
} from "@/components/ui/pxl/item";
8

9
export default function ItemVariantExample() {
10
  return (
11
    <div className="flex w-full max-w-md flex-col gap-6">
12
      <Item>
13
        <ItemMedia variant="icon">
14
          <svg
15
            xmlns="http://www.w3.org/2000/svg"
16
            fill="currentColor"
17
            viewBox="0 0 24 24"
18
          >
19
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
20
          </svg>
21
        </ItemMedia>
22
        <ItemContent>
23
          <ItemTitle>Default Variant</ItemTitle>
24
          <ItemDescription>
25
            Transparent background with no border.
26
          </ItemDescription>
27
        </ItemContent>
28
      </Item>
29
      <Item variant="outline">
30
        <ItemMedia variant="icon">
31
          <svg
32
            xmlns="http://www.w3.org/2000/svg"
33
            fill="currentColor"
34
            viewBox="0 0 24 24"
35
          >
36
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
37
          </svg>
38
        </ItemMedia>
39
        <ItemContent>
40
          <ItemTitle>Outline Variant</ItemTitle>
41
          <ItemDescription>
42
            Outlined style with a visible border.
43
          </ItemDescription>
44
        </ItemContent>
45
      </Item>
46
      <Item variant="muted">
47
        <ItemMedia variant="icon">
48
          <svg
49
            xmlns="http://www.w3.org/2000/svg"
50
            fill="currentColor"
51
            viewBox="0 0 24 24"
52
          >
53
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
54
          </svg>
55
        </ItemMedia>
56
        <ItemContent>
57
          <ItemTitle>Muted Variant</ItemTitle>
58
          <ItemDescription>
59
            Muted background for secondary content.
60
          </ItemDescription>
61
        </ItemContent>
62
      </Item>
63
      <Item variant="primary">
64
        <ItemMedia variant="icon">
65
          <svg
66
            xmlns="http://www.w3.org/2000/svg"
67
            fill="currentColor"
68
            viewBox="0 0 24 24"
69
          >
70
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
71
          </svg>
72
        </ItemMedia>
73
        <ItemContent>
74
          <ItemTitle>Primary Variant</ItemTitle>
75
          <ItemDescription>
76
            Primary background for secondary content.
77
          </ItemDescription>
78
        </ItemContent>
79
      </Item>
80
      <Item variant="success">
81
        <ItemMedia variant="icon">
82
          <svg
83
            xmlns="http://www.w3.org/2000/svg"
84
            fill="currentColor"
85
            viewBox="0 0 24 24"
86
          >
87
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
88
          </svg>
89
        </ItemMedia>
90
        <ItemContent>
91
          <ItemTitle>Success Variant</ItemTitle>
92
          <ItemDescription>
93
            Success background for secondary content.
94
          </ItemDescription>
95
        </ItemContent>
96
      </Item>
97
      <Item variant="danger">
98
        <ItemMedia variant="icon">
99
          <svg
100
            xmlns="http://www.w3.org/2000/svg"
101
            fill="currentColor"
102
            viewBox="0 0 24 24"
103
          >
104
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
105
          </svg>
106
        </ItemMedia>
107
        <ItemContent>
108
          <ItemTitle>Danger Variant</ItemTitle>
109
          <ItemDescription>
110
            Danger background for secondary content.
111
          </ItemDescription>
112
        </ItemContent>
113
      </Item>
114
      <Item variant="warning">
115
        <ItemMedia variant="icon">
116
          <svg
117
            xmlns="http://www.w3.org/2000/svg"
118
            fill="currentColor"
119
            viewBox="0 0 24 24"
120
          >
121
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
122
          </svg>
123
        </ItemMedia>
124
        <ItemContent>
125
          <ItemTitle>Warning Variant</ItemTitle>
126
          <ItemDescription>
127
            Warning background for secondary content.
128
          </ItemDescription>
129
        </ItemContent>
130
      </Item>
131
      <Item variant="info">
132
        <ItemMedia variant="icon">
133
          <svg
134
            xmlns="http://www.w3.org/2000/svg"
135
            fill="currentColor"
136
            viewBox="0 0 24 24"
137
          >
138
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
139
          </svg>
140
        </ItemMedia>
141
        <ItemContent>
142
          <ItemTitle>Info Variant</ItemTitle>
143
          <ItemDescription>
144
            Info background for secondary content.
145
          </ItemDescription>
146
        </ItemContent>
147
      </Item>
148
    </div>
149
  );
150
}

Size

Use the size prop to change the size of the item. Available sizes are default, sm, and sm.

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

1
import {
2
  Item,
3
  ItemContent,
4
  ItemDescription,
5
  ItemMedia,
6
  ItemTitle,
7
} from "@/components/ui/pxl/item";
8

9
export default function ItemSizeExample() {
10
  return (
11
    <div className="flex w-full max-w-md flex-col gap-6">
12
      <Item variant="outline">
13
        <ItemMedia variant="icon">
14
          <svg
15
            xmlns="http://www.w3.org/2000/svg"
16
            fill="currentColor"
17
            viewBox="0 0 24 24"
18
          >
19
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
20
          </svg>
21
        </ItemMedia>
22
        <ItemContent>
23
          <ItemTitle>Default Size</ItemTitle>
24
          <ItemDescription>
25
            The standard size for most use cases.
26
          </ItemDescription>
27
        </ItemContent>
28
      </Item>
29
      <Item variant="outline" size="sm">
30
        <ItemMedia variant="icon">
31
          <svg
32
            xmlns="http://www.w3.org/2000/svg"
33
            fill="currentColor"
34
            viewBox="0 0 24 24"
35
          >
36
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
37
          </svg>
38
        </ItemMedia>
39
        <ItemContent>
40
          <ItemTitle>Small Size</ItemTitle>
41
          <ItemDescription>A compact size for dense layouts.</ItemDescription>
42
        </ItemContent>
43
      </Item>
44
      <Item variant="outline" size="xs">
45
        <ItemMedia variant="icon">
46
          <svg
47
            xmlns="http://www.w3.org/2000/svg"
48
            fill="currentColor"
49
            viewBox="0 0 24 24"
50
          >
51
            <path d="M20 22H4v-2h16v2ZM4 14h4v2H4v4H2V4h2v10Zm18 6h-2v-4h-4v-2h4V4h2v16Zm-6-2H8v-2h8v2Zm4-14H4V2h16v2Z"></path>
52
          </svg>
53
        </ItemMedia>
54
        <ItemContent>
55
          <ItemTitle>Extra Small Size</ItemTitle>
56
          <ItemDescription>The most compact size available.</ItemDescription>
57
        </ItemContent>
58
      </Item>
59
    </div>
60
  );
61
}

Icon

Use ItemMedia with variant="icon" to display an icon.

Security Alert

New login detected from unknown device.

1
import { Button } from "@/components/ui/pxl/button";
2
import {
3
  Item,
4
  ItemActions,
5
  ItemContent,
6
  ItemDescription,
7
  ItemMedia,
8
  ItemTitle,
9
} from "@/components/ui/pxl/item";
10

11
export default function ItemIconExample() {
12
  return (
13
    <div className="flex w-full max-w-lg flex-col gap-6">
14
      <Item variant="outline">
15
        <ItemMedia variant="icon">
16
          <svg
17
            xmlns="http://www.w3.org/2000/svg"
18
            fill="currentColor"
19
            viewBox="0 0 24 24"
20
          >
21
            <path d="M14 22h-4v-2h4v2Zm-4-2H8v-2h2v2Zm6 0h-2v-2h2v2Zm-8-2H6v-2h2v2Zm10 0h-2v-2h2v2ZM6 16H4v-2h2v2Zm7 0h-2v-2h2v2Zm7 0h-2v-2h2v2ZM4 14H2V4h2v10Zm18 0h-2V4h2v10Zm-9-2h-2V6h2v6Zm7-8H4V2h16v2Z"></path>
22
          </svg>
23
        </ItemMedia>
24
        <ItemContent>
25
          <ItemTitle>Security Alert</ItemTitle>
26
          <ItemDescription>
27
            New login detected from unknown device.
28
          </ItemDescription>
29
        </ItemContent>
30
        <ItemActions>
31
          <Button size="sm" variant="outline">
32
            Review
33
          </Button>
34
        </ItemActions>
35
      </Item>
36
    </div>
37
  );
38
}

Avatar

You can use ItemMedia with variant="avatar" to display an avatar.

Princess

Last seen 5 months ago

HPW

No Team Members

Invite your team to collaborate on this project.

1
import {
2
  Avatar,
3
  AvatarFallback,
4
  AvatarImage,
5
} from "@/components/ui/pxl/avatar";
6
import { Button } from "@/components/ui/pxl/button";
7
import {
8
  Item,
9
  ItemActions,
10
  ItemContent,
11
  ItemDescription,
12
  ItemMedia,
13
  ItemTitle,
14
} from "@/components/ui/pxl/item";
15

16
export default function ItemAvatarExample() {
17
  return (
18
    <div className="flex w-full max-w-lg flex-col gap-6">
19
      <Item variant="outline">
20
        <ItemMedia>
21
          <Avatar className="size-10">
22
            <AvatarImage className="bg-success" src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/princess.png" />
23
            <AvatarFallback>P</AvatarFallback>
24
          </Avatar>
25
        </ItemMedia>
26
        <ItemContent>
27
          <ItemTitle>Princess</ItemTitle>
28
          <ItemDescription>Last seen 5 months ago</ItemDescription>
29
        </ItemContent>
30
        <ItemActions>
31
          <Button
32
            size="icon-sm"
33
            variant="outline"
34
            className="rounded-full"
35
            aria-label="Invite"
36
          >
37
            <svg
38
              xmlns="http://www.w3.org/2000/svg"
39
              fill="currentColor"
40
              viewBox="0 0 24 24"
41
            >
42
              <path d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2v7Z" />
43
            </svg>
44
          </Button>
45
        </ItemActions>
46
      </Item>
47
      <Item variant="outline">
48
        <ItemMedia>
49
          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale *:data-[slot=avatar]:group-hover/item:grayscale-0">
50
            <Avatar className="hidden sm:flex">
51
              <AvatarImage
52
                src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png"
53
                alt="@hero"
54
                className="bg-primary"
55
              />
56
              <AvatarFallback>H</AvatarFallback>
57
            </Avatar>
58
            <Avatar className="hidden sm:flex">
59
              <AvatarImage
60
                src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/princess.png"
61
                alt="@princess"
62
                className="bg-success"
63
              />
64
              <AvatarFallback>P</AvatarFallback>
65
            </Avatar>
66
            <Avatar>
67
              <AvatarImage
68
                src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/wizard.png"
69
                alt="@wizard"
70
                className="bg-info"
71
              />
72
              <AvatarFallback>W</AvatarFallback>
73
            </Avatar>
74
          </div>
75
        </ItemMedia>
76
        <ItemContent>
77
          <ItemTitle>No Team Members</ItemTitle>
78
          <ItemDescription>
79
            Invite your team to collaborate on this project.
80
          </ItemDescription>
81
        </ItemContent>
82
        <ItemActions>
83
          <Button size="sm" variant="outline">
84
            Invite
85
          </Button>
86
        </ItemActions>
87
      </Item>
88
    </div>
89
  );
90
}

Image

Use ItemMedia with variant="image" to display an image.

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Midnight City Lights - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

1
/** biome-ignore-all lint/a11y/useValidAnchor: example */
2

3
import {
4
  Item,
5
  ItemContent,
6
  ItemDescription,
7
  ItemGroup,
8
  ItemMedia,
9
  ItemTitle,
10
} from "@/components/ui/pxl/item";
11

12
export default function ItemImageExample() {
13
  return (
14
    <div className="flex w-full max-w-md flex-col gap-6">
15
      <ItemGroup className="gap-4">
16
        <Item variant="outline" role="listitem" render={
17
          <a href="#">
18
            <ItemMedia variant="image">
19
              <img
20
                src={`https://avatar.vercel.sh/midnight-city-lights`}
21
                alt="Midnight City Lights"
22
                width={32}
23
                height={32}
24
                className="object-cover grayscale group-hover/item:grayscale-0"
25
              />
26
            </ItemMedia>
27
            <ItemContent>
28
              <ItemTitle className="line-clamp-1">
29
                Midnight City Lights -{" "}
30
                <span className="text-muted-foreground">Electric Nights</span>
31
              </ItemTitle>
32
              <ItemDescription>Neon Dreams</ItemDescription>
33
            </ItemContent>
34
            <ItemContent className="flex-none text-center">
35
              <ItemDescription>3:45</ItemDescription>
36
            </ItemContent>
37
          </a>}
38
          />
39
        <Item variant="outline" role="listitem" render={
40
          <a href="#">
41
            <ItemMedia variant="image">
42
              <img
43
                src={`https://avatar.vercel.sh/coffee-shop-conversations`}
44
                alt="Coffee Shop Conversations"
45
                width={32}
46
                height={32}
47
                className="object-cover grayscale group-hover/item:grayscale-0"
48
              />
49
            </ItemMedia>
50
            <ItemContent>
51
              <ItemTitle className="line-clamp-1">
52
                Midnight City Lights -{" "}
53
                <span className="text-muted-foreground">Urban Stories</span>
54
              </ItemTitle>
55
              <ItemDescription>The Morning Brew</ItemDescription>
56
            </ItemContent>
57
            <ItemContent className="flex-none text-center">
58
              <ItemDescription>4:05</ItemDescription>
59
            </ItemContent>
60
          </a>}
61
          />
62
        <Item variant="outline" role="listitem" render={
63
          <a href="#">
64
            <ItemMedia variant="image">
65
              <img
66
                src={`https://avatar.vercel.sh/coffee-shop-conversations`}
67
                alt="Coffee Shop Conversations"
68
                width={32}
69
                height={32}
70
                className="object-cover grayscale group-hover/item:grayscale-0"
71
              />
72
            </ItemMedia>
73
            <ItemContent>
74
              <ItemTitle className="line-clamp-1">
75
                Digital Rain -{" "}
76
                <span className="text-muted-foreground">Binary Beats</span>
77
              </ItemTitle>
78
              <ItemDescription>Cyber Symphony</ItemDescription>
79
            </ItemContent>
80
            <ItemContent className="flex-none text-center">
81
              <ItemDescription>3:30</ItemDescription>
82
            </ItemContent>
83
          </a>}
84
          />
85
      </ItemGroup>
86
    </div>
87
  )
88
}

Group

Use ItemGroup to group related items together.

H
Hero
hero@pxl-ui.com
P
Princess
princess@pxl-ui.com
W
wizard
wizard@pxl-ui.com

1
import {
2
  Avatar,
3
  AvatarFallback,
4
  AvatarImage,
5
} from "@/components/ui/pxl/avatar";
6
import { Button } from "@/components/ui/pxl/button";
7
import {
8
  Item,
9
  ItemActions,
10
  ItemContent,
11
  ItemDescription,
12
  ItemGroup,
13
  ItemMedia,
14
  ItemTitle,
15
} from "@/components/ui/pxl/item";
16

17
export default function ItemGroupExample() {
18
  return (
19
    <ItemGroup className="max-w-sm">
20
      <Item variant="outline">
21
        <ItemMedia>
22
          <Avatar>
23
            <AvatarImage
24
              src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png"
25
              className="bg-primary grayscale group-hover/item:grayscale-0"
26
            />
27
            <AvatarFallback>H</AvatarFallback>
28
          </Avatar>
29
        </ItemMedia>
30
        <ItemContent className="gap-1">
31
          <ItemTitle>Hero</ItemTitle>
32
          <ItemDescription>hero@pxl-ui.com</ItemDescription>
33
        </ItemContent>
34
        <ItemActions>
35
          <Button variant="ghost" size="icon" className="rounded-full">
36
            <svg
37
              xmlns="http://www.w3.org/2000/svg"
38
              fill="currentColor"
39
              viewBox="0 0 24 24"
40
            >
41
              <path d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2v7Z" />
42
            </svg>
43
          </Button>
44
        </ItemActions>
45
      </Item>
46
      <Item variant="outline">
47
        <ItemMedia>
48
          <Avatar>
49
            <AvatarImage
50
              src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/princess.png"
51
              className="bg-success grayscale group-hover/item:grayscale-0"
52
            />
53
            <AvatarFallback>P</AvatarFallback>
54
          </Avatar>
55
        </ItemMedia>
56
        <ItemContent className="gap-1">
57
          <ItemTitle>Princess</ItemTitle>
58
          <ItemDescription>princess@pxl-ui.com</ItemDescription>
59
        </ItemContent>
60
        <ItemActions>
61
          <Button variant="ghost" size="icon" className="rounded-full">
62
            <svg
63
              xmlns="http://www.w3.org/2000/svg"
64
              fill="currentColor"
65
              viewBox="0 0 24 24"
66
            >
67
              <path d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2v7Z" />
68
            </svg>
69
          </Button>
70
        </ItemActions>
71
      </Item>
72
      <Item variant="outline">
73
        <ItemMedia>
74
          <Avatar>
75
            <AvatarImage
76
              src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/wizard.png"
77
              className="bg-info grayscale group-hover/item:grayscale-0"
78
            />
79
            <AvatarFallback>W</AvatarFallback>
80
          </Avatar>
81
        </ItemMedia>
82
        <ItemContent className="gap-1">
83
          <ItemTitle>wizard</ItemTitle>
84
          <ItemDescription>wizard@pxl-ui.com</ItemDescription>
85
        </ItemContent>
86
        <ItemActions>
87
          <Button variant="ghost" size="icon" className="rounded-full">
88
            <svg
89
              xmlns="http://www.w3.org/2000/svg"
90
              fill="currentColor"
91
              viewBox="0 0 24 24"
92
            >
93
              <path d="M13 11h7v2h-7v7h-2v-7H4v-2h7V4h2v7Z" />
94
            </svg>
95
          </Button>
96
        </ItemActions>
97
      </Item>
98
    </ItemGroup>
99
  );
100
}

Use ItemHeader to add a header above the item content.

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.

1
import {
2
  Item,
3
  ItemContent,
4
  ItemDescription,
5
  ItemGroup,
6
  ItemHeader,
7
  ItemTitle,
8
} from "@/components/ui/pxl/item";
9

10
export default function ItemHeaderExample() {
11
  return (
12
    <div className="flex w-full max-w-xl flex-col gap-6">
13
      <ItemGroup className="grid grid-cols-3 gap-4">
14
        <Item variant="outline">
15
          <ItemHeader>
16
            <img
17
              src="https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop"
18
              alt="v0-1.5-sm"
19
              width={128}
20
              height={128}
21
              className="aspect-square w-full rounded-sm object-cover"
22
            />
23
          </ItemHeader>
24
          <ItemContent>
25
            <ItemTitle>v0-1.5-sm</ItemTitle>
26
            <ItemDescription>Everyday tasks and UI generation.</ItemDescription>
27
          </ItemContent>
28
        </Item>
29
        <Item variant="outline">
30
          <ItemHeader>
31
            <img
32
              src="https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop"
33
              alt="v0-1.5-lg"
34
              width={128}
35
              height={128}
36
              className="aspect-square w-full rounded-sm object-cover"
37
            />
38
          </ItemHeader>
39
          <ItemContent>
40
            <ItemTitle>v0-1.5-lg</ItemTitle>
41
            <ItemDescription>Advanced thinking or reasoning.</ItemDescription>
42
          </ItemContent>
43
        </Item>
44
        <Item variant="outline">
45
          <ItemHeader>
46
            <img
47
              src="https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop"
48
              alt="v0-2.0-mini"
49
              width={128}
50
              height={128}
51
              className="aspect-square w-full rounded-sm object-cover"
52
            />
53
          </ItemHeader>
54
          <ItemContent>
55
            <ItemTitle>v0-2.0-mini</ItemTitle>
56
            <ItemDescription>Open Source model for everyone.</ItemDescription>
57
          </ItemContent>
58
        </Item>
59
      </ItemGroup>
60
    </div>
61
  );
62
}

Link

Use the render prop to render the item as a link. The hover and focus states will be applied to the anchor element.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

1
/** biome-ignore-all lint/a11y/useValidAnchor: example */
2
import {
3
  Item,
4
  ItemActions,
5
  ItemContent,
6
  ItemDescription,
7
  ItemTitle,
8
} from "@/components/ui/pxl/item";
9

10
export default function ItemLinkExample() {
11
  return (
12
    <div className="flex w-full max-w-md flex-col gap-4">
13
      <Item
14
        render={
15
          <a href="#">
16
            <ItemContent>
17
              <ItemTitle>Visit our documentation</ItemTitle>
18
              <ItemDescription>
19
                Learn how to get started with our components.
20
              </ItemDescription>
21
            </ItemContent>
22
            <ItemActions>
23
              <svg
24
                className="size-4"
25
                xmlns="http://www.w3.org/2000/svg"
26
                fill="currentColor"
27
                viewBox="0 0 24 24"
28
              >
29
                <path d="M16 13v-2h-2v2h2Zm-2-2V9h-2v2h2Zm0 4v-2h-2v2h2Zm-2-6V7h-2v2h2Zm0 8v-2h-2v2h2ZM10 7V5H8v2h2Zm0 12v-2H8v2h2Z" />
30
              </svg>
31
            </ItemActions>
32
          </a>
33
        }
34
      />
35
      <Item
36
        variant="outline"
37
        render={
38
          <a href="#" target="_blank" rel="noopener noreferrer">
39
            <ItemContent>
40
              <ItemTitle>External resource</ItemTitle>
41
              <ItemDescription>
42
                Opens in a new tab with security attributes.
43
              </ItemDescription>
44
            </ItemContent>
45
            <ItemActions>
46
              <svg
47
                className="size-4"
48
                xmlns="http://www.w3.org/2000/svg"
49
                fill="currentColor"
50
                viewBox="0 0 24 24"
51
              >
52
                <path d="M17 21H5v-2h12v2ZM5 19H3V7h2v12Zm14 0h-2v-6h2v6Zm-8-4H9v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V9h2v2Zm6 0h-2V7h-2V5h-4V3h8v8Zm-4-2h-2V7h2v2Zm-6-2H5V5h6v2Z" />
53
              </svg>
54
            </ItemActions>
55
          </a>
56
        }
57
      />
58
    </div>
59
  );
60
}

1
import {
2
  Avatar,
3
  AvatarFallback,
4
  AvatarImage,
5
} from "@/components/ui/pxl/avatar";
6
import { Button } from "@/components/ui/pxl/button";
7
import {
8
  DropdownMenu,
9
  DropdownMenuContent,
10
  DropdownMenuGroup,
11
  DropdownMenuItem,
12
  DropdownMenuTrigger,
13
} from "@/components/ui/pxl/dropdown-menu";
14
import {
15
  Item,
16
  ItemContent,
17
  ItemDescription,
18
  ItemMedia,
19
  ItemTitle,
20
} from "@/components/ui/pxl/item";
21

22
export default function ItemDropdownExample() {
23
  return (
24
    <DropdownMenu>
25
      <DropdownMenuTrigger
26
        render={
27
          <Button variant="outline">
28
            Select{" "}
29
            <svg
30
              xmlns="http://www.w3.org/2000/svg"
31
              fill="currentColor"
32
              viewBox="0 0 24 24"
33
            >
34
              <path d="M13 16h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 10H5V8h2v2Zm12 0h-2V8h2v2Z" />
35
            </svg>
36
          </Button>
37
        }
38
      />
39
      <DropdownMenuContent className="w-48" align="end">
40
        <DropdownMenuGroup>
41
          <DropdownMenuItem>
42
            <Item size="xs" className="w-full p-2">
43
              <ItemMedia>
44
                <Avatar className="size-6.5">
45
                  <AvatarImage
46
                    src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/hero.png"
47
                    className="grayscale"
48
                  />
49
                  <AvatarFallback>H</AvatarFallback>
50
                </Avatar>
51
              </ItemMedia>
52
              <ItemContent className="gap-0">
53
                <ItemTitle>Hero</ItemTitle>
54
                <ItemDescription className="leading-none">
55
                  hero@pxl-ui.com
56
                </ItemDescription>
57
              </ItemContent>
58
            </Item>
59
          </DropdownMenuItem>
60
          <DropdownMenuItem>
61
            <Item size="xs" className="w-full p-2">
62
              <ItemMedia>
63
                <Avatar className="size-6.5">
64
                  <AvatarImage
65
                    src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/princess.png"
66
                    className="grayscale"
67
                  />
68
                  <AvatarFallback>P</AvatarFallback>
69
                </Avatar>
70
              </ItemMedia>
71
              <ItemContent className="gap-0">
72
                <ItemTitle>Princess</ItemTitle>
73
                <ItemDescription className="leading-none">
74
                  princess@pxl-ui.com
75
                </ItemDescription>
76
              </ItemContent>
77
            </Item>
78
          </DropdownMenuItem>
79
          <DropdownMenuItem>
80
            <Item size="xs" className="w-full p-2">
81
              <ItemMedia>
82
                <Avatar className="size-6.5">
83
                  <AvatarImage
84
                    src="https://raw.githubusercontent.com/pxl-ui/registry/main/app/public/portraits/wizard.png"
85
                    className="grayscale"
86
                  />
87
                  <AvatarFallback>W</AvatarFallback>
88
                </Avatar>
89
              </ItemMedia>
90
              <ItemContent className="gap-0">
91
                <ItemTitle>Wizard</ItemTitle>
92
                <ItemDescription className="leading-none">
93
                  wizard@pxl-ui.com
94
                </ItemDescription>
95
              </ItemContent>
96
            </Item>
97
          </DropdownMenuItem>
98
        </DropdownMenuGroup>
99
      </DropdownMenuContent>
100
    </DropdownMenu>
101
  );
102
}

Action Item

Use the ItemActionsMenu and ItemActionsMenuItem components to display a dropdown with item actions

Buy groceries

Buy groceries

Yoga class

1
import { Button } from "@/components/ui/pxl/button";
2
import {
3
  Item,
4
  ItemActions,
5
  ItemActionsMenu,
6
  ItemActionsMenuItem,
7
  ItemContent,
8
  ItemGroup,
9
  ItemSeparator,
10
  ItemTitle
11
} from "@/components/ui/pxl/item";
12

13
export default function ActionItemDemo() {
14
  return (
15
    <ItemGroup className="w-full max-w-md has-data-[size=xs]:gap-0">
16
      <Item variant="default" size="xs">
17
        <ItemActions>
18
          <Button
19
            className="size-4 transition-all animation-duration-1000 hover:animate-pulse"
20
            size="icon-lg"
21
            variant="ghost"
22
          >
23
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M20 22H4v-2h16v2ZM4 20H2V4h2v16Zm18 0h-2V4h2v16ZM20 4H4V2h16v2Z"/></svg>
24
          </Button>
25
        </ItemActions>
26
        <ItemContent>
27
          <ItemTitle font="sans">Buy groceries</ItemTitle>
28
          {/* <ItemDescription>You have a new direct message.</ItemDescription> */}
29
        </ItemContent>
30
        <ItemActions>
31
          <ItemActionsMenu>
32
            <ItemActionsMenuItem>
33
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z"/></svg>
34
              Complete
35
            </ItemActionsMenuItem>
36
            <ItemActionsMenuItem>
37
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M3 2h18v2H3zm0 5h18v2H3zM1 4h2v3H1zm20 0h2v3h-2zm-2 5h2v11h-2zM3 9h2v11H3zm2 11h14v2H5zm4-9h6v2H9z"/></svg>
38
              Archive
39
            </ItemActionsMenuItem>
40
            <ItemActionsMenuItem variant="destructive">
41
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18 22H6V20H18V22ZM9 6H15V4H17V6H22V8H20V20H18V8H6V20H4V8H2V6H7V4H9V6ZM15 4H9V2H15V4Z"/></svg>
42
              Delete
43
            </ItemActionsMenuItem>
44
          </ItemActionsMenu>
45
        </ItemActions>
46
      </Item>
47
      <ItemSeparator className="m-0" />
48
      <Item variant="default" size="xs">
49
        <ItemActions>
50
          <Button
51
            className="size-4 transition-all animation-duration-1000 hover:animate-pulse"
52
            size="icon-lg"
53
            variant="ghost"
54
          >
55
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M20 22H4v-2h16v2ZM4 20H2V4h2v16Zm18 0h-2V4h2v16ZM20 4H4V2h16v2Z"/></svg>
56
          </Button>
57
        </ItemActions>
58
        <ItemContent>
59
          <ItemTitle font="sans">Buy groceries</ItemTitle>
60
          {/* <ItemDescription>You have a new direct message.</ItemDescription> */}
61
        </ItemContent>
62
        <ItemActions>
63
          <ItemActionsMenu>
64
            <ItemActionsMenuItem>
65
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M10 18H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6 0H4v-2h2v2Zm8 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z"/></svg>
66
              Complete
67
            </ItemActionsMenuItem>
68
            <ItemActionsMenuItem>
69
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M3 2h18v2H3zm0 5h18v2H3zM1 4h2v3H1zm20 0h2v3h-2zm-2 5h2v11h-2zM3 9h2v11H3zm2 11h14v2H5zm4-9h6v2H9z"/></svg>
70
              Archive
71
            </ItemActionsMenuItem>
72
            <ItemActionsMenuItem variant="destructive">
73
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18 22H6V20H18V22ZM9 6H15V4H17V6H22V8H20V20H18V8H6V20H4V8H2V6H7V4H9V6ZM15 4H9V2H15V4Z"/></svg>
74
              Delete
75
            </ItemActionsMenuItem>
76
          </ItemActionsMenu>
77
        </ItemActions>
78
      </Item>
79
      <ItemSeparator className="m-0" />
80
      <Item variant="default" size="xs">
81
        <ItemActions>
82
          <Button
83
            className="size-4 transition-all animation-duration-1000 hover:animate-pulse"
84
            size="icon-lg"
85
            variant="ghost"
86
          >
87
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M20 22H4v-2h16v2ZM4 20H2V4h2v16Zm18 0h-2V4h2v16Zm-11-4H9v-2h2v2Zm-2-2H7v-2h2v2Zm4 0h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm3-6H4V2h16v2Z"/></svg>
88
          </Button>
89
        </ItemActions>
90
        <ItemContent>
91
          <ItemTitle font="sans" className="line-through text-muted-foreground">Yoga class</ItemTitle>
92
          {/* <ItemDescription>You have a new direct message.</ItemDescription> */}
93
        </ItemContent>
94
        <ItemActions>
95
          <Button
96
            size="icon-xs"
97
            variant="ghost"
98
          >
99
            <svg className="fill-destructive" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18 22H6V20H18V22ZM9 6H15V4H17V6H22V8H20V20H18V8H6V20H4V8H2V6H7V4H9V6ZM15 4H9V2H15V4Z"/></svg>
100
          </Button>
101
        </ItemActions>
102
      </Item>
103
    </ItemGroup>
104
  );
105
}

API Reference

Item

The main component for displaying content with media, title, description, and actions.

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

ItemGroup

A container that groups related items together with consistent styling.

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

ItemSeparator

A separator between items in a group.

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

ItemMedia

Use ItemMedia to display media content such as icons, images, or avatars.

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

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

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

ItemContent

Wraps the title and description of the item.

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

ItemTitle

Displays the title of the item.

<ItemTitle>Item Title</ItemTitle>

ItemDescription

Displays the description of the item.

<ItemDescription>Item description</ItemDescription>

ItemActions

Container for action buttons or other interactive elements.

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

ItemHeader

Displays a header above the item content.

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

ItemFooter

Displays a footer below the item content.

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