Before / After Slider

Installation

pnpm dlx shadcn@latest add @cleverui/trade-before-after

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { TradeBeforeAfter } from '@/components/blocks/trade-before-after'

Exampletsx

import { TradeBeforeAfter } from '@/components/blocks/trade-before-after'

/** Structural bathroom “before”, tired tiles, old fixtures, dense clutter */
function BeforeScene() {
  return (
    <div className="bg-muted absolute inset-0 overflow-hidden">
      {/* dense tile suggestion via hairline grid of muted blocks */}
      <div
        aria-hidden="true"
        className="absolute inset-0 grid grid-cols-8 grid-rows-5 gap-px p-px opacity-50"
      >
        {Array.from({ length: 40 }).map((_, i) => (
          <div key={i} className="bg-background/40 border-border/40 border" />
        ))}
      </div>
      <div className="relative flex h-full flex-col justify-end gap-3 p-6 sm:p-8">
        <div className="bg-background/60 border-border/50 h-16 w-full max-w-[55%] rounded-lg border" />
        <div className="flex gap-2">
          <div className="bg-background/50 border-border/40 h-10 w-10 rounded-md border" />
          <div className="bg-background/50 border-border/40 h-10 w-14 rounded-md border" />
          <div className="bg-background/50 border-border/40 h-10 w-10 rounded-md border" />
        </div>
        <div className="bg-secondary/80 border-border/50 h-3 w-2/3 rounded-full border" />
        <div className="bg-secondary/60 border-border/40 h-3 w-1/2 rounded-full border" />
      </div>
    </div>
  )
}

/** Structural bathroom “after”, open layout, fewer blocks, clean lines */
function AfterScene() {
  return (
    <div className="bg-background absolute inset-0 overflow-hidden">
      <div
        aria-hidden="true"
        className="absolute inset-0 grid grid-cols-5 grid-rows-3 gap-px p-px opacity-30"
      >
        {Array.from({ length: 15 }).map((_, i) => (
          <div key={i} className="bg-muted/60 border-border/30 border" />
        ))}
      </div>
      <div className="relative flex h-full flex-col justify-end gap-4 p-6 sm:p-8">
        <div className="bg-muted border-border/60 h-20 w-full max-w-[70%] rounded-lg border" />
        <div className="flex items-end gap-3">
          <div className="bg-muted border-border/50 h-12 w-24 rounded-lg border" />
          <div className="bg-muted/80 border-border/40 h-8 w-8 rounded-full border" />
        </div>
        <div className="bg-muted border-border/50 h-2.5 w-1/3 rounded-full border" />
      </div>
    </div>
  )
}

export default function TradeBeforeAfterDemo() {
  return (
    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6">
      <TradeBeforeAfter
        heading="Ensuite remodel, Fitzroy North"
        before={<BeforeScene />}
        after={<AfterScene />}
        beforeLabel="Day 1"
        afterLabel="Week 3"
        caption="Full wet-area rebuild: new waterproofing, large-format porcelain, wall-hung vanity, and a frameless shower screen. Job #FN-2481."
      />
    </div>
  )
}

API reference

TradeBeforeAfter accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	–	–
`before`*	`React.ReactNode`	–	before panel, any node; demo uses a structural placeholder scene
`after`*	`React.ReactNode`	–	–
`beforeLabel`	`string`	`'Before'`	–
`afterLabel`	`string`	`'After'`	–
`caption`	`string`	–	job summary line under the frame

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Brands We Service

A brands-we-service wall for React, text-only brand chips grouped by appliance, parts-stocked tags, and a call fallback. Tailwind tokens, zero logo assets.

Credentials Bar

The trust strip that closes trade jobs, license number, insurance, years on the tools, and review score in one sturdy row. Mono where it's data, bold where it's pride.

Emergency Bar

A 24/7 emergency strip, a lamp that pulses once, the phone number set huge for wet thumbs, and an average-callout stat that counts up. Urgency without panic, dependable at 2am.

Workmanship Guarantee

The guarantee set large and plain, one promise sentence in display type, terms in honest small print at a readable size, and the license and insurer line in mono. A handshake, not a legal wall.

Job Timeline

Renovation job timeline React block, week-by-week phases on a vertical spine with mono date windows and heads-up disruption notes. Tailwind, plain-spoken.

Payment Plans

Payment plan explainer React block for trades, weekly amounts in mono, a worked job example ledger, and honest fine print. Tailwind tokens, no BNPL branding.

Frequently asked questions

How do I install the Before / After Slider component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/trade-before-after`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Before / After Slider require?

Before / After Slider uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Before / After Slider to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code