<Image src="https://example.com/photo.jpg" alt="Description" />

<Image src="https://example.com/photo.jpg" size="lg" />

<Image
  src="https://example.com/avatar.jpg"
  size="md"
  radius="full"
/>

<Image
  src="https://example.com/banner.jpg"
  height={200}
  width="100%"
  flush
/>

<Image
  src="https://example.com/photo.jpg"
  size="xl"
  shadow="md"
  radius="lg"
/>

<Image
  src="https://example.com/photo.jpg"
  size="lg"
  borderWidth={2}
  borderColor="#8B5CF6"
  radius="lg"
/>

{/* 16:9 aspect ratio */}
<Image
  src="https://example.com/video-thumb.jpg"
  width="100%"
  aspectRatio={16/9}
/>

{/* Square */}
<Image
  src="https://example.com/photo.jpg"
  width="100%"
  aspectRatio={1}
/>

<Image
  src="https://example.com/background.jpg"
  width="100%"
  height={200}
  opacity={0.5}
/>

<Row gap="md">
  {/* Cover (default) - fills container, may crop */}
  <Image src="..." size="lg" fit="cover" />

  {/* Contain - shows full image, may letterbox */}
  <Image src="..." size="lg" fit="contain" />
</Row>

<Card>
  <Row gap="md" align="center">
    <Image
      src={user.avatar}
      size="lg"
      radius="full"
    />
    <Col gap="xs">
      <Title value={user.name} size="sm" />
      <Text value={user.email} color="muted" size="sm" />
    </Col>
  </Row>
</Card>

<Card padding="none">
  <Image
    src={product.image}
    width="100%"
    aspectRatio={4/3}
    flush
  />
  <Col padding="md" gap="xs">
    <Title value={product.name} size="sm" />
    <Text value={`$${product.price}`} weight="bold" />
  </Col>
</Card>

<Row gap="sm" wrap>
  {images.map(img => (
    <Image
      key={img.id}
      src={img.url}
      size="lg"
      radius="md"
    />
  ))}
</Row>

<Box width="100%">
  <Image
    src="https://example.com/hero.jpg"
    width="100%"
    height={300}
    radius="lg"
    shadow="lg"
  />
</Box>

<Image
  src="https://example.com/thumbnail.jpg"
  size="md"
  radius="md"
  shadow="sm"
  borderWidth={1}
  borderColor="rgba(0,0,0,0.1)"
/>