React Pricing Cards - Soft UI

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

// Soft 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.

Outlined Pricing Card

PRO
// Soft UI Dashboard PRO React examples import OutlinedPricingCard from "examples/Cards/PricingCards/OutlinedPricingCard";
Pro
Free access for 30 members

$299 /year


10 team members

40GB Cloud storage

Integration help

Sketch Files

API Access

Complete documentation

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'darkUsed to set the OutlinedPricingCard color.
title*stringUsed to set the OutlinedPricingCard title. Its a required prop.
description*stringUsed to set the OutlinedPricingCard description. Its a required prop.
price*{ value: string, type: string }Used to set the OutlinedPricingCard price details. Its a required prop.
specifications*arrayUsed to set the OutlinedPricingCard 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 }Used to set the OutlinedPricingCard route and action button text. Its a required prop.

Waved Pricing Card

PRO
// Soft UI Dashboard PRO React examples import WavedPricingCard from "examples/Cards/PricingCards/WavedPricingCard";
Company

$779

per year

  • 10 Projects


  • 1 Team Member


  • 5 Personal Contacts


  • 500 Messages

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'darkUsed to set the WavedPricingCard color.
title*stringUsed to set the WavedPricingCard title. Its a required prop.
price*{ value: string, currency: string, type: string }Used to set the WavedPricingCard price details. Its a required prop.
specifications*arrayUsed to set the WavedPricingCard specifications, its an array of objects with the following keys: `count` and `label`. Its a required prop.
action*{ type: ["enternal", "internal"], route: string, label: string }Used to set the WavedPricingCard route and action button text. Its a required prop.