Claymorphism
Soft clay-like dashboard with organic shapes and tactile design elements.
Main Features of Claymorphism
How to Use Claymorphism in Next.js
Installation Guide for Claymorphism
Props
Customize the component with these 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. |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
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.