Thumbnail - Admin Components

The Thumbnail component shows a small image in a bordered box, falling back to a photo icon when there's no image. The Medusa Admin uses it next to product names in tables and lists.

Code
import { Thumbnail } from "@medusajs/dashboard/components"

Example#

Use Thumbnail in a widget or UI route to show a record's image:

Code
1import { Thumbnail } from "@medusajs/dashboard/components"2import { Text } from "@medusajs/ui"3
4const ProductItem = ({ product }) => {5  return (6    <div className="flex items-center gap-x-3">7      <Thumbnail8        src={product.thumbnail}9        alt={product.title}10        size="small"11      />12      <Text size="small">{product.title}</Text>13    </div>14  )15}

Props#

The component accepts the ThumbnailProps type: