> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/system-ui/theme-ui/llms.txt
> Use this file to discover all available pages before exploring further.
# Image
> Primitive image component with responsive sizing and theme variants
The Image component is a primitive for rendering responsive images with theme-aware styling.
## Import
```jsx theme={null}
import { Image } from 'theme-ui'
```
## Usage
```jsx theme={null}
```
## Props
Image source URL.
```jsx theme={null}
```
Alternative text for accessibility.
```jsx theme={null}
```
Image variant from `theme.images`.
```jsx theme={null}
```
Theme-aware styles for custom image appearance.
```jsx theme={null}
```
Image width.
Image height.
Browser lazy loading behavior.
```jsx theme={null}
```
### Inherited Props
Image extends Box and accepts:
* All standard HTML img attributes
* Box spacing props (m, p, mx, my, px, py, etc.)
## Default Styles
The Image component includes these base styles:
```js theme={null}
{
maxWidth: '100%',
height: 'auto',
}
```
This ensures images are responsive by default and don't overflow their containers.
## Examples
### Basic Image
```jsx theme={null}
```
### Rounded Image
```jsx theme={null}
```
### Image with Shadow
```jsx theme={null}
```
### Responsive Image Sizes
```jsx theme={null}
```
### Image with Border
```jsx theme={null}
```
### Fixed Size Image
```jsx theme={null}
```
### Lazy Loaded Image
```jsx theme={null}
```
### Image with Overlay
```jsx theme={null}
```