Highlight Sweep Pricing Table
A free animated pricing comparison table for React and Next.js: a spring highlight frame sweeps between plan columns as you hover or focus.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 2 runtime packages
Highlight Sweep Pricing Table is a free pricing comparison table for Next.js and React, built with Motion and styled with Tailwind. It renders a real table of 2 to 4 plan columns against feature rows, with one shared highlight frame, a rounded border and surface tint, resting behind the recommended column. Move the pointer or keyboard focus to another column and the frame sweeps across on a snappy spring, then springs back to the recommended plan on leave or blur, while the highlighted column's price scales up subtly.
The frame is decorative and lives in an absolutely positioned overlay behind the table, so it moves transform-only and never shifts layout. The table keeps full semantics: a caption, scope attributes on plan and feature headers, and boolean cells that pair an icon or dash with visually hidden Included or Not included text. Feature rows enter once on first view with a 40ms stagger, CTAs are real anchors with visible focus rings, the recommended plan carries a visible badge, and below the md breakpoint the table scrolls horizontally inside a keyboard-focusable labelled region. With reduced motion enabled there is no entrance or scale emphasis and the frame jumps instantly between columns.
| Features | Starter$12/mo | RecommendedGrowth$29/mo | Scale$79/mo |
|---|---|---|---|
| Projects | 3 | Unlimited | Unlimited |
| Team members | 1 | 10 | Unlimited |
| Analytics | Basic | Advanced | Advanced |
| Priority support | Not included | Included | Included |
| Custom domain | Included | Included | Included |
| SSO and audit logs | Not included | Not included | Included |
| Choose a plan | Start free | Choose Growth | Talk to sales |
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/pricing-highlight-sweepUsage
import { PricingHighlightSweep } from "@/components/pricing-highlight-sweep";
export default function Page() {
return (
<PricingHighlightSweep
plans={[
{
name: "Starter",
price: 12,
period: "/mo",
cta: { label: "Start free", href: "/signup" },
},
{
name: "Growth",
price: 29,
period: "/mo",
cta: { label: "Choose Growth", href: "/signup" },
recommended: true,
},
]}
rows={[
{ label: "Projects", values: ["3", "Unlimited"] },
{ label: "Priority support", values: [false, true] },
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingHighlightPlan[] | required | The 2 to 4 plan columns, in display order. Each plan carries name, price, an optional period suffix, a cta anchor and an optional recommended flag that anchors the highlight frame and badge. |
| rows | PricingHighlightRow[] | required | Feature rows. Each row has a label and one value per plan, aligned by index: true renders a check with hidden Included text, false a dash with hidden Not included text, and a string renders as-is. |
| currency | string | "$" | Prefix symbol rendered before every price. |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Highlight Sweep Pricing Table declares no tokens of its own. The table, badge and CTAs paint with the global background, foreground, muted, border and ring semantic tokens, and the highlight frame is a translucent foreground tint with a ring-coloured border, so retheming those tokens rethemes the whole section. Adjust width and spacing from the className prop:
<PricingHighlightSweep
plans={plans}
rows={rows}
currency="£"
className="mx-auto max-w-5xl"
/>
/* retheme the section via the semantic tokens */
:root {
--background: oklch(0.16 0.02 280);
--foreground: oklch(0.97 0.01 280);
--ring: oklch(0.72 0.15 280);
}Frequently asked questions
- Is Highlight Sweep Pricing Table free for commercial use?
- Yes. Highlight Sweep Pricing Table is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the pricing comparison table accessible?
- Yes. It is a real table with a caption, scope attributes on plan and feature headers, and boolean cells that pair an aria-hidden icon or dash with visually hidden Included or Not included text. The highlight frame is decorative, aria-hidden and moves transform-only in an overlay, so it never shifts layout or blocks reading. CTAs are real anchors with visible focus rings, the recommended plan is marked with a visible badge rather than colour alone, and the horizontal scroll region below md is keyboard focusable with an accessible name. With reduced motion enabled the frame jumps instantly and there is no entrance or scale animation.
- How does the highlight frame follow hover and focus?
- The frame is a single Motion layoutId element rendered behind whichever column is active. At rest that is the plan marked recommended; on devices with a fine pointer it follows the hovered column, and on any device it follows the column that contains keyboard focus, springing back when hover or focus leaves. Because the overlay mirrors the table's fixed column template, the frame aligns to its column without measurement and the sweep is transform-only.