Clay Physics
Organic clay physics stats section with morphing shapes.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| stats | Array<{icon: LucideIcon, value: number, label: string, suffix?: string, iconColor?: string}> | [] | Array of stat items with icon, value, label, optional suffix, and iconColor. |
| backgroundColor | string | #e0e5ec | Background color (hex, rgb, or hsl). |
| cardBgColor | string | #e0e5ec | Card background color. |
| cardShadowLight | string | rgba(255,255,255,0.5) | Card light shadow color for neumorphic effect. |
| cardShadowDark | string | rgb(163,177,198) | Card dark shadow color for neumorphic effect. |
| iconBgColor | string | #e0e5ec | Icon background color. |
| iconShadowLight | string | #ffffff | Icon light shadow color. |
| iconShadowDark | string | #bebebe | Icon dark shadow color. |
| valueColor | string | #475569 | Value text color. |
| labelColor | string | #64748b | Label text color. |
When to Use
Excellent for friendly mobile apps, design portfolios, and Next.js startups that want a tactile, 'soft' aesthetic. Use this React component for a neumorphic stats section with organic, morphing card shapes.
Best Practices
Maintain consistent spacing within your design system by using it on light, monochromatic backgrounds. Follow React best practices by pairing it with clear, rounded typography. Optimize for performance by managed the shadow-blur radii.
Why This Component Matters
Neumorphism (Claymorphism) creates a sense of approachability and physical presence. This production-ready UI component helpsคุณ build an interface that feels tactile and friendly, improving user affinity with your brand.
FAQ
QHow are the morphing shapes made?
The cards use internal animation loops for their `border-radius`, creating a soft, shifting 'clay-like' appearance.
QIs the neumorphic effect customizable?
Yes, the `cardShadowLight` and `cardShadowDark` props allow you to fine-tune the depth and 'softness' of the elevation.
QCan I use it on dark backgrounds?
While optimized for light mode (`#e0e5ec`), the colors can be adjusted to create a similar tactile effect on dark gray backgrounds.
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.