Free Β· React + Tailwind Β· MIT

Claymorphism UI components

Claymorphism gives elements a soft, puffy 3D clay look using rounded corners, double drop shadows, and subtle inner highlights. Grab these free React and Tailwind components to build playful, tactile interfaces.

Browse components β†’Free generators

Claymorphism components

Monthly revenue
$48.2k
β–² 12.5%
PRO
$24/mo
  • βœ“ Unlimited components
  • βœ“ All 41 styles
  • βœ“ Figma export
Welcome back

About claymorphism

Claymorphism gives elements a soft, puffy 3D clay look using rounded corners, double drop shadows, and subtle inner highlights. Grab these free React and Tailwind components to build playful, tactile interfaces. Puffy 3D clay volumes, candy pastels.

All Claymorphism blocks are free, MIT-licensed and copy-paste ready in React & Tailwind. Need raw CSS? Try the free generators, or browse every look in the full collection.

FAQ

What is claymorphism in UI design?

Claymorphism gives elements a soft, puffy 3D clay look using rounded corners, double drop shadows, and subtle inner highlights. Grab these free React and Tailwind components to build playful, tactile interfaces.

How do I create a claymorphism effect in CSS?

Claymorphism is defined by puffy 3d clay volumes, candy pastels. Use the shared color, radius, border, shadow and motion tokens in the examples above to reproduce the look consistently in React and Tailwind.

Explore other styles

MaximalismMotion MorphismRetro FuturismNeumorphismSkeuomorphismFlat DesignMaterial DesignAurora / Mesh