Soft Minimal
Clean and airy minimal FAQ design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
| backgroundColor | string | #FAFAFA | Background color (hex, rgb, or hsl). |
| title | string | Help & Support | Section title text. |
| titleColor | string | #171717 | Title text color. |
| cardBgColor | string | #ffffff | Card background color. |
| cardShadowColor | string | rgba(0,0,0,0.03) | Card shadow color. |
| cardHoverShadowColor | string | rgba(0,0,0,0.04) | Card shadow color on hover. |
| iconBorderColor | string | #e5e5e5 | Icon border color. |
| activeIconBgColor | string | #000000 | Active icon background color. |
| activeIconColor | string | #ffffff | Active icon color. |
| inactiveIconColor | string | #a3a3a3 | Inactive icon color. |
| questionTextColor | string | #737373 | Question text color. |
| activeQuestionTextColor | string | #000000 | Active question text color. |
| answerTextColor | string | #737373 | Answer text color. |
When to Use
Perfect for high-end SaaS landing pages, minimal portfolios, and Next.js applications that want an airy, clean, and professional aesthetic. Use this React component for a clutter-free FAQ section with soft shadows and refined interactions.
Best Practices
Maintain consistent spacing within your design system by using plenty of white space. Follow React best practices by using subtle transitions instead of aggressive animations. Optimize for performance by avoiding heavy filters or complex background layers.
Why This Component Matters
Minimalism communicate clarity and reliability. This production-ready component helpsคุณ build an interface that feels lightweight and user-focused, improving the perceived quality of your support content.
FAQ
QHow minimal is the design?
It removes all non-essential borders and lines, relying on soft shadows and typography to create a sense of hierarchy.
QCan I change the active icon?
The icon uses Lucide-React and can be customized via the component's internal structure to match your brand's iconography.
QIs it suitable for long answers?
Yes, the clean layout ensures that long-form text remains readable without overcrowding the section.
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.