Soft Cloud
Soft minimal cloud pricing cards with gentle aesthetics.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.