Media Field

Preview

import mediaField from "~/payload/fields/media/config"
import MediaField from "~/payload/fields/media"

// Usage in PayloadCMS block/collection config
const heroMedia = mediaField({
  name: "heroImage",
  label: "Hero Image"
})

// Usage in React component
<MediaField
  media={block.heroImage}
  width={800}
  height={400}
/>

Props

The mediaField function accepts the following configuration options:

Installation

npx shadcn@latest add @uifoundry/media-field

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component uses the following registry components:

• Field Types - TypeScript definitions for PayloadCMS fields
• Upload Field - PayloadCMS upload field configuration

Dependencies

This component requires the following NPM packages:

• React - JavaScript library for building user interfaces
• Next.js - React framework for production