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

// NextJS Material Dashboard 2 Examples import DefaultPricingCard from "/examples/Cards/PricingCards/DefaultPricingCard";

starter

$99/mo

2 team members

20GB Cloud storage

Integration help

Sketch Files

API Access

Complete documentation

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''light''dark''white'	white	Used to set the `DefaultPricingCard` background color.
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, type: string, }		Used to set the `DefaultPricingCard` price details. Its a required prop.
specifications*	array		Used 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.