PagePricing

Pricing page. Slots: toggle, plans, faq.

Jump to API reference

Import

Vue
import { UiPagePricing } from '@ziyarago/ui/vue'

Default

Billing toggle slot
Pricing plans slot
FAQ slot
Vue
<UiPagePricing>
  <template #toggle>Billing toggle slot</template>
  <template #plans>Pricing plans slot</template>
  <template #faq>FAQ slot</template>
</UiPagePricing>

API reference

Pricing template: billing-period toggle, plan cards and an FAQ.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
toggleMonthly/annual switch with a savings badge; Switch, Chip.
plansPlan cards, one marked featured; PricingCard.
faqQuestions accordion; Accordion.

Notes

  • Place inside AppShell; fill only the slots you need.