Marketing & Social Proof

Before/After Results Panel

Static side-by-side before/after metric comparison panel, not an image slider.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add results-before-after-panel

Built for astro.

Full docs for Before/After Results Panel →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.0

Before/After Results Panel

Placeholder

Sample before / after

Before

After

XX Sample metric one

XX% Sample metric two

XX days Sample metric three

Props

Name	Type	Required	Default
eyebrow	string	No
title	string	No
headingLevel	1 \| 2 \| 3 \| 4 \| 5 \| 6	No	2
beforeLabel	string	No	'Before'
afterLabel	string	No	'After'
metrics	Array<{ label: string; before: string; after: string }>	Yes
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/results-before-after-panel/ResultsBeforeAfterPanel.astro

Using the Before/After Results Panel component

Install it with velocityx add results-before-after-panel. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Before/After Results Panel

Sample before / after

Props

File this creates

Using the Before/After Results Panel component

Related components