Soft Clay Layout
Soft clay-inspired bento grid with rounded corners and earthy tones.
Main Features of Soft Clay Layout
How to Use Soft Clay Layout in Next.js
Installation Guide for Soft Clay Layout
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
mainTitle | string | Soft Touch | Main card title text. |
mainIcon | React.ReactNode | Main icon component (optional). | |
balanceLabel | string | Balance | Balance card label text. |
balanceValue | string | $12,450 | $12,450 Balance card value display. |
storageTitle | string | Storage | Storage card title text. |
storagePercentage | number | 60 | 60 Storage percentage value (0-100). |
storageLabel | string | 60% Used | Storage card label text. |
backgroundColor | string | #e0e5ec | Background color (hex, rgb, or hsl). |
accentColor | string | blue-500 | Accent color (Tailwind color name or hex). |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Perfect for wellness apps, modern fintech, and Next.js applications that want a tactile 'Soft Clay' aesthetic. Use this layout to communicate friendliness, accessibility, and high-fidelity 'Squishy' UI cues through neumorphic patterns.
Best Practices
Maintain scalable component architecture by keeping the clay shadows subtle. Follow React best practices by pairing this with soft, rounded typography. Optimize for performance by using efficient CSS-shadow transforms.
Why This Component Matters in Modern UI Development
Claymorphism aesthetics communicate approachability, modernism, and digital craft. This production-ready UI template helpsคุณ build an interface that feels tactile and alive, adding a unique physical signature to your brand.
Frequently Asked Questions
QIs it neumorphic?
Yes, the component uses localized shadow-stacks to create that soft, 3D clay-like surface common in high-end mobile app design.
QCan I change the intensity?
Absolutely, both the shadow depth and the card's border radius can be adjusted to create either a 'Sharp Clay' or a 'Liquid' feel.
QIs it mobile responsive?
Yes, the clay effects and progress indicators scale for mobile, ensuring the tactile experience remains consistent on small screens.