Item
A flexible component designed to showcase any type of content.
@radix-ui/react-slot
class-variance-authority
lucide-reactThe Item component serves as a flexible container for arranging various types of content. It’s ideal for presenting titles, descriptions, and related actions. Combine multiple items using the ItemGroup component to form structured lists.
New Notifications
You have 3 unread messages. Check them before the end of the day.
1'use client'
2
3import * as React from 'react'
4import { Bell } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import {
8 Item,
9 ItemActions,
10 ItemContent,
11 ItemDescription,
12 ItemMedia,
13 ItemTitle,
14} from '@/components/ui/item'
15
16export function ItemDemo() {
17 return (
18 <div className="mx-auto max-w-md space-y-4 p-4">
19 <Item>
20 <ItemMedia variant="icon">
21 <Bell />
22 </ItemMedia>
23 <ItemContent>
24 <ItemTitle>New Notifications</ItemTitle>
25 <ItemDescription>
26 You have 3 unread messages. Check them before the end of
27 the day.
28 </ItemDescription>
29 </ItemContent>
30 <ItemActions>
31 <Button variant="primary">View</Button>
32 </ItemActions>
33 </Item>
34 </div>
35 )
36}
37Installation
1
Install the following dependencies:
npx shadcn@latest add https://sbthemes.com/r/item.json
Examples
Size
The Item component provides multiple size options to fit various layouts. Use the default size for standard sections or the sm size for compact lists and tighter spaces.
New Message
You’ve received a new message from your team lead. Check your inbox to reply.
Featured Project
Explore highlighted project details.
1'use client'
2
3import * as React from 'react'
4import Link from 'next/link'
5import { ArrowRightIcon, MailIcon, StarIcon } from 'lucide-react'
6
7import { Button } from '@/components/ui/button'
8import {
9 Item,
10 ItemActions,
11 ItemContent,
12 ItemDescription,
13 ItemGroup,
14 ItemMedia,
15 ItemTitle,
16} from '@/components/ui/item'
17
18export function ItemSizeDemo() {
19 return (
20 <div className="mx-auto max-w-md space-y-4 p-4">
21 <ItemGroup className="gap-2">
22 <Item size="default">
23 <ItemMedia>
24 <MailIcon className="text-primary size-5" />
25 </ItemMedia>
26 <ItemContent>
27 <ItemTitle>New Message</ItemTitle>
28 <ItemDescription>
29 You’ve received a new message from your team lead.
30 Check your inbox to reply.
31 </ItemDescription>
32 </ItemContent>
33 <ItemActions>
34 <Button size="sm" variant="primary">
35 View
36 </Button>
37 </ItemActions>
38 </Item>
39
40 <Item size="sm" variant="outline" asChild>
41 <Link href="#">
42 <ItemMedia>
43 <StarIcon className="text-primary size-5" />
44 </ItemMedia>
45 <ItemContent>
46 <ItemTitle>Featured Project</ItemTitle>
47 <ItemDescription>
48 Explore highlighted project details.
49 </ItemDescription>
50 </ItemContent>
51 <ItemActions>
52 <ArrowRightIcon className="text-primary size-4" />
53 </ItemActions>
54 </Link>
55 </Item>
56 </ItemGroup>
57 </div>
58 )
59}
60Variant
The Item component offers multiple visual variants for different design needs. Use the default for a clean look, outline for bordered layouts, or muted to highlight important content with a subtle background.
Default Variant
The standard look with no border or background — perfect for minimal layouts.
Outline Variant
Adds a subtle border, making it ideal for grouped lists or card-like designs.
Secondary Variant
Uses a soft background to highlight important or selected items in a list.
1'use client'
2
3import * as React from 'react'
4import { BellIcon, FolderIcon, InboxIcon } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import {
8 Item,
9 ItemActions,
10 ItemContent,
11 ItemDescription,
12 ItemGroup,
13 ItemMedia,
14 ItemTitle,
15} from '@/components/ui/item'
16
17export function ItemVariantDemo() {
18 return (
19 <div className="mx-auto max-w-md space-y-4 p-4">
20 <ItemGroup className="gap-2">
21 <Item variant="default">
22 <ItemMedia variant="icon">
23 <InboxIcon className="text-primary size-5" />
24 </ItemMedia>
25 <ItemContent>
26 <ItemTitle>Default Variant</ItemTitle>
27 <ItemDescription>
28 The standard look with no border or background —
29 perfect for minimal layouts.
30 </ItemDescription>
31 </ItemContent>
32 <ItemActions>
33 <Button size="sm" variant="ghost">
34 Open
35 </Button>
36 </ItemActions>
37 </Item>
38
39 <Item variant="outline">
40 <ItemMedia variant="icon">
41 <FolderIcon className="text-primary size-5" />
42 </ItemMedia>
43 <ItemContent>
44 <ItemTitle>Outline Variant</ItemTitle>
45 <ItemDescription>
46 Adds a subtle border, making it ideal for grouped
47 lists or card-like designs.
48 </ItemDescription>
49 </ItemContent>
50 <ItemActions>
51 <Button size="sm" variant="outline">
52 View
53 </Button>
54 </ItemActions>
55 </Item>
56
57 <Item variant="secondary">
58 <ItemMedia variant="icon">
59 <BellIcon className="text-primary size-5" />
60 </ItemMedia>
61 <ItemContent>
62 <ItemTitle>Secondary Variant</ItemTitle>
63 <ItemDescription>
64 Uses a soft background to highlight important or
65 selected items in a list.
66 </ItemDescription>
67 </ItemContent>
68 <ItemActions>
69 <Button size="sm" variant="primary">
70 Manage
71 </Button>
72 </ItemActions>
73 </Item>
74 </ItemGroup>
75 </div>
76 )
77}
78Header
Project Aurora
A next-gen analytics dashboard built collaboratively by the data and UI teams to visualize product performance in real-time.
DesignFrontendAnalytics
1'use client'
2
3import * as React from 'react'
4import { Edit3, Trash2 } from 'lucide-react'
5
6import { Badge } from '@/components/ui/badge'
7import { Button } from '@/components/ui/button'
8import {
9 Item,
10 ItemActions,
11 ItemContent,
12 ItemDescription,
13 ItemHeader,
14 ItemTitle,
15} from '@/components/ui/item'
16
17export function ItemHeaderDemo() {
18 return (
19 <div className="flex w-full max-w-lg flex-col gap-6">
20 <Item variant="outline">
21 <ItemHeader>
22 <ItemTitle>Project Aurora</ItemTitle>
23 <ItemActions>
24 <Button
25 variant="ghost"
26 size="icon"
27 className="size-7 rounded-full "
28 aria-label="Edit project"
29 >
30 <Edit3 className="size-4" />
31 </Button>
32 <Button
33 variant="ghost"
34 size="icon"
35 className="size-7 text-danger hover:bg-danger/10 rounded-full "
36 aria-label="Delete project"
37 >
38 <Trash2 className="size-4" />
39 </Button>
40 </ItemActions>
41 </ItemHeader>
42
43 <ItemContent>
44 <ItemDescription>
45 A next-gen analytics dashboard built collaboratively by
46 the data and UI teams to visualize product performance
47 in real-time.
48 </ItemDescription>
49
50 <div className="mt-3 flex flex-wrap gap-2">
51 <Badge variant="secondary">Design</Badge>
52 <Badge variant="secondary">Frontend</Badge>
53 <Badge variant="secondary">Analytics</Badge>
54 </div>
55 </ItemContent>
56 </Item>
57 </div>
58 )
59}
60Footer
Creative Team Workshop
A hands-on workshop focused on brainstorming, collaboration, and innovative design strategies.
Oct 24, 2025
32 Participants
1'use client'
2
3import * as React from 'react'
4import Image from 'next/image'
5import { CalendarDays, Users } from 'lucide-react'
6
7import { Button } from '@/components/ui/button'
8import {
9 Item,
10 ItemActions,
11 ItemContent,
12 ItemDescription,
13 ItemFooter,
14 ItemHeader,
15 ItemMedia,
16 ItemTitle,
17} from '@/components/ui/item'
18
19export function ItemFooterDemo() {
20 return (
21 <div className="flex w-full max-w-md flex-col gap-6">
22 <Item variant="outline">
23 <ItemMedia variant="image">
24 <Image
25 src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800"
26 alt="Team Workshop"
27 className="rounded-md object-cover"
28 width={400}
29 height={300}
30 />
31 </ItemMedia>
32
33 <ItemContent>
34 <ItemHeader>
35 <ItemTitle>Creative Team Workshop</ItemTitle>
36 <ItemActions>
37 <Button
38 size="sm"
39 variant="outline"
40 className="rounded-full"
41 >
42 Join
43 </Button>
44 </ItemActions>
45 </ItemHeader>
46
47 <ItemDescription>
48 A hands-on workshop focused on brainstorming,
49 collaboration, and innovative design strategies.
50 </ItemDescription>
51
52 <ItemFooter className="text-gray flex items-center justify-between border-t border-border pt-3 text-xs">
53 <div className="flex items-center gap-2">
54 <CalendarDays className="size-3.5" />
55 <span>Oct 24, 2025</span>
56 </div>
57 <div className="flex items-center gap-2">
58 <Users className="size-3.5" />
59 <span>32 Participants</span>
60 </div>
61 </ItemFooter>
62 </ItemContent>
63 </Item>
64 </div>
65 )
66}
67Avatar
ST
Steven Tey
Sent you a message request 2 hours ago.
VCPGSC
Design Team
Collaborate with your teammates on design updates and assets.
1import { MessageSquare, UserPlus } from 'lucide-react'
2
3import {
4 Avatar,
5 AvatarFallback,
6 AvatarImage,
7} from '@/components/ui/avatar'
8import { Button } from '@/components/ui/button'
9import {
10 Item,
11 ItemActions,
12 ItemContent,
13 ItemDescription,
14 ItemMedia,
15 ItemTitle,
16} from '@/components/ui/item'
17
18export function ItemAvatarDemo() {
19 return (
20 <div className="flex w-full max-w-lg flex-col gap-6">
21 <Item variant="outline">
22 <ItemMedia>
23 <Avatar className="size-10">
24 <AvatarImage
25 src="/images/profile1.png"
26 className="grayscale"
27 />
28 <AvatarFallback>ST</AvatarFallback>
29 </Avatar>
30 </ItemMedia>
31 <ItemContent>
32 <ItemTitle>Steven Tey</ItemTitle>
33 <ItemDescription>
34 Sent you a message request 2 hours ago.
35 </ItemDescription>
36 </ItemContent>
37 <ItemActions>
38 <Button
39 size="sm"
40 variant="outline"
41 className="rounded-full"
42 aria-label="View Message"
43 >
44 <MessageSquare className="size-4" />
45 </Button>
46 </ItemActions>
47 </Item>
48
49 <Item variant="outline">
50 <ItemMedia>
51 <div className="*:data-[slot=avatar]:ring-border flex -space-x-2 *:data-[slot=avatar]:ring-2">
52 <Avatar>
53 <AvatarImage
54 src="/images/profile2.png"
55 alt="@vercel"
56 />
57 <AvatarFallback>VC</AvatarFallback>
58 </Avatar>
59 <Avatar>
60 <AvatarImage
61 src="/images/profile3.png"
62 alt="@ping"
63 />
64 <AvatarFallback>PG</AvatarFallback>
65 </Avatar>
66 <Avatar>
67 <AvatarImage
68 src="/images/profile4.png"
69 alt="@shadcn"
70 />
71 <AvatarFallback>SC</AvatarFallback>
72 </Avatar>
73 </div>
74 </ItemMedia>
75 <ItemContent>
76 <ItemTitle>Design Team</ItemTitle>
77 <ItemDescription>
78 Collaborate with your teammates on design updates and
79 assets.
80 </ItemDescription>
81 </ItemContent>
82 <ItemActions>
83 <Button size="sm" variant="outline">
84 <UserPlus className="mr-2 size-4" />
85 Join
86 </Button>
87 </ItemActions>
88 </Item>
89 </div>
90 )
91}
92Group
AJ
Design Sprint Kickoff
Hosted by Alice Johnson • Tomorrow • 10:00 AM
DK
Frontend Review
Hosted by David Kim • Oct 20 • 2:00 PM
ML
Product Strategy Session
Hosted by Maria Lopez • Oct 22 • 11:30 AM
1import * as React from 'react'
2import { Bell, CalendarPlus } from 'lucide-react'
3
4import {
5 Avatar,
6 AvatarFallback,
7 AvatarImage,
8} from '@/components/ui/avatar'
9import { Button } from '@/components/ui/button'
10import {
11 Item,
12 ItemActions,
13 ItemContent,
14 ItemDescription,
15 ItemGroup,
16 ItemMedia,
17 ItemSeparator,
18 ItemTitle,
19} from '@/components/ui/item'
20
21export function ItemGroupEventDemo() {
22 return (
23 <div className="flex w-full max-w-md flex-col gap-6">
24 <ItemGroup>
25 <Item>
26 <ItemMedia>
27 <Avatar>
28 <AvatarImage src="/images/profile5.png" />
29 <AvatarFallback>AJ</AvatarFallback>
30 </Avatar>
31 </ItemMedia>
32 <ItemContent>
33 <ItemTitle>Design Sprint Kickoff</ItemTitle>
34 <ItemDescription>
35 Hosted by Alice Johnson • Tomorrow • 10:00 AM
36 </ItemDescription>
37 </ItemContent>
38 <ItemActions>
39 <Button
40 variant="ghost"
41 size="icon"
42 className="rounded-full"
43 >
44 <CalendarPlus className="size-4" />
45 </Button>
46 </ItemActions>
47 </Item>
48 <ItemSeparator />
49 <Item>
50 <ItemMedia>
51 <Avatar>
52 <AvatarImage src="/images/profile6.png" />
53 <AvatarFallback>DK</AvatarFallback>
54 </Avatar>
55 </ItemMedia>
56 <ItemContent>
57 <ItemTitle>Frontend Review</ItemTitle>
58 <ItemDescription>
59 Hosted by David Kim • Oct 20 • 2:00 PM
60 </ItemDescription>
61 </ItemContent>
62 <ItemActions>
63 <Button
64 variant="ghost"
65 size="icon"
66 className="rounded-full"
67 >
68 <Bell className="size-4" />
69 </Button>
70 </ItemActions>
71 </Item>
72 <ItemSeparator />
73 <Item>
74 <ItemMedia>
75 <Avatar>
76 <AvatarImage src="/images/profile7.png" />
77 <AvatarFallback>ML</AvatarFallback>
78 </Avatar>
79 </ItemMedia>
80 <ItemContent>
81 <ItemTitle>Product Strategy Session</ItemTitle>
82 <ItemDescription>
83 Hosted by Maria Lopez • Oct 22 • 11:30 AM
84 </ItemDescription>
85 </ItemContent>
86 <ItemActions>
87 <Button
88 variant="ghost"
89 size="icon"
90 className="rounded-full"
91 >
92 <Bell className="size-4" />
93 </Button>
94 </ItemActions>
95 </Item>
96 </ItemGroup>
97 </div>
98 )
99}
100Link
1'use client'
2
3import Link from 'next/link'
4import { ArrowRight } from 'lucide-react'
5
6import {
7 Item,
8 ItemActions,
9 ItemContent,
10 ItemDescription,
11 ItemTitle,
12} from '@/components/ui/item'
13
14export function ItemAsLinkDemo() {
15 return (
16 <Item
17 asChild
18 variant="outline"
19 className="hover:bg-gray/20 transition-colors"
20 >
21 <Link href="#">
22 <ItemContent>
23 <ItemTitle>Project Alpha</ItemTitle>
24 <ItemDescription>
25 Manage tasks, timelines, and progress in one place.
26 </ItemDescription>
27 </ItemContent>
28 <ItemActions>
29 <ArrowRight className="text-muted-foreground size-4" />
30 </ItemActions>
31 </Link>
32 </Item>
33 )
34}
35API Reference
Item
| Prop | Type | Default |
|---|---|---|
| variant | default,outline,secondary | default |
| size | default,sm | default |
| asChild | boolean | false |
ItemMedia
| Prop | Type | Default |
|---|---|---|
| variant | default,icon,image | default |
On This Page