Claymorphism
Soft clay-like dashboard with organic shapes and tactile design elements.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #6c5ce7 | Primary brand color for buttons and accents. |
| backgroundColor | string | #e0e5ec | Background color (light mode neumorphic base). |
| shadowIntensity | number | 1 | Intensity of clay shadow effects (0.5-2). |
| borderRadius | string | 32px | Border radius for clay cards. |
When to Use
Ideal for creative SaaS, children's apps, and Next.js projects that want a soft, tactile 'Claymorphism' aesthetic. Use this dashboard template for an approachable experience with rounded corners, soft shadows, and organic shapes.
Best Practices
Maintain consistent spacing within your design system by using large border radii and soft colors. Follow React best practices by pairing this with bold, friendly typography. Optimize for performance by using efficient shadow-mask renders.
Why This Component Matters
Claymorphism (Soft Design) communicates warmth and approachability. This production-ready UI template helpsคุณ build an interface that feels tactile and 'friendly', improving user affinity through visual novelty and soft depth.
FAQ
QWhat is Claymorphism?
It is a design trend characterized by soft, rounded elements with inner and outer shadows that simulate the appearance of clay or inflated plastic.
QCan I adjust the 'Softness'?
Yes, the `shadowIntensity` and `borderRadius` props allow you to control how 'squishy' or 'geometric' the modules appear.
QIs it mobile responsive?
The clay cards stack into a clean vertical list on mobile, ensuring the soft tactile feel is maintained for touch interactions.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.