Masked Collage Frame

Image cut-outs as an arch, oval, torn paper or museum frame, with a tilt and an overlay slot for layering a modern UI card on top of a classical picture.

Open in Registry JSON

Installation

$ npx shadcn@latest add @creative-ui/collage-frame

On an older shadcn CLI, use the URL: npx shadcn@latest add https://ui.krutikraut.com/r/collage-frame.json

Preview

Pre-Raphaelite painting of a woman in robes

Lot 17

Pre-Raphaelite school

Oil painting · 19th century

Est.€ 42.0M

Shape

Tilt-2°

Usage

Example.tsx

import { CollageFrame, CollageFrameOverlay } from "@/components/collage-frame"

export function Feature() {
  return (
    <CollageFrame
      src="https://images.unsplash.com/photo-1576773689115-5cd2b0223523?w=900&q=80&auto=format&fit=crop"
      alt="Pre-Raphaelite painting"
      shape="arch"
      tilt={-3}
      className="aspect-[3/4] w-72"
    >
      <CollageFrameOverlay position="bottom-right" tilt={3}>
        <div className="rounded-xl bg-background p-4 shadow-lg">
          <p className="text-sm font-medium">+24% this quarter</p>
        </div>
      </CollageFrameOverlay>
    </CollageFrame>
  )
}

Props

2 components

<CollageFrame />

Prop	Type	Default	Description
src*	string	—	Image URL.
alt	string	""	Accessible description. Leave empty for decorative images.
shape	"arch" \| "oval" \| "torn" \| "museum" \| "plain"	"arch"	Cut-out shape.
tilt	number	0	Rotation in degrees, for a pasted-down collage feel.
shadow	boolean	true	Soft drop shadow under the cut-out.
roughness	number	0.5	Torn edge roughness, 0 to 1. `torn` only.
seed	number	7	Seed for the torn edge, so two frames can differ. `torn` only.
paperColor	string	"#f4efe6"	Paper colour that shows along a torn edge. `torn` only.
frameColor	string	"#2a2420"	Frame colour (dark walnut). Try `#b08d4a` for gilt. `museum` only.
matColor	string	"#f3efe7"	Mat colour. `museum` only.
frameWidth	number	18	Frame thickness in px. `museum` only.
matWidth	number	24	Mat thickness in px. `museum` only.
fit	"cover" \| "contain"	"cover"	How the image fills the cut-out.
imageClassName	string	—	Class names for the `img` element.
children	React.ReactNode	—	Overlay content, usually one or more `CollageFrameOverlay` elements.

Also accepts every div prop, which is spread onto the root element.

<CollageFrameOverlay />

Positions a card or any UI element on top of a CollageFrame.

Prop	Type	Default	Description
position	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| "bottom" \| "center"	"bottom-left"	Where the overlay sits on the frame.
hang	number	24	How far the overlay hangs past the frame edge, in px. Use `0` to keep it inside.
tilt	number	0	Counter-rotation in degrees. Pass the negative of the frame's tilt to keep the UI level.

Also accepts every div prop, which is spread onto the root element.

Notes

Give the frame a size with className: a width plus a height or aspect ratio.
The torn edge uses CSS masks and the museum frame uses color-mix(), which need a current evergreen browser.
No client JavaScript, so it is safe in React Server Components.

Dependencies

shadcn/utils