--- title: Picture description: "`Picture` is a component that uses the `picture` element to provide alternative images for different display and device scenarios." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/picture - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-picture--basic --- ```tsx Dragon Ball ``` ## Usage ```tsx import { Picture, Source, Image } from "@yamada-ui/react" ``` ```tsx import { Picture, Source, Image } from "@/components/ui" ``` ```tsx import { Picture, Source, Image } from "@workspaces/ui" ``` ```tsx ``` ### Use sources ```tsx ``` ### Use Custom Media Query ```tsx ``` ### Disable Sorting By default, it is sorted by the `minW` and `maxW` of the source. To disable this sorting, set `enableSorting` to `false`. ```tsx ``` ## Props ### Picture | Prop | Default | Type | Description | | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `enableSorting` | `true` | `boolean` | If `true`, the sources will be sorted by the `minW` and `maxW` properties. | | `fit` | - | `"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` | The CSS `object-fit` property. | | `pictureProps` | - | `HTMLStyledProps<"picture">` | The props for the picture element. | | `sources` | - | `PictureSource[]` | The sources for the picture element. | ### Source | Prop | Default | Type | Description | | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | | `as` | - | `As` | The HTML element to render. | | `asChild` | - | `boolean` | Merges its props onto its immediate child. | | `css` | - | `CSSObject \| CSSObject[]` | The CSS object. | | `colorScheme` | - | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables. | | `media` | - | `AnyString \| ThemeTokens["breakpoints"]` | The media query for the source. |