Hanging Price Tags React component
Plans as quiet dark tags hanging from a hairline rail: they swing like real pendulums when the pointer brushes past, the chosen tag lights up and drops lower on its string, and its details appear underneath.
About the Hanging Price Tags component
Hanging Price Tags gives a pricing section some personality without raising its voice: each plan is a quiet dark tag on a string hanging from a hairline rail, and they swing like real pendulums when your pointer brushes past them.
Picking a tag lights it up, drops it lower on its string with a good swing and shows that plan's features and button underneath. The card itself never changes size.
When to use it
Use it for software, indie products and shops that want one playful moment on an otherwise calm pricing page.
It suits up to about five plans with short names; for long feature comparisons, use a pricing table.
Installation
Add the Hanging Price Tags component to your project with the shadcn CLI. It lands in components/hanging-price-tags.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/hanging-price-tagsOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<HangingPriceTags /> accepts 9 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Pick a tag" |
| subtitle | string | "Brush past them, they swing" |
| tags | { name: string; price: number; period?: string; color?: string; ink?: string; features: string[]; cta?: string }[] | DEFAULT_TAGS |
| defaultIndex Index of the tag picked first. | number | 1 |
| currency | string | "$" |
| swing How much the tags swing when the pointer brushes them. | number | 1 |
| accent Colour of the picked tag's string and pin. | string | — |
| onSelect | (tag: PriceTag) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Pick a tag"
- subtitlestringDefault: "Brush past them, they swing"
- tags{ name: string; price: number; period?: string; color?: string; ink?: string; features: string[]; cta?: string }[]Default: DEFAULT_TAGS
- defaultIndex
Index of the tag picked first.
numberDefault: 1 - currencystringDefault: "$"
- swing
How much the tags swing when the pointer brushes them.
numberDefault: 1 - accent
Colour of the picked tag's string and pin.
string - onSelect(tag: PriceTag) => void
npm dependencies
Installed for you by the shadcn CLI.
Hanging Price Tags FAQ
- Can I change the colours?
- accent sets the colour of the picked string and pin. Each tag also takes color and ink for its fill and text while it is picked.
- How do I make them swing more or less?
- swing multiplies every push; 0.5 is calmer and 1.5 livelier.
- Does it work on phones?
- Yes, tapping a tag selects it with a swing. Brushing past only applies to a mouse.
- What about reduced motion?
- The tags hang still; selecting one still lengthens its string and updates the details.
