Before/After Comparison Cards

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature159.tsx instead.

Usage

The file also exports feature159Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature159, feature159Demo } from "@/components/blocks/feature/feature159";

export default function Page() {
  return <Feature159 {...feature159Demo} />;
}

Props

Types

interface Feature159Panel {
  label: string;
  heading: string;
  items: string[];
}

Behavior notes

• Fully static Server Component, no click-to-toggle state; both cards render at once, side by side on desktop and stacked on mobile.
• The before card uses a muted background and X icon bullets; the after card uses a primary-tinted background, a filled badge, and check-icon bullets, so the contrast reads at a glance.
• The centered arrow badge between the two cards is decorative (aria-hidden) and only shown at the md breakpoint and up.