Three ways to take a component

Framer

On a component page, open the Framer tab and press Copy file. In Framer, open Assets, add a new code file, paste over everything in it and save. The component appears in the Insert menu with all its controls in the right panel, so it stays editable on the canvas.

Each Framer file is one file that imports only react, framer and framer-motion, all of which Framer already has.

React or Next.js

Open the React tab and copy the file into your components folder. It is a client component (it starts with ‘use client’) with typed props and no Framer code. Some need framer-motion; the page says so above the code.

Install with one command

In a project set up for the shadcn CLI, the Install tab gives a command like this one:

npx shadcn@latest add https://components.layr.supply/r/compare.json

The file lands in components/layr/, and anything it needs is installed with it.

Pictures

The previews use demo photos shown on this site only; they are not in the files you copy. Set your own through each component’s image props. Without one, a component shows a plain tone instead of a broken image.