vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-pricing-tiers

pricingglassmorphismmotion on file

A client-side React and Next.js pricing grid shipped as a shadcn registry component. It renders plan data into glass-styled cards with badges, feature lists, and linked call-to-action buttons, and depends on Tailwind theme tokens, Lucide icons, Next Link, a shadcn Button, and the shared cn utility.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of ruixen-pricing-tiers at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-pricing-tiers at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of ruixen-pricing-tiers at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for ruixen-pricing-tiers
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate2
Axe minor0
Gzip marginal52.4 KB (117.9 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1m 15s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/components/ruixen/pricing-tiers.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A solid starting point for a conventional pricing page, with clean data props and responsive behavior. It needs a shadcn-style setup: the bare build cannot resolve the shared cn utility. Expect to replace placeholder links and adjust the grid for four plans.

Use it if

  • You already use Next.js, Tailwind, and shadcn conventions and want a data-driven pricing section.
  • Your plans share one call-to-action pattern and mostly differ by label, price, description, badge, and features.
  • You want a responsive card grid that can be restyled through existing theme tokens.

Skip it if

  • You need a framework-neutral component without Next Link or path-alias imports.
  • Your pricing flow needs billing toggles, checkout wiring, feature comparison logic, or distinct actions per plan.
  • You need an even four-column desktop layout without changing the fixed three-column grid.
  • Your app does not use Tailwind or shadcn-style theme tokens and you want a drop-in isolated widget.

Install

Installation record for ruixen-pricing-tiers
Declared dependencieslucide-react, radix-ui, clsx, tailwind-merge
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

For a non-shadcn project, add Tailwind with the referenced semantic color and border tokens, install Lucide React, provide a cn class-merging helper, and create a compatible Button with outline and asChild support. Configure the at-sign path alias, and either use Next Link or replace it with your router's link component.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/ruixenui/ruixen.com
License
MIT
Record published
2026-08-16

Alternatives

Other published entries for the pricing pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.