content component

PricingPlanCard

Reusable pricing plan card component.

@wrnexus/ui 0.2.648 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<PricingPlanCard name="Starter" description="description" price="₹0" period="/month" featured="false" />

Legacy mount name: data-component="PricingPlanCard".

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`name`	`string`	Optional	`"Starter"`
`description`	`string`	Optional	`""`
`price`	`string`	Optional	`"₹0"`
`period`	`string`	Optional	`"/month"`
`featured`	`boolean`	Optional	`false`
`ctaLabel`	`string`	Optional	`"Choose plan"`
`ctaHref`	`string`	Optional	`"#"`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: components/PricingPlanCard.wrn

component PricingPlanCard {
  props {
    class = ""
    name = "Starter"
    description = ""
    price = "₹0"
    period = "/month"
    featured = false
    ctaLabel = "Choose plan"
    ctaHref = "#"
  }
  view {
    <article class="relative flex h-full flex-col rounded-3xl border p-6 shadow-sm {featured ? 'border-violet-500 bg-violet-50/50 ring-2 ring-violet-500 dark:bg-violet-950/20' : 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900'} {class}"><Badge data-show="featured" label="Most popular" variant="brand" /><h3 class="mt-4 text-xl font-bold">{name}</h3><p class="mt-2 text-sm text-slate-500">{description}</p><div class="mt-6"><span class="text-4xl font-black">{price}</span><span class="text-slate-500">{period}</span></div><div class="mt-6 flex-1"><slot /></div><a href="{ctaHref}" class="mt-6 inline-flex min-h-12 items-center justify-center rounded-xl font-semibold transition {featured ? 'bg-violet-600 text-white hover:bg-violet-700' : 'border border-slate-300 hover:bg-slate-50 dark:border-slate-700'}">{ctaLabel}</a></article>
  }
}