Clay Morphic
3D soft clay morphic FAQ with neumorphic design.
Main Features of Clay Morphic
How to Use Clay Morphic in Next.js
Installation Guide for Clay Morphic
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 | #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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.