51:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T59d,

Framer includes a basic copy to clipboard component, but it offers little room for customization.

This component is built to fill that gap. It covers the same core interaction — clicking copies text to the clipboard — but exposes every visual detail as a property control so it fits any design out of the box.

What you can control:

The label shown on the button and the text written to the clipboard, independently
A separate success label shown after the copy completes, with its own icon
Full typography via Framer's native Font control, including family, size, weight, and letter spacing
Fill, border, and text color for the normal, hover, and success states, each grouped in their own panel section
Custom SVG icons for both the default and success states, with automatic color inheritance so they always match your text color
Icon size, position (before or after the label), and gap between icon and text
Padding and border radius via Framer's native controls
A Tracking ID that fires a Framer analytics event on every successful copy

The button locks its width to the normal state size, so the layout never shifts when the success label appears. It's a drop-in replacement for the native component, with the customization options the native one is missing.

53:T903,

Before After Slider lets you showcase transformations, redesigns, photo edits, or any side-by-side comparison with a smooth drag interaction. Works on mouse and touch devices out of the box.

Slider

Set the starting position (0–100%) so the reveal begins exactly where you want
Choose between horizontal or vertical orientation
Control the divider line colour and thickness

Handle

Two handle styles: Circle Outline (frosted glass with backdrop blur) or Solid (filled)
Full control over handle size, corner radius, and border width
Toggle the optional frosted blur effect on the circle outline style
Four built-in icons: Arrows, Chevrons, Lines, or None — each with independent icon size control
Upload your own custom SVG icon to match your brand
Icon colour automatically inverts against the handle fill for solid handles

Labels

Toggle Before / After labels on or off
Fully editable label text
Labels automatically fade out as the slider moves past them, so they never overlap the divider
Style labels with Framer's native Font picker, Padding, Border, Border Radius, text colour, and background colour controls — the same controls you'd use on any Framer text or frame

Framer-native controls throughout

Property controls use native Framer types wherever possible — ControlType.Font, ControlType.Padding, ControlType.BorderRadius, and ControlType.Border — so everything feels right at home in the Framer design panel.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-4191892e-5421-4d78-98b7-a65f27a455c3-all:/unified/creator/4191892e-5421-4d78-98b7-a65f27a455c3/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:4191892e-5421-4d78-98b7-a65f27a455c3:/unified/posts/?creator=4191892e-5421-4d78-98b7-a65f27a455c3&with=reposts":[{"data":[{"id":"019e79af-e741-7844-925b-1907007c86a6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4191892e-5421-4d78-98b7-a65f27a455c3","name":"Hugo Marques","slug":"hmarquesdesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1278777/avatar-N7GmoR5G1SvtyBhIm40j8KV3aouZTg.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cHShqDVEnixsSstLky9G","resolved":true,"title":"Copy text buttom","body":"$52","bodyJson":null,"introduction":" Customizable Copy to Clipboard Button","slug":"copy-text-buttom","author":{"framerUserId":"4191892e-5421-4d78-98b7-a65f27a455c3","name":"Hugo Marques","slug":"hmarquesdesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1278777/avatar-N7GmoR5G1SvtyBhIm40j8KV3aouZTg.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/cHShqDVEnixsSstLky9G/copy-text-buttom","metadata":{"tint":{"h":60,"s":26,"l":47},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-22T13:32:07.831Z","updatedAt":"2026-05-30T14:08:01.411Z","publishedAt":"2026-05-30T16:20:31.681Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Copy-to-clipboard-buttom-8PsT80.js@wJenscPSD00RVguUIuMj","previewUrl":"https://angelic-potential-160052.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"wJenscPSD00RVguUIuMj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T16:20:31.681Z","updatedAt":"2026-05-30T16:20:31.681Z"},{"id":"019e79af-c047-7322-a6e9-d1b923469901","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4191892e-5421-4d78-98b7-a65f27a455c3","name":"Hugo Marques","slug":"hmarquesdesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1278777/avatar-N7GmoR5G1SvtyBhIm40j8KV3aouZTg.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"IodjlVtqh85nHzp05yxS","resolved":true,"title":"Image comparison","body":"$53","bodyJson":null,"introduction":"Draggable before & after image slider","slug":"image-comparison","author":{"framerUserId":"4191892e-5421-4d78-98b7-a65f27a455c3","name":"Hugo Marques","slug":"hmarquesdesign","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1278777/avatar-N7GmoR5G1SvtyBhIm40j8KV3aouZTg.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/IodjlVtqh85nHzp05yxS/image-comparison-3VpD2rJjvvb1gwbCqgHkW6Lt1GzRiW","metadata":{"tint":{"h":60,"s":26,"l":47},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-19T11:54:17.119Z","updatedAt":"2026-05-30T14:07:32.718Z","publishedAt":"2026-05-30T16:20:21.703Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/ImageCompareViewer-2AvdtH.js@LqpbXDwMwBsGhjgZAZKH","previewUrl":"https://appreciative-devices-053627.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"LqpbXDwMwBsGhjgZAZKH","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":158,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-30T16:20:21.703Z","updatedAt":"2026-05-30T16:20:21.703Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]