> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> Display images with styling, shadows, and effects

# Image

The Image component displays external images with support for sizing presets, border radius, shadows, opacity, and aspect ratio control.

## Props

| Prop          | Type               | Default      | Description                                                      |
| ------------- | ------------------ | ------------ | ---------------------------------------------------------------- |
| `src`         | `string`           | **Required** | Source URL of the image                                          |
| `alt`         | `string`           | -            | Alternative text for accessibility                               |
| `size`        | `string \| number` | -            | Size preset: `xs`, `sm`, `md`, `lg`, `xl`, or pixel value        |
| `width`       | `string \| number` | -            | Specific width                                                   |
| `height`      | `string \| number` | -            | Specific height                                                  |
| `radius`      | `string \| number` | `"md"`       | Border radius: `none`, `sm`, `md`, `lg`, `xl`, `full`, or number |
| `fit`         | `string`           | `"cover"`    | Object fit mode: `cover`, `contain`, `fill`                      |
| `background`  | `string`           | -            | Background color while loading                                   |
| `flush`       | `boolean`          | `false`      | Removes border radius (useful in cards)                          |
| `borderWidth` | `number`           | -            | Border width in pixels                                           |
| `borderColor` | `string`           | -            | Border color                                                     |
| `shadow`      | `string`           | `"none"`     | Shadow depth: `none`, `sm`, `md`, `lg`                           |
| `opacity`     | `number`           | `1`          | Opacity (0-1)                                                    |
| `aspectRatio` | `number`           | -            | Aspect ratio (e.g., 16/9, 1, 4/3)                                |

## Size Presets

* `"xs"` - 32px
* `"sm"` - 48px
* `"md"` - 64px
* `"lg"` - 96px
* `"xl"` - 128px

## Examples

### Basic Image

```jsx theme={null}
<Image src="https://example.com/photo.jpg" alt="Description" />
```

### With Size Preset

```jsx theme={null}
<Image src="https://example.com/photo.jpg" size="lg" />
```

### Avatar (Circular)

```jsx theme={null}
<Image
  src="https://example.com/avatar.jpg"
  size="md"
  radius="full"
/>
```

### Card Banner

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

### With Shadow

```jsx theme={null}
<Image
  src="https://example.com/photo.jpg"
  size="xl"
  shadow="md"
  radius="lg"
/>
```

### With Border

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

### Aspect Ratio

```jsx theme={null}
{/* 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}
/>
```

### Opacity Overlay Effect

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

### Contain vs Cover

```jsx theme={null}
<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>
```

## Common Patterns

### User Profile Card

```jsx theme={null}
<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>
```

### Product Card

```jsx theme={null}
<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>
```

### Gallery Grid

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

### Hero Banner

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

### Thumbnail with Hover Effect

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