104Get started
HextaUI

Item: Variants

default has no surface, outline draws a hairline and muted sits on a soft fill.

Quarterly report.pdf

2.4 MB · default

Quarterly report.pdf

2.4 MB · outline

Quarterly report.pdf

2.4 MB · muted

import { IconFileText } from "@tabler/icons-react"

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

const variants = ["default", "outline", "muted"] as const

export function ItemVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      {variants.map((variant) => (
        <Item key={variant} variant={variant}>
          <ItemMedia variant="icon">
            <IconFileText />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Quarterly report.pdf</ItemTitle>
            <ItemDescription>2.4 MB · {variant}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant="outline" size="sm">
              Open
            </Button>
          </ItemActions>
        </Item>
      ))}
    </div>
  )
}

Add this example

This adds the example as components/examples/item/variants.tsx, together with the Item component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/item-variants.json

To add only the component, follow the Item installation.

Props in this example

The Item props this example sets, from the API reference.

Item

PropTypeDefault
variant
"default" | "outline" | "muted""default"

ItemMedia

PropTypeDefault
varianticon puts the icon on a tile and hides it from screen readers. image crops to a square. Both have corners concentric with the item.
"default" | "icon" | "image""default"

Every prop is in the Item API reference.

More Item examples

See them all, with keyboard support and accessibility notes, on the Item page.

Related components