259
A hero split down the middle: drag the handle and a messy expense spreadsheet turns into a clean, matched ledger row by row, while the headline flips from a week to an afternoon.
akahero·landing page·before after
Run this in any project set up for the shadcn CLI. It copies the Before & After Hero source into your components folder, so the code is yours to change.
npx shadcn@latest add https://devl.dev/r/before-after-hero.jsonImport it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.
import { BeforeAfterHero } from "@/components/before-after-hero";
export default function Page() {
return <BeforeAfterHero />;
}A free React block in the Heroes collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.
Read from the Before & After Hero source. Everything is optional unless it says required.
| Prop | Type | Default |
|---|---|---|
| eyebrow | string | — |
| headlinerequired | { lead: string; before: string; after: string } | — |
| description | ReactNode | — |
| ctarequired | { label: string; href?: string } | — |
| note | string | — |
| beforerequired | { label: string; file: string; editedBy: string; formula: string; status: string; sticky?: string } | — |
| afterrequired | { product: string; title: string; company: string; status: string } | — |
| linesrequired | ExpenseLine[] | — |
| currency | string | "USD" |
| defaultPosition | number | 55 |
| className | string | — |