# Generator Neumorph Clay

Neumorphism generator with light angle, distance, blur and intensity, raised or pressed, exported as CSS and design tokens.

- id: `generator-neumorph-clay`
- Page: https://agentic-ui-kit.com/components/generator-neumorph-clay
- Live preview: https://agentic-ui-kit.com/live/piece/generator-neumorph-clay?piece=generator-neumorph-clay

## Install

```bash
agentic-ui add generator-neumorph-clay
npx shadcn@4.17.0 add @agentic-ui/generator-neumorph-clay
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** neumorphism-builder, claymorphism-builder, soft-ui-surface-generator, inset-and-outset-shadows, raised-and-pressed-forms, light-angle-control, intensity-control, concave-convex-fill, aa-contrast-warning, contrast-fix-suggestion, theme-token-colours, css-export, design-tokens-export, tailwind-class-export, live-preview, presets, versioned-url-state, copy-to-clipboard, file-download, shadcn-registry-item
- **Intents:** configure, create-edit, import-export
- **Suits domains:** saas, analytics, settings, devtools
- **Interaction:** click, keyboard-navigation
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Neumorphism generator with light angle, distance, blur and intensity, raised or pressed, exported as CSS and design tokens, Claymorphism card and button style with inner highlight and soft drop shadow from theme tokens, Soft UI surface builder that warns when the text on the surface fails WCAG AA contrast and suggests a better text token
- **Avoid when:** Primary controls in dense or accessibility-critical screens; soft shadows give weak edges, so keep a visible border or use ordinary elevation (generator-shadow-elevation)., Frosted translucent panels; use generator-glass.
- **Preserve when adapting:** light-angle-model, worst-case-contrast, token-only-colours
- **Replace when adapting:** presets, sample-content, class-name
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.7/10
- **Quality breakdown:** visual 8/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/generator-foundation, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 55 fps
- **Registry dependencies:** lib-generator-foundation