MonalisaUI
  • Introduction
  • ArticleCard
  • Avatar
  • Badge
  • Button
  • Card
  • CheckBox
  • Col
  • Divider
  • Icon
  • Input
  • ListItem
  • Pricing
  • ProgressBar
  • Rating
  • Row
  • Segment
  • SocialIcon
  • Spinner
  • Switch
  • Tag
  • Text
  • Textarea
  • Theme
Powered by GitBook
On this page

Pricing

PreviousListItemNextProgressBar

Last updated 5 years ago

Pricing is a component used to display features and pricing tables.

MonalisaUI

View full example:

import React from 'react';
import { Pricing } from 'monalisa-ui';

const Example = () => (
  <Pricing
    titleColor="#3e50fa"
    title="Free"
    price="$0"
    info={['1 CPU', '1024MB Memory', '1000GB Bandwidth']}
    button={{ title: 'GET STARTED' }}
  />
);

export default Example;

Configuration

Property

Default

Option

Description

title

-

string

Title of the pricing

titleColor

-

string

Color title

price

-

string

Price

priceColor

#000

string

Color price

info

[]

array

Pricing information

titleStyle

-

-

Style for the title

priceStyle

-

-

Style for the price

borderColor

#dfe1e6

string

Border color pricing

style

-

-

Style for the pricing

button

-

object

Display button bottom

Pricing Example