89 Pro components and page blocks

Get Pro
uibrik

Pricing Glow

Pro

Preview

Customize

Three
Yearly
Glow colours
Loop duration9.0s
Glow size120px
Glow intensity1.00
Edge line1.00
Halo1.00
Waves1.00
Wave count30
Wave height33px
Wave speed1.0
Follow6

Installation

Pro

Pricing Glow is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/pricing-glow

Usage

import { PricingGlow } from "@/components/uibrik/pricing-glow/pricing-glow";​const plans = [  {    name: "Starter",    blurb: "For trying things out.",    monthly: 0,    yearly: 0,    features: ["Core components", "Personal projects", "Community support"],    cta: "Start free",  },  {    name: "Pro",    blurb: "For designers who ship every week.",    monthly: 24,    yearly: 19,    features: ["Pro components and blocks", "Figma source files", "Commercial license"],    cta: "Get Pro",    featured: true,  },  // …1 more];​<PricingGlow  tiers="3"  defaultBilling="yearly"  showSaving  glow  glowColors={["#7c5cff", "#38bdf8", "#f472b6", "#fbbf24"]}  glowLoop  glowLoopDuration={9}  glowSize={120}  glowIntensity={1}  glowLine={1}  glowHalo={1}  glowWaves={1}  glowWaveCount={30}  glowWaveHeight={33}  glowSpeed={1}  glowFollow={6}  currency="USD"  locale="en-US"  plans={plans}  onSelect={(plan, billing) => {}}/>

Props

PricingGlow
tiers
Type "2" | "3"
"3"
How many plans to show.
defaultBilling
Type "monthly" | "yearly"
"yearly"
Billing period on mount.
showSaving
Type boolean
true
Show the yearly saving beside "Yearly".
glow
Type boolean
true
Light the recommended plan's edge, with a halo outside and waves of light inside.
glowColors
Type string[]
["#7c5cff","#38bdf8","#f472b6","#fbbf24"]
Colours of that light, spread round the card.
glowLoop
Type boolean
true
Off hover, the light travels round the card's edge in a loop. On hover it follows the pointer either way.
glowLoopDuration
Type number
9
Seconds for one lap of the loop.
glowTrigger
Type "hover" | "always"
"hover"
With the loop off: On hover lights only under the pointer; Always also rests at the top edge.
glowSize
Type number
120
Radius of the lit area round the light.
glowIntensity
Type number
1
Overall brightness of the glow.
glowLine
Type number
1
Strength of the crisp line on the border.
glowHalo
Type number
1
Strength of the soft halo outside the card.
glowWaves
Type number
1
Strength of the waves of light inside the card.
glowWaveCount
Type number
30
How many waves run round the card. More packs them closer together.
glowWaveHeight
Type number
33
How far the waves reach into the card.
glowSpeed
Type number
1
How fast the waves drift and swell. 0 holds them still.
glowFollow
Type number
6
How closely the light follows the pointer, from lazy (1) to tight (30).
currency
Type string
"USD"
ISO currency code for the prices.
locale
Type string
"en-US"
Locale for currency symbols, grouping and decimals.
plans
Type Plan[]
–
Plans in tier order. Each lists only the features it adds to the one before; the one marked featured gets the glow.
onSelect
Type (plan: Plan, billing: Billing) => void
–
Called when a plan's button is pressed.
className
Type string
–
Classes for the section.