VISION  |  Docs

Pricing Cards

The Pricing Cards components helps you to simply create a beautiful pricing card for your pages.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Default Pricing Card

// Vision UI Dashboard React examples import DefaultPricingCard from "examples/Cards/PricingCards/DefaultPricingCard";
premium

$

89

10 team members

40GB Cloud storage

Integration help

Sketch Files

API Access

Complete documentation

Props Information

NameTypeDefaultDescription
badge*{ color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"], label: string }Used to set the DefaultPricingCard badge content and style. Its a required prop.
price*{ currency: string, value: string }Used to set the DefaultPricingCard price details. Its a required prop.
specifications*arrayUsed to set the DefaultPricingCard specifications, its an array of objects with the following keys: `label` and `includes`. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string, color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"] }Used to set the DefaultPricingCard route and action button style. Its a required prop.
Contents