Luxury Fluid
Luxury fluid FAQ with mesh gradient background.
Main Features of Luxury Fluid
How to Use Luxury Fluid in Next.js
Installation Guide for Luxury Fluid
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.