26:I[422844,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"ThemeToggle"] 27:I[276592,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"AccountMenu"] 28:I[32297,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"MobileNav"] 29:I[505014,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"default"] 2a:I[729657,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"FavoriteButton"] 2b:I[534073,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"InstallCommand"] 2c:I[868814,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"BlockPreview"] 31:I[713354,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"Toaster"] 1b:["$","$L1a","/themes",{"href":"/themes","children":"Themes","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1c:["$","$L1a","/styles",{"href":"/styles","children":"Styles","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1d:["$","$L1a","/components",{"href":"/components","children":"Components","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1e:["$","$L1a","/docs",{"href":"/docs","children":"Docs","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1f:["$","$L1a","/changelog",{"href":"/changelog","children":"Changelog","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 20:["$","$L1a","/#pricing",{"href":"/#pricing","children":"Pricing","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 21:["$","div",null,{"className":"ml-auto flex items-center gap-1","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L1a",null,{"href":"/blocks","children":"Browse blocks","data-slot":"button","data-variant":"default","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 max-sm:hidden","ref":null}],["$","$L28",null,{"title":"lib","links":[{"href":"/blocks","label":"Blocks"},{"href":"/examples","label":"Examples"},{"href":"/builder","label":"Builder"},{"href":"/themes","label":"Themes"},{"href":"/styles","label":"Styles"},{"href":"/components","label":"Components"},{"href":"/docs","label":"Docs"},{"href":"/changelog","label":"Changelog"},{"href":"/#pricing","label":"Pricing"}],"primary":{"label":"Browse blocks","href":"/blocks"},"secondary":{"label":"Open the builder","href":"/builder"},"className":"md:inline-flex lg:hidden"}]]}] 22:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blocks\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gallery\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/gallery\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gallery 05: Before and after\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/gallery/gallery-05\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Gallery 05: Before and after\",\"description\":\"A comparison slider between two photos, usable with the mouse, touch and keyboard.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/gallery/gallery-05\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T54a,

import { Gallery05 } from "@/components/gallery-05"

export default function Page() {
  return <Gallery05 />
}

2e:Td38,// @lib/gallery-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog "use client" import * as React from "react" import { ChevronsLeftRight } from "lucide-react" // Demo photos from Unsplash (free to use under the Unsplash license). Replace with your before and after shots. const photo = (id: string, width: number) => `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop` const before = "1595526114035-0d45ed16cfbf" const after = "1631049307264-da0ec9d70304" export function Gallery05() { const [position, setPosition] = React.useState(50) const frame = React.useRef(null) const moveTo = (clientX: number) => { const rect = frame.current?.getBoundingClientRect() if (!rect) return setPosition(Math.min(100, Math.max(0, ((clientX - rect.left) / rect.width) * 100))) } return (

Room 204, renovated

Drag the handle to compare before and after the works.

{ event.currentTarget.setPointerCapture(event.pointerId) moveTo(event.clientX) }} onPointerMove={(event) => event.buttons === 1 && moveTo(event.clientX)} > {/* eslint-disable-next-line @next/next/no-img-element */} The room after the works

{/* eslint-disable-next-line @next/next/no-img-element */} The room before the works

Before After

{ if (event.key === "ArrowLeft") setPosition((value) => Math.max(0, value - 5)) if (event.key === "ArrowRight") setPosition((value) => Math.min(100, value + 5)) }} className="absolute top-1/2 left-1/2 flex size-10 -translate-1/2 cursor-ew-resize items-center justify-center rounded-full border bg-background shadow-lg outline-none focus-visible:ring-3 focus-visible:ring-ring/50" >

) } 2f:T726b,

// @lib/gallery-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
"use client"

import * as React from "react"
import { ChevronsLeftRight } from "lucide-react"

// Demo photos from Unsplash (free to use under the Unsplash license). Replace with your before and after shots.
const photo = (id: string, width: number) => `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop`

const before = "1595526114035-0d45ed16cfbf"
const after = "1631049307264-da0ec9d70304"

export function Gallery05() {
  const [position, setPosition] = React.useState(50)
  const frame = React.useRef<HTMLDivElement>(null)

  const moveTo = (clientX: number) => {
    const rect = frame.current?.getBoundingClientRect()
    if (!rect) return
    setPosition(Math.min(100, Math.max(0, ((clientX - rect.left) / rect.width) * 100)))
  }

  return (
    <section className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-16 sm:px-6">
      <div className="flex flex-col gap-2 text-center">
        <h2 className="font-heading text-3xl font-semibold tracking-tight">Room 204, renovated</h2>
        <p className="text-muted-foreground">Drag the handle to compare before and after the works.</p>
      </div>
      <div
        ref={frame}
        className="relative aspect-[16/10] touch-none overflow-hidden rounded-2xl bg-muted select-none"
        onPointerDown={(event) => {
          event.currentTarget.setPointerCapture(event.pointerId)
          moveTo(event.clientX)
        }}
        onPointerMove={(event) => event.buttons === 1 && moveTo(event.clientX)}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={photo(after, 1600)} alt="The room after the works" draggable={false} className="absolute inset-0 size-full object-cover" />
        <div className="absolute inset-0" style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={photo(before, 1600)} alt="The room before the works" draggable={false} className="size-full object-cover" />
        </div>
        <span className="absolute top-3 left-3 rounded-md bg-background/85 px-2 py-1 text-xs font-medium backdrop-blur">Before</span>
        <span className="absolute top-3 right-3 rounded-md bg-background/85 px-2 py-1 text-xs font-medium backdrop-blur">After</span>
        <div className="absolute inset-y-0 w-0.5 -translate-x-1/2 bg-background" style={{ left: `${position}%` }}>
          <div
            role="slider"
            tabIndex={0}
            aria-label="Compare before and after"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(position)}
            aria-valuetext={`${Math.round(position)}% before`}
            onKeyDown={(event) => {
              if (event.key === "ArrowLeft") setPosition((value) => Math.max(0, value - 5))
              if (event.key === "ArrowRight") setPosition((value) => Math.min(100, value + 5))
            }}
            className="absolute top-1/2 left-1/2 flex size-10 -translate-1/2 cursor-ew-resize items-center justify-center rounded-full border bg-background shadow-lg outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
          >
            <ChevronsLeftRight className="size-4" />
          </div>
        </div>
      </div>
    </section>
  )
}

23:["$","main",null,{"className":"mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 px-4 py-10 sm:px-6","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L1a",null,{"href":"/blocks","children":"Blocks","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","ref":null}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","$L29",null,{"ref":"$undefined","icon":{"name":"chevron-right","size":24,"node":[["path",{"d":"m9 18 6-6-6-6","key":"mthhwq"}]]},"className":"$undefined"}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L1a",null,{"href":"/blocks/gallery","children":"Gallery","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","ref":null}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","$L29",null,{"ref":"$undefined","icon":"$23:props:children:0:props:children:props:children:1:props:children:props:icon","className":"$undefined"}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Gallery 05"}]}]]}]}],["$","header",null,{"className":"flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between","children":[["$","div",null,{"className":"flex max-w-3xl flex-col gap-3","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h1",null,{"className":"font-heading text-3xl font-semibold tracking-tight sm:text-4xl","children":"Before and after"}],["$","span",null,{"data-slot":"badge","data-variant":"outline","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground","children":"Free"}]]}],["$","p",null,{"className":"text-lg text-pretty text-muted-foreground","children":"A comparison slider between two photos, usable with the mouse, touch and keyboard."}],["$","p",null,{"className":"font-mono text-xs text-muted-foreground","children":["gallery-05"," · v","1.0.0"," · ","Gallery"," block ",5," of ",10]}]]}],["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","$L2a",null,{"name":"gallery-05","withLabel":true}],["$","$L2b",null,{"name":"gallery-05","className":"w-full sm:w-auto sm:min-w-80"}]]}]]}],["$","$L2c",null,{"item":{"name":"gallery-05","type":"registry:block","title":"Gallery 05: Before and after","description":"A comparison slider between two photos, usable with the mouse, touch and keyboard.","categories":["marketing","gallery"],"tier":"free","version":"1.0.0","defaultTier":"free"},"files":[{"path":"app/page.tsx","code":"import { Gallery05 } from \"@/components/gallery-05\"\n\nexport default function Page() {\n return \n}\n","html":"$2d"},{"path":"components/gallery-05.tsx","code":"$2e","html":"$2f"}],"plans":[{"name":"Hobby","description":"Every free block, to build on your own.","price":0,"priceNote":"Just for you","features":["All free blocks","shadcn CLI and MCP","Add to favorites"],"cta":{"label":"Join now","href":"/sign-up"}},{"name":"Pro","description":"Every block, for one developer.","price":147,"originalPrice":249,"priceNote":"One-time payment","featuresIntro":"Everything in Hobby, plus:","features":["All Pro blocks","Lifetime updates","Commercial license","Priority support"],"cta":{"label":"Join the waitlist","href":"#"},"highlighted":true},{"name":"Team","description":"Every block, for a whole team.","price":497,"originalPrice":899,"priceNote":"One-time payment","featuresIntro":"Everything in Pro, plus:","features":["Up to 10 members","Team workspace","Role-based permissions"],"cta":{"label":"Join the waitlist","href":"#"}}],"height":640,"hideHeader":true}],"$L30"]}] 24:["$","$L31",null,{"position":"bottom-right"}] 25:["$","footer",null,{"className":"border-t","children":["$","div",null,{"className":"mx-auto grid max-w-6xl grid-cols-2 gap-8 px-4 py-12 text-sm sm:px-6 md:grid-cols-[2fr_1fr_1fr_1fr]","children":[["$","div",null,{"className":"col-span-2 flex max-w-xs flex-col gap-2 md:col-span-1","children":[["$","span",null,{"className":"font-heading text-base font-semibold","children":"lib"}],["$","p",null,{"className":"text-muted-foreground","children":"shadcn/ui blocks for every site and app. Built on shadcn/ui and Radix, not affiliated with shadcn."}]]}],[["$","nav","Product",{"aria-label":"Product","className":"flex flex-col gap-2.5","children":[["$","span",null,{"className":"font-medium","children":"Product"}],[["$","$L1a","/blocks",{"href":"/blocks","className":"text-muted-foreground hover:text-foreground","children":"Blocks"}],["$","$L1a","/components",{"href":"/components","className":"text-muted-foreground hover:text-foreground","children":"Components"}],["$","$L1a","/examples",{"href":"/examples","className":"text-muted-foreground hover:text-foreground","children":"Examples"}],["$","$L1a","/builder",{"href":"/builder","className":"text-muted-foreground hover:text-foreground","children":"Page builder"}],["$","$L1a","/themes",{"href":"/themes","className":"text-muted-foreground hover:text-foreground","children":"Themes"}],["$","$L1a","/#pricing",{"href":"/#pricing","className":"text-muted-foreground hover:text-foreground","children":"Pricing"}]]]}],["$","nav","Build",{"aria-label":"Build","className":"flex flex-col gap-2.5","children":[["$","span",null,{"className":"font-medium","children":"Build"}],[["$","$L1a","/for/websites",{"href":"/for/websites","className":"text-muted-foreground hover:text-foreground","children":"Websites"}],["$","$L1a","/for/landing-pages",{"href":"/for/landing-pages","className":"text-muted-foreground hover:text-foreground","children":"Landing pages"}],["$","$L1a","/for/dashboards",{"href":"/for/dashboards","className":"text-muted-foreground hover:text-foreground","children":"Dashboards"}],["$","$L1a","/for/web-apps",{"href":"/for/web-apps","className":"text-muted-foreground hover:text-foreground","children":"Web apps"}],["$","$L1a","/for/internal-tools",{"href":"/for/internal-tools","className":"text-muted-foreground hover:text-foreground","children":"Internal tools"}],["$","$L1a","/for/ai-apps",{"href":"/for/ai-apps","className":"text-muted-foreground hover:text-foreground","children":"AI apps"}]]]}],["$","nav","Developers",{"aria-label":"Developers","className":"flex flex-col gap-2.5","children":[["$","span",null,{"className":"font-medium","children":"Developers"}],[["$","$L1a","/docs",{"href":"/docs","className":"text-muted-foreground hover:text-foreground","children":"Docs"}],["$","$L1a","/docs#mcp",{"href":"/docs#mcp","className":"text-muted-foreground hover:text-foreground","children":"MCP server"}],["$","$L1a","/changelog",{"href":"/changelog","className":"text-muted-foreground hover:text-foreground","children":"Changelog"}],["$","$L1a","/llms.txt",{"href":"/llms.txt","className":"text-muted-foreground hover:text-foreground","children":"llms.txt"}],["$","$L1a","/r/registry.json",{"href":"/r/registry.json","className":"text-muted-foreground hover:text-foreground","children":"Registry JSON"}]]]}]]]}]}]

What it installs

Versions

More gallery blocks