Pricing B

Component that represents a price list item.

Preview

Premium


$59
/ month

Suitable for any business with less than 500 customers.

  • Unlimited users
  • 500 subscribers per month
  • Free support
  • No enterprise features

Standard


$59
/ month

Suitable for any business with less than 500 customers.

  • Unlimited users
  • 500 subscribers per month
  • Free support
  • No enterprise features

Code

import React from "react"; import styles from "./pricing-b.module.css"; type FeatureType = { title: string; unavailable?: boolean; }; type Props = { className?: string; title: React.ReactNode; description?: React.ReactNode; callToActionText?: string; callToActionElement?: React.ReactNode; price?: React.ReactNode; priceUnit?: React.ReactNode; features?: FeatureType[]; availableIcon?: React.ReactNode; unavailableIcon?: React.ReactNode; href?: string; rounded?: "none" | "small" | "medium" | "large"; shadow?: "none" | "medium"; // Put additional variants here, then define them in the CSS variant?: "default" | "red"; }; export default function PricingB({ className, title, description, callToActionText, callToActionElement, price, priceUnit, features = [], availableIcon = "+", unavailableIcon = "-", href, shadow = "none", rounded = "small", variant = "default", }: Props) { return ( <div className={[ styles["wrapper"], styles[`r-${rounded}`], styles[`sh-${shadow}`], styles[`variant-${variant}`], className, ].join(" ")} > <header className={styles["header"]}> {/* Title and price */} {title && <h4 className={styles["title"]}>{title}</h4>} {<hr className={styles["title-separator"]} />} <div className={styles["price-group"]}> {price && <div className={styles["price"]}>{price}</div>} {priceUnit && <div className={styles["price-unit"]}>{priceUnit}</div>} </div> </header> <div className={styles["content"]}> {description && <p className={styles["desc"]}>{description}</p>} {/* Feature list */} {features && ( <ul className={styles["features"]}> {features.map((feature) => ( <li key={feature.title} className={[ styles["feature-item"], feature.unavailable && styles["feature-unavailable"], ].join(" ")} > <span className={styles["feature-icon"]}> {feature.unavailable ? unavailableIcon : availableIcon} </span> <span className={styles["feature-text"]}>{feature.title}</span> </li> ))} </ul> )} </div> <footer className={styles["footer"]}> {/* Call to action */} {/* Set the callToActionElement for a specific CTA component or use a simple callToActionText with the href props */} {callToActionElement} {/* Replace the "a" element with "Link" if you use Next.js */} {callToActionText && ( <a href={href} className={styles["btn-cta"]}> {callToActionText} </a> )} </footer> </div> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • title (string or ReactNode): Specifies the text or component that will be used as the title.
  • description (string or ReactNode): Specifies the text or component that will be used as the description.
  • callToActionText (string): Specifies the call to action text.
  • callToActionElement (ReactNode): Specifies the component used as the call to action.
  • price (string or ReactNode): Specifies the price.
  • priceUnit (string or ReactNode): Specifies the price unit.
  • features (array of FeatureType): Specifies the feature list.
  • availableIcon (ReactNode): Specifies the icon component of the available feature.
  • unavailableIcon (ReactNode): Specifies the icon component of the unavailable feature.
  • href (string): Specifies the URL if the component is a link.
  • align ("start" | "center" | "end"): Specifies the horizontal alignment of the content.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • shadow ("small" | "medium"): Specifies the size of the shadow of the frame.
  • variant ("default" | "red" | "card" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
FeatureType item arguments
  • title (string): Specifies the title text.
  • unavailable (boolean): Specifies if this feature is available or not.
Sample CSS customization
.variant-red { --fg-color: rgb(255, 255, 255); --highlight-color: rgb(255, 255, 255); --bg-color: rgb(240, 13, 62); padding: 2rem 1.5rem; background-image: linear-gradient(to top right, #632aff, #f00d3e); box-shadow: inset 0px 0px 2px 0px var(--shadow-color); } .variant-red .title-separator { width: 100%; height: 0.5rem; border-radius: 1rem; background-color: transparent; background-image: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0)); }