Before After Strip

Installation

pnpm dlx shadcn@latest add @cleverui/feature-before-after-strip

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

Usage

tsx

import { FeatureBeforeAfterStrip } from '@/components/blocks/feature-before-after-strip'

Exampletsx

import { FeatureBeforeAfterStrip } from '@/components/blocks/feature-before-after-strip'

export default function FeatureBeforeAfterStripDemo() {
  return (
    <FeatureBeforeAfterStrip
      eyebrow="Why teams switch"
      heading="Stop piloting spreadsheets. Ship the runbook."
      beforeLabel="The old way"
      afterLabel="With Fieldnote"
      rows={[
        {
          before: 'Status buried in three Slack threads',
          after: 'One live runbook, always current',
        },
        {
          before: 'Handoffs die in email chains',
          after: 'Stages advance when work is done',
        },
        {
          before: 'Audit trail is a folder of PDFs',
          after: 'Every step logged and replayable',
        },
        {
          before: 'Onboarding takes a full quarter',
          after: 'New hires ship in week two',
        },
      ]}
    />
  )
}

API reference

FeatureBeforeAfterStrip accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	–
`heading`	`string`	–	optional, the strip can lead a section or sit inside one
`beforeLabel`	`string`	`'The old way'`	–
`afterLabel`*	`string`	–	e.g. 'With Fieldnote'
`rows`*	`FeatureBeforeAfterStripRow[]`	–	3–5 mirrored pairs; keep each line under ~60 chars

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

Referenced types

Typestsx

export interface FeatureBeforeAfterStripRow {
  before: string
  after: string
}

Related components

Accordion Stage

Feature accordion synced to a stage, expanding a row swaps the token-built preview beside it, one open at a time, height animated without jank.

Ledger List Features

Features as a ruled ledger, mono index, name, and one-line value statement per row with a right-aligned shipped/beta status. Dense, scannable, no grid.

Metrics Fusion Features

Feature rows fused with proof, every capability carries its own counting mini-stat in tabular figures, so the claim and its evidence share one line.

Tabbed Feature Stage

Feature tabs with a live stage, switching tabs morphs a token-built product panel between states, with the active tab carried by a sliding thumb.

Bento Feature Grid

A bento grid drawn like a drafting table, tiles share single hairline seams instead of floating as glow cards. Staggered reveal, quiet hover shift, wide and tall spans.

Callout Figure Features

Annotated product figure for React marketing pages, numbered leader lines tie a token-built Tailwind mock to margin notes, so every feature claim points at the pixel it explains.

Frequently asked questions

How do I install the Before After Strip component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/feature-before-after-strip`. 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 Strip require?

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

Can I theme Before After Strip 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