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

# Component Assets Overview

> Manage assets bound to components

Components can have bound assets (images, icons, fonts, etc.) that are included when the component is packaged. These assets are served from the CDN and referenced in the component code using the `asset()` function.

## Asset URL Structure

Component assets are served with this URL pattern:

```
https://cdn.metabind.ai/{organizationId}/{projectId}/components/{componentId}/latest/assets/{assetId}/{filename}
```

## Using Assets in Components

Reference bound assets in component code using the `asset()` function:

```javascript theme={null}
const body = () => {
  // Reference asset by name (without extension)
  const logoUrl = asset('logo-2x');

  // Use in Image component
  return Image(logoUrl);
};
```

### Multiple Resolution Assets

For responsive assets, upload multiple resolutions and select dynamically:

```javascript theme={null}
const body = () => {
  const scale = env.scale || '2x';
  const assetName = `logo-${scale}`;

  // Falls back to 2x if requested scale not available
  return Image(asset(assetName) || asset('logo-2x'));
};
```

<Note>
  When a package is created, all assets referenced by the component are included in the package and served from versioned URLs.
</Note>