@licuido-ui/ui_pricing v0.0.2

Pricing

Pricing - Pricing component, There two variation of pricing card

Author

• @author Arunachalam R arunachalam@crayond.co

Link

Story Book Link pricing

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_pricing

Import component

import { Pricing } from '@licuido-ui/ui_pricing';

Usage

<Pricing
 variation1={true}
 variation2={false} 
 pricing={pricingCard}
 onPricingChanges={onPricingChanges}
 onStartPlan={onSelectedPlan} />

Image

Variation One

Variation Two

SampleCode

<Pricing
 variation1={true}
 variation2={false} 
 pricing={  
        title: 'Free',
        description: ' More advanced AI.',
        pricingList: [
          {
            icon: icon,
            isCancel: false,
            listPoints: '30 days history',
          },
          {
            icon: icon,
            isCancel: false,
            listPoints: 'Up to 1000 message/mo',
          },
          {
            icon: icon,
            isCancel: false,
            listPoints: 'Limited AI',
          },
        ],

        subcriptionAmountMonthly: '0',
        subcriptionAmountYearly: '0',
        offerYouSave: '',
        subscriptionDue: 'month',
        totalAmount: '',
        getStartedbtn: '',
        currencySymbol: '$',
        }
 onPricingChanges={onPricingChanges}
 onStartPlan={onSelectedPlan} />
 variation2TotalLeftBoxStyle={{}}
 pricingDetailsListStyle={{}}
 ccvsSx={{}}
 billAmountStyle={{}}
 cardBoxShadow={''}
 footerSubPara={ 'By clicking "Strat Brainwave Enterprise    Plan", you agree to be charged $399 every month, unless you cancel.'}
 applyPromoCode={ 'Apply promo code'}
 getStartedPaymentplan={' Start Brainwave Enterprise plan'}
 billPaymentAmount={ 'Billed now'}
 emailHeader={ ' Billing email'}
 cardNumberTitle={ 'Billing email'},
 commonTextColor={ '#3B3B3B'},
 activeColor={'#665CD7'},
 VerfiyIcon= <AcceptIcon />,
 promoCodeSx={promoCodeStyle},
 onPricingChanges={()=>{}}
 onStartPlan={()=>{}}
 onGetStartPlan={()=>{}}

Props