Before/After Card
A side-by-side image card for showing before and after results, with badges and a customizable footer.
Demo
Before
After
Sarah M.Lost 28 lbs
Installation
pnpm dlx shadcn@latest add @turbopills-ui/before-after-cardnpx shadcn@latest add @turbopills-ui/before-after-cardyarn dlx shadcn@latest add @turbopills-ui/before-after-cardbunx shadcn@latest add @turbopills-ui/before-after-cardUsage
tsx
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Required. Name displayed in the card footer. |
beforeImage | string? | — | URL for the "before" image. Falls back to a colored placeholder. |
afterImage | string? | — | URL for the "after" image. Falls back to a colored placeholder. |
badgeContent | ReactNode? | <Check /> Lost 28 lbs | Custom content for the badge in the footer. |
className | string? | — | Additional CSS classes for the card wrapper. |