Luxury Fluid
Luxury fluid FAQ with mesh gradient background.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
| backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
| blob1FromColor | string | #581c87 | First blob gradient start color. |
| blob1ViaColor | string | #312e81 | First blob gradient middle color. |
| blob2FromColor | string | #1e3a8a | Second blob gradient start color. |
| blob2ViaColor | string | #064e3b | Second blob gradient middle color. |
| title | string | Inquiries | Section title text. |
| subtitle | string | Curated answers for the elite. | Section subtitle text. |
| titleColor | string | #ffffff | Title text color. |
| subtitleColor | string | rgba(255,255,255,0.5) | Subtitle text color. |
| borderColor | string | rgba(255,255,255,0.2) | Border color. |
| questionTextColor | string | rgba(255,255,255,0.4) | Question text color. |
| activeQuestionTextColor | string | #ffffff | Active question text color. |
| hoverQuestionTextColor | string | #ffffff | Question text color on hover. |
| answerTextColor | string | rgba(255,255,255,0.7) | Answer text color. |
| iconColor | string | rgba(255,255,255,0.2) | Icon color. |
| hoverIconColor | string | #ffffff | Icon color on hover. |
When to Use
Perfect for high-end boutique brands, premium service landing pages, and Next.js sites that want a refined, luxurious aesthetic. Use this React component for an elegant FAQ section with mesh gradients and soft, fluid typography interactions.
Best Practices
Maintain consistent spacing within your design system by using it as a thematic backdrop for immersive sections. Follow React best practices by pairing it with high-contrast active states. Optimize for performance by using hardware-accelerated mesh gradient animations.
Why This Component Matters
Luxury visuals communicate exclusivity and attention to detail. This production-ready component helpsคุณ build an interface that feels expensive and atmospheric, ensuring your support content aligns with your premium brand identity.
FAQ
QIs the mesh gradient animated?
Yes, it uses slow-moving color blobs to create a hypnotically fluid background that doesn't distract from the text.
QHow readable is the text?
The component carefully balances opacity and color to ensure that the text remains perfectly legible against the dynamic background.
QCan I use custom font weights?
The luxury aesthetic is best paired with high-contrast weights, which you can easily control via your project's global CSS.
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.