Pricing · Pixel HD component · LumeSec Elements

<hf-pricing>· loading

Tryswitch between Monthly and Yearly.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-pricing>

Props

planremounts

monthlyremounts

yearlyremounts

periodremounts

currencyremounts

featuresremounts

<HfPricing
  plan="Pro"
  monthly={20}
  yearly={16}
  period="yearly"
  currency="€"
  features="Ultracode and multi-agent workflows|Priority access at peak times|Projects with shared context"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-pricing

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-pricing.json

Usage

import { HfPricing } from "@/components/lumesec/hf-pricing";

export function Example() {
  return (
    <HfPricing plan="Pro" monthly={20} yearly={16} />
  );
}

Behaviour

Switching billing period rolls the price to the new number while a bright edge wipes through the dot grid behind it.

API reference

Attributes

planReact propplanTypestringDefaultPro

Plan name above the price.

monthlyReact propmonthlyTypenumberDefault20

Price per month on monthly billing.

yearlyReact propyearlyTypenumberDefault16

Price per month on yearly billing. The note under the price shows twelve times this value.

periodReact propperiodTypemonthly | yearlyDefaultyearly

Initial billing period. Any value other than monthly selects yearly.

currencyReact propcurrencyTypestringDefault€

Currency symbol placed before the price.

featuresReact propfeaturesTypestringDefaultUltracode and multi-agent workflows|Priority access at peak times|Projects with shared context

Feature list, separated by |.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

changeReact proponChangeDetail{ period: "monthly" | "yearly", price: number }

Fires when the user switches billing period. price is the per-month price for that period.

Properties

price (read-only)Typenumber

Per-month price for the selected period, read from monthly or yearly.

Accessibility

The billing toggle is a role="radiogroup" labelled Billing period, with two native buttons carrying role="radio" and aria-checked. Both buttons are tab stops; there is no arrow-key handling.
The price is text in the monospace font with tabular figures. The price row (rolling price, / month and the dot canvas) is aria-hidden; a visually hidden aria-live="polite" region carries the price and period instead, for example €16 per month, billed yearly.
Reduced motion: the price and the billing note swap without rolling and the grid shows no wipe.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --card, --foreground, --lumesec, --lumesec-success, --muted and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono, --ui-muted, --ui-ok, --ui-surface and --ui-track.

Notes

The −20% badge on Yearly is fixed text and is not computed from monthly and yearly.
The call to action is a nested <hf-button> labelled Start free trial with no handler; its clicks bubble out of the host. hf-pricing imports hf-button itself.
Attributes are read on first connect and are not observed; monthly, yearly and currency are re-read when the period changes.

<hf-button>

Buttonhf-button

<hf-switch>

Switchhf-switch

<hf-segmented>

Segmented controlhf-segmented

<hf-input>

Text fieldhf-input

Related