Soft Cloud
Soft minimal cloud pricing cards with gentle aesthetics.
Main Features of Soft Cloud
How to Use Soft Cloud in Next.js
Installation Guide for Soft Cloud
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | Simple plans for everyone. | Section title text. |
plans | Array<{name: string, price: number, description?: string, badge?: string, iconColor?: string, iconBgColor?: string, buttonBgColor?: string, buttonTextColor?: string, buttonHoverBgColor?: string}> | [] | Array of pricing plans with name, price, description, badge, and optional styling props. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #F0F4F8 | Background color (hex, rgb, or hsl). |
titleColor | string | #1e293b | Title text color. |
cardBgColor | string | #ffffff | Card background color. |
cardShadowColor | string | rgba(0,0,0,0.05) | Card shadow color. |
cardBorderColor | string | #ffffff | Card border color. |
planNameColor | string | #0f172a | Plan name text color. |
planDescColor | string | #94a3b8 | Plan description text color. |
priceColor | string | #0f172a | Price text color. |
priceSubtextColor | string | #94a3b8 | Price subtext color. |
featureTextColor | string | #0f172a | Feature text color. |
featureCheckBgColor | string | #f1f5f9 | Feature check background color. |
featureCheckColor | string | #0f172a | Feature check icon color. |
badgeBgColor | string | #c7d2fe | Badge background color. |
badgeTextColor | string | #6366f1 | Badge text color. |
defaultButtonBgColor | string | #f1f5f9 | Default button background color. |
defaultButtonTextColor | string | #0f172a | Default button text color. |
defaultButtonHoverBgColor | string | #e2e8f0 | Default button hover background color. |
buttonText | string | Get Started | Button text. |
Related Components
When to Use
Excellent for modern mobile apps, personal portfolios, and Next.js startups that want a friendly, lightweight aesthetic. Use this React component for a soft minimal pricing section with gentle shadows and rounded corners.
Best Practices
Maintain consistent spacing within your design system by using it on light, neutral backgrounds. Follow React best practices by pairing it with clear, descriptive icons. Optimize for performance by using standard CSS shadows instead of heavy filters.
Why This Component Matters in Modern UI Development
Soft minimalism improves usability by reducing visual stress and creating a welcoming atmosphere. This production-ready component helpsคุณ build an interface that feels accessible and professional, improving user conversion speeds.
Frequently Asked Questions
QIs it friendly for SaaS?
Absolutely, its clean layout and clear hierarchy make it one of the most versatile styles for modern subscription-based products.
QCan I adjust the card roundness?
The cards use a medium roundness (`rounded-3xl`), which can be easily customized in the internal Tailwind classes.
QHow many tiers does it support?
The grid is optimized for 3 tiers, but automatically re-stacks for 1, 2, or 4+ tiers on mobile and desktop.