Is Media Composition Guides free for commercial use?

Yes. Media Composition Guides is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is the image review overlay accessible and fast?

The guide artwork is decorative and hidden from assistive technology, while the native select and range input have visible labels and keyboard focus styles. The component renders one responsive image and a small SVG overlay, with no animation loop or image processing.

Can I customise the guide style?

Choose the initial guide and opacity with props, then use className and the shared primary, background and border tokens to adapt the frame to your design system. The built-in guides remain fixed references for thirds, centre cross and diagonals.

Media Composition Guides

A free image-media component for reviewing image composition in place.

Image design review

Composition review: coastal studio

Illustration of a quiet coastal studio overlooking layered blue water, a pale sky and warm terracotta walls. — Guides overlay the image and do not alter its pixels.

Composition guide

Guide opacity65%

Composition guides are visual references only. They do not score or judge the image.

Media Composition Guides is a free image-media component for Next.js and React that overlays rule-of-thirds, centre and diagonal references on a caller-supplied image. Designers can switch guides and tune their opacity in the browser, with Tailwind token styling and no changes to the source pixels.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/media-composition-guides

Usage

import { MediaCompositionGuides } from "@/components/media-composition-guides";

export function CampaignReview() {
  return (
    <MediaCompositionGuides
      label="Campaign crop review"
      src="/campaign.jpg"
      alt="A quiet coastal studio above a blue shoreline"
      width={1800}
      height={1200}
      defaultGuide="thirds"
    />
  );
}

Props

Prop	Type	Default	Description
label	string	required	Visible panel heading and accessible name.
src	string	required	Caller-supplied image URL.
alt	string	required	Meaningful alternative text for the image.
width	number	required	Positive source-image width in pixels, used to reserve its aspect ratio.
height	number	required	Positive source-image height in pixels, used to reserve its aspect ratio.
defaultGuide	"off" \| "thirds" \| "centre" \| "diagonals"	"thirds"	Initial reference pattern. Changing the select updates only this instance.
defaultOpacity	number	0.65	Initial guide opacity, clamped between 0.25 and 1.
className	string	undefined	Additional classes merged onto the panel.

Customisation

The guide colour uses the shared primary and background tokens. Choose the starting reference, tune its initial contrast and style the frame through className.

<MediaCompositionGuides
  label="Portrait crop review"
  src="/portrait.jpg"
  alt="Portrait of a ceramic vase beside a window"
  width={1200}
  height={1600}
  defaultGuide="diagonals"
  defaultOpacity={0.8}
  className="rounded-3xl"
/>

Frequently asked questions

Is Media Composition Guides free for commercial use?: Yes. Media Composition Guides is MIT licensed, so you can use it in personal and commercial projects without attribution.
Is the image review overlay accessible and fast?: The guide artwork is decorative and hidden from assistive technology, while the native select and range input have visible labels and keyboard focus styles. The component renders one responsive image and a small SVG overlay, with no animation loop or image processing.
Can I customise the guide style?: Choose the initial guide and opacity with props, then use className and the shared primary, background and border tokens to adapt the frame to your design system. The built-in guides remain fixed references for thirds, centre cross and diagonals.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with a considered image and content system throughout.Explore Template Empire templates