Item

1import { Button } from "@/components/ui/button"2import {3  Item,4  ItemActions,5  ItemContent,6  ItemDescription,7  ItemMedia,8  ItemTitle,9} from "@/components/ui/item"1011function BadgeCheckIcon(props: React.SVGProps<SVGSVGElement>) {12  return (13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>14      <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />15      <path d="m9 12 2 2 4-4" />16    </svg>17  )18}1920function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {21  return (22    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>23      <path d="m9 18 6-6-6-6" />24    </svg>25  )26}2728export function Example() {29  return (30    <div className="flex w-full max-w-md flex-col gap-4">31      <Item variant="outline">32        <ItemContent>33          <ItemTitle>Basic Item</ItemTitle>34          <ItemDescription>35            A simple item with title and description.36          </ItemDescription>37        </ItemContent>38        <ItemActions>39          <Button variant="outline" size="sm">40            Action41          </Button>42        </ItemActions>43      </Item>44      <Item variant="outline" size="sm" render={<a href="#" />}>45        <ItemMedia>46          <BadgeCheckIcon className="size-5" />47        </ItemMedia>48        <ItemContent>49          <ItemTitle>Your profile has been verified.</ItemTitle>50        </ItemContent>51        <ItemActions>52          <ChevronRightIcon className="size-4" />53        </ItemActions>54      </Item>55    </div>56  )57}

1import {2  Item,3  ItemContent,4  ItemDescription,5  ItemTitle,6} from "@/components/ui/item"78export function Example() {9  return (10    <div className="flex w-full max-w-md flex-col gap-4">11      <Item>12        <ItemContent>13          <ItemTitle>Default</ItemTitle>14          <ItemDescription>15            Transparent background with no border.16          </ItemDescription>17        </ItemContent>18      </Item>19      <Item variant="outline">20        <ItemContent>21          <ItemTitle>Outline</ItemTitle>22          <ItemDescription>Outlined style with a visible border.</ItemDescription>23        </ItemContent>24      </Item>25      <Item variant="muted">26        <ItemContent>27          <ItemTitle>Muted</ItemTitle>28          <ItemDescription>29            Muted background for secondary content.30          </ItemDescription>31        </ItemContent>32      </Item>33    </div>34  )35}

1import {2  Item,3  ItemContent,4  ItemDescription,5  ItemMedia,6  ItemTitle,7} from "@/components/ui/item"89function InboxIcon(props: React.SVGProps<SVGSVGElement>) {10  return (11    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>12      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />13      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />14    </svg>15  )16}1718export function Example() {19  return (20    <div className="flex w-full max-w-md flex-col gap-4">21      <Item variant="outline">22        <ItemMedia variant="icon">23          <InboxIcon />24        </ItemMedia>25        <ItemContent>26          <ItemTitle>Default</ItemTitle>27          <ItemDescription>The standard size for most use cases.</ItemDescription>28        </ItemContent>29      </Item>30      <Item variant="outline" size="sm">31        <ItemMedia variant="icon">32          <InboxIcon />33        </ItemMedia>34        <ItemContent>35          <ItemTitle>Small</ItemTitle>36          <ItemDescription>A compact size for dense layouts.</ItemDescription>37        </ItemContent>38      </Item>39      <Item variant="outline" size="xs">40        <ItemMedia variant="icon">41          <InboxIcon />42        </ItemMedia>43        <ItemContent>44          <ItemTitle>Extra small</ItemTitle>45          <ItemDescription>The most compact size available.</ItemDescription>46        </ItemContent>47      </Item>48    </div>49  )50}

1import { Button } from "@/components/ui/button"2import {3  Item,4  ItemActions,5  ItemContent,6  ItemDescription,7  ItemMedia,8  ItemTitle,9} from "@/components/ui/item"1011function ShieldAlertIcon(props: React.SVGProps<SVGSVGElement>) {12  return (13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>14      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />15      <path d="M12 8v4" />16      <path d="M12 16h.01" />17    </svg>18  )19}2021export function Example() {22  return (23    <Item variant="outline" className="max-w-lg">24      <ItemMedia variant="icon">25        <ShieldAlertIcon />26      </ItemMedia>27      <ItemContent>28        <ItemTitle>Security Alert</ItemTitle>29        <ItemDescription>30          New login detected from unknown device.31        </ItemDescription>32      </ItemContent>33      <ItemActions>34        <Button size="sm" variant="outline">35          Review36        </Button>37      </ItemActions>38    </Item>39  )40}

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"2import { Button } from "@/components/ui/button"3import {4  Item,5  ItemActions,6  ItemContent,7  ItemDescription,8  ItemMedia,9  ItemTitle,10} from "@/components/ui/item"1112export function Example() {13  return (14    <div className="flex w-full max-w-lg flex-col gap-4">15      <Item variant="outline">16        <ItemMedia>17          <Avatar size="sm">18            <AvatarImage src="/assets/brand/demos/avatars/avatar-1.png" alt="Mina Cho" />19            <AvatarFallback>MC</AvatarFallback>20          </Avatar>21        </ItemMedia>22        <ItemContent>23          <ItemTitle>Mina Cho</ItemTitle>24          <ItemDescription>Last seen 5 months ago</ItemDescription>25        </ItemContent>26      </Item>27      <Item variant="outline">28        <ItemMedia>29          <div className="flex -space-x-2">30            <Avatar size="sm" className="ring-2 ring-background">31              <AvatarImage src="/assets/brand/demos/avatars/avatar-2.png" alt="Jonas Berg" />32              <AvatarFallback>JB</AvatarFallback>33            </Avatar>34            <Avatar size="sm" className="ring-2 ring-background">35              <AvatarImage src="/assets/brand/demos/avatars/avatar-3.png" alt="Elsa Lind" />36              <AvatarFallback>EL</AvatarFallback>37            </Avatar>38            <Avatar size="sm" className="ring-2 ring-background">39              <AvatarImage src="/assets/brand/demos/avatars/avatar-4.png" alt="Noah Park" />40              <AvatarFallback>NP</AvatarFallback>41            </Avatar>42          </div>43        </ItemMedia>44        <ItemContent>45          <ItemTitle>No members</ItemTitle>46          <ItemDescription>Invite people to this project.</ItemDescription>47        </ItemContent>48        <ItemActions>49          <Button size="sm" variant="outline">50            Invite51          </Button>52        </ItemActions>53      </Item>54    </div>55  )56}

1import {2  Item,3  ItemContent,4  ItemDescription,5  ItemGroup,6  ItemMedia,7  ItemTitle,8} from "@/components/ui/item"910const tracks = [11  {12    title: "Midnight City Lights",13    description: "Electric Nights",14    image: "/assets/brand/demos/attachments/attachment-1.png",15    duration: "3:45",16  },17  {18    title: "Coffee Shop Conversations",19    description: "Urban Stories",20    image: "/assets/brand/demos/attachments/attachment-2.png",21    duration: "4:05",22  },23  {24    title: "Digital Rain",25    description: "Binary Beats",26    image: "/assets/brand/demos/attachments/attachment-3.png",27    duration: "3:30",28  },29] as const3031export function Example() {32  return (33    <ItemGroup className="max-w-md gap-4">34      {tracks.map((track) => (35        <Item key={track.title} variant="outline">36          <ItemMedia variant="image">37            <img src={track.image} alt={track.title} />38          </ItemMedia>39          <ItemContent>40            <div className="flex items-center justify-between gap-2">41              <ItemTitle>{track.title}</ItemTitle>42              <span className="shrink-0 text-sm text-muted-foreground">43                {track.duration}44              </span>45            </div>46            <ItemDescription>{track.description}</ItemDescription>47          </ItemContent>48        </Item>49      ))}50    </ItemGroup>51  )52}

1import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"2import {3  Item,4  ItemContent,5  ItemDescription,6  ItemGroup,7  ItemMedia,8  ItemSeparator,9  ItemTitle,10} from "@/components/ui/item"1112const people = [13  {14    name: "Mina Cho",15    email: "mina@arctis.dev",16    src: "/assets/brand/demos/avatars/avatar-1.png",17    fallback: "MC",18  },19  {20    name: "Jonas Berg",21    email: "jonas@arctis.dev",22    src: "/assets/brand/demos/avatars/avatar-2.png",23    fallback: "JB",24  },25  {26    name: "Elsa Lind",27    email: "elsa@arctis.dev",28    src: "/assets/brand/demos/avatars/avatar-3.png",29    fallback: "EL",30  },31] as const3233export function Example() {34  return (35    <ItemGroup className="max-w-md rounded-md border border-border">36      {people.map((person, index) => (37        <div key={person.email}>38          {index > 0 ? <ItemSeparator /> : null}39          <Item>40            <ItemMedia>41              <Avatar size="sm">42                <AvatarImage src={person.src} alt={person.name} />43                <AvatarFallback>{person.fallback}</AvatarFallback>44              </Avatar>45            </ItemMedia>46            <ItemContent>47              <ItemTitle>{person.name}</ItemTitle>48              <ItemDescription>{person.email}</ItemDescription>49            </ItemContent>50          </Item>51        </div>52      ))}53    </ItemGroup>54  )55}

1import {2  Item,3  ItemContent,4  ItemDescription,5  ItemHeader,6  ItemTitle,7} from "@/components/ui/item"89const models = [10  {11    name: "v0-1.5-sm",12    description: "Everyday tasks and UI generation.",13    image: "/assets/brand/demos/attachments/attachment-1.png",14  },15  {16    name: "v0-1.5-lg",17    description: "Advanced thinking or reasoning.",18    image: "/assets/brand/demos/attachments/attachment-2.png",19  },20  {21    name: "v0-2.0-mini",22    description: "Open source model for everyone.",23    image: "/assets/brand/demos/attachments/attachment-3.png",24  },25] as const2627export function Example() {28  return (29    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-3">30      {models.map((model) => (31        <Item32          key={model.name}33          variant="outline"34          className="flex-col flex-nowrap items-stretch gap-3"35        >36          <ItemHeader className="block">37            <img38              src={model.image}39              alt={model.name}40              className="aspect-[4/3] w-full rounded-sm object-cover"41            />42          </ItemHeader>43          <ItemContent className="w-full flex-none">44            <ItemTitle>{model.name}</ItemTitle>45            <ItemDescription>{model.description}</ItemDescription>46          </ItemContent>47        </Item>48      ))}49    </div>50  )51}

1import {2  Item,3  ItemActions,4  ItemContent,5  ItemDescription,6  ItemTitle,7} from "@/components/ui/item"89function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {10  return (11    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>12      <path d="m9 18 6-6-6-6" />13    </svg>14  )15}1617function ExternalLinkIcon(props: React.SVGProps<SVGSVGElement>) {18  return (19    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>20      <path d="M15 3h6v6" />21      <path d="M10 14 21 3" />22      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />23    </svg>24  )25}2627export function Example() {28  return (29    <div className="flex w-full max-w-md flex-col gap-3">30      <Item render={<a href="#" />}>31        <ItemContent>32          <ItemTitle>Visit our documentation</ItemTitle>33          <ItemDescription>34            Learn how to get started with our components.35          </ItemDescription>36        </ItemContent>37        <ItemActions>38          <ChevronRightIcon className="size-4" />39        </ItemActions>40      </Item>41      <Item42        variant="outline"43        render={<a href="https://example.com" target="_blank" rel="noreferrer noopener" />}44      >45        <ItemContent>46          <ItemTitle>External resource</ItemTitle>47          <ItemDescription>48            Opens in a new tab with security attributes.49          </ItemDescription>50        </ItemContent>51        <ItemActions>52          <ExternalLinkIcon className="size-4" />53        </ItemActions>54      </Item>55    </div>56  )57}