Clay Morphic
3D soft clay morphic FAQ with neumorphic design.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
| backgroundColor | string | #eef0f4 | Background color (hex, rgb, or hsl). |
| title | string | Just ask. | Section title text. |
| titleColor | string | #475569 | Title text color. |
| cardBgColor | string | #eef0f4 | Card background color. |
| cardTextColor | string | #475569 | Card text color. |
| cardSubtextColor | string | #64748b | Card subtext/answer color. |
| iconColor | string | #94a3b8 | Icon color. |
| activeIconBgColor | string | #60a5fa | Active icon background color. |
| activeIconColor | string | #ffffff | Active icon color. |
| shadowLightColor | string | #ffffff | Light shadow color for neumorphic effect. |
| shadowDarkColor | string | #d1d9e6 | Dark shadow color for neumorphic effect. |
When to Use
Excellent for playful brand identities, educational platforms, and Next.js applications that want a tactile, 'squishy' aesthetic. Use this React component for a 3D-feeling FAQ section with soft claymophic shadows and rounded UI elements.
Best Practices
Maintain consistent spacing within your design system by pairing this with pastel colors and soft typography. Follow React best practices by using high-contrast colors for the active icon state. Optimize for performance by using efficient box-shadow combinations for the 3D effect.
Why This Component Matters
Claymorphism adds a unique tactile dimension to digital interfaces, making them feel more interactive and approachable. This production-ready component helpsคุณ build an interface that stands out through its unique 3D visual language.
FAQ
QWhat is claymorphism?
It is a design trend that uses multiple inner and outer shadows to create a soft, 3D 'clay-like' appearance for UI elements.
QCan I use it in dark mode?
Yes, you can customize the background and shadow colors to create 'dark clay' aesthetics while maintaining the soft 3D look.
QDoes it work on mobile?
Absolutely, the shadows and rounded corners scale perfectly across all screen sizes for a consistent tactile experience.
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.