PriceCard

One plan in a pricing table.

Import it from rei-kit: import { PriceCard } from 'rei-kit'

Open PriceCard in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { BaseButton, PriceCard } from 'rei-kit'
</script>

<template>
  <PriceCard
    name="Pro"
    price="₺49"
    period="/ month"
    :features="['Unlimited entries', 'Export', 'Sync']"
    recommended
    badge="Popular"
  >
    <template #action>
      <BaseButton block>Choose Pro</BaseButton>
    </template>
  </PriceCard>
</template>

Props

Props
Prop	Type	Required or default	What it is for
`name`	`string`	yes
`lead`	`string`
`price`	`string`	yes	Already formatted, or whatever stands in while there is no price.
`period`	`string`
`note`	`string`
`features`	`readonly string[]`	yes
`tone`	`'neutral' \| 'warm' \| 'cool'`	'neutral'
`badge`	`string`		Rides on the card's edge, e.g. "Recommended".
`chip`	`string`		Sits inside, e.g. "30% cheaper" or "Your plan".
`recommended`	`boolean`	false	Raises the card and lets the badge show.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub