Clay Stack
Draggable claymation-style testimonial cards with swipe gestures.
Main Features of Clay Stack
How to Use Clay Stack in Next.js
Installation Guide for Clay Stack
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
cards | Array<{id: number, text: string, author: string, color: string}> | [{id: 1, text: '...', author: 'Mike T.', color: '#fef08a'}, ...] | Array of card objects with id, text, author, and color. |
backgroundColor | string | #f0f0f0 | Background color (hex, rgb, or hsl). |
borderColor | string | #000000 | Border color (hex, rgb, or hsl). |
Related Components
When to Use
Ideal for wellness apps, lifestyle brands, and Next.js platforms that want a soft 'Clay' aesthetic. Use this testimonial for an engaging 'Deck' experience where cards feel 'Physical' and 'Stacked' like real paper.
Best Practices
Maintain consistent spacing within your design system by adhering to the soft neumorphic shadows. Follow React best practices by using pure Tailwind for the layout structure. Optimize for performance by using systematic typography scales.
Why This Component Matters in Modern UI Development
Neumorphic 'Clay' aesthetics communicate technical reliability, clarity, and timeless craft. This production-ready UI template helpsคุณ build an interface that feels organized and professional, reflecting a brand identity rooted in design purity.
Frequently Asked Questions
QWhat is 'Clay Case'?
The component uses localized CSS box-shadows and subtle inner glows to simulate the soft, matte surfaces found in high-fidelity 3D clay renders.
QHow does it swipe?
The deck uses localized spring physics to fan out the cards during drag, creating a high-fidelity 'physical' movement of the underlying project detail.
QIs it mobile responsive?
The stack count and typographic scales adapt for mobile, ensuring the 'Deck' feel remains consistent on high-density mobile screens.