Pricing & Conversion

BeforeAfter

On the left: chaos. On the right: us.

Side-by-side comparison. The left panel is muted + struck-through; the right glows. Pass `before`/`after` arrays for the lazy version, or compose subcomponents for full control.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/before-after.json

Examples

Quick form

Before

14 tabs open
3 hours of meetings about meetings
Vibes-based prioritization

with Synthetica →

After

One pane of glass
Async by default
Outcome-driven

<BeforeAfter
  brand="Synthetica"
  before={[
    "14 tabs open",
    "3 hours of meetings about meetings",
    "Vibes-based prioritization",
  ]}
  after={[
    "One pane of glass",
    "Async by default",
    "Outcome-driven",
  ]}
/>

Props

Prop	Type	Default	Description
before	Snippet[]	-	Quick-form before items.
after	Snippet[]	-	Quick-form after items.
brand	Snippet	-	Name shown over the arrow.
beforeLabel	Snippet	"Before"	Override label.
afterLabel	Snippet	"After"	Override label.

BeforeAfter.Before

Prop	Type	Default	Description
label	Snippet	-	Tag label.

BeforeAfter.Arrow

Prop	Type	Default	Description
brand	Snippet	-	Brand label.

BeforeAfter.After

Prop	Type	Default	Description
label	Snippet	-	Tag label.

Next WaitlistForm ] →