Clay – shadcn/ui Style by neumorphism-ui | shadcnregistry

Clay

style

A warm sand and coral Neumorphism UI style with compact rounded controls.

pnpm dlx shadcn@latest add "https://neumorphism-ui.andongmin.com/r/style-clay.json"

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#efe8df

--foreground:

#35271f

--card:

#efe8df

--card-foreground:

#35271f

--popover:

#f6efe7

--popover-foreground:

#35271f

--primary:

#d46b4c

--primary-foreground:

#2b140d

--secondary:

#e5dbd0

--secondary-foreground:

#35271f

--muted:

#e2d7cb

--muted-foreground:

#6a584d

--neu-select-arrow:

url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236a584d%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E")

--accent:

#faf4ec

--accent-foreground:

#d46b4c

--destructive:

#c84851

--destructive-foreground:

#ffffff

--success:

#0a9b78

--border:

rgb(128 110 98 / 0.22)

--input:

rgb(128 110 98 / 0.18)

--ring:

#d46b4c

--radius:

14px

--neu-surface:

#efe8df

--neu-surface-soft:

#faf4ec

--neu-surface-low:

#e2d7cb

--neu-edge:

transparent

--neu-shadow-dark:

rgb(76 50 33 / 0.16)

--neu-shadow-light:

rgb(255 255 255 / 0.90)

--neu-shadow-raised:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.90) 82%, transparent), 6px 6px 14px color-mix(in srgb, rgb(76 50 33 / 0.16) 92%, transparent), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.90) 74%, transparent)

--neu-shadow-raised-sm:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.90) 82%, transparent), 2px 2px 7px color-mix(in srgb, rgb(76 50 33 / 0.16) 92%, transparent), -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.90) 64%, transparent)

--neu-shadow-inset:

inset 2px 2px 7px rgb(76 50 33 / 0.16), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.90) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(76 50 33 / 0.16), inset -1px -1px 3px rgb(255 255 255 / 0.90)

--neu-shadow-plate:

1px 2px 3px -1px color-mix(in srgb, rgb(76 50 33 / 0.16) 92%, transparent), -1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.90) 82%, transparent), 4px 4px 10px -2px color-mix(in srgb, rgb(76 50 33 / 0.16) 92%, transparent), -3px -3px 7px -1px color-mix(in srgb, rgb(255 255 255 / 0.90) 68%, transparent)

--neu-shadow-primary:

2px 3px 8px color-mix(in srgb, rgb(76 50 33 / 0.16) 92%, transparent), -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.90) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #d46b4c 94%, white)

--neu-shadow-primary-hover:

3px 3px 10px color-mix(in srgb, rgb(76 50 33 / 0.16) 92%, transparent), -3px -3px 10px color-mix(in srgb, rgb(255 255 255 / 0.90) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #d46b4c 94%, white)

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #e2d7cb 35%, #efe8df), color-mix(in srgb, #faf4ec 30%, #efe8df))

--neu-shadow-primary-inset:

inset 2px 2px 5px color-mix(in srgb, #d46b4c 68%, black), inset -2px -2px 5px color-mix(in srgb, #d46b4c 78%, white)

--neu-shadow-destructive-inset:

inset 2px 2px 5px color-mix(in srgb, #c84851 68%, black), inset -2px -2px 5px color-mix(in srgb, #c84851 78%, white)

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

6px

--neu-radius-small:

4px

--neu-accent-ink:

#9c533c

--neu-radius-surface:

14px

--neu-radius-overlay:

14px

--neu-duration:

180ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #faf4ec 12%, #efe8df), #efe8df)

--neu-fill-primary:

linear-gradient(135deg, color-mix(in srgb, #d46b4c 94%, white), #d46b4c)

--neu-selected:

color-mix(in srgb, #d46b4c 8%, #efe8df)

--neu-selected-border:

color-mix(in srgb, #d46b4c 44%, rgb(128 110 98 / 0.22))

--neu-error-text:

color-mix(in srgb, #c84851 76%, #35271f)

--neu-shadow-hover:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.90) 82%, transparent), 3px 3px 10px color-mix(in srgb, rgb(76 50 33 / 0.16) 92%, transparent), -3px -3px 10px color-mix(in srgb, rgb(255 255 255 / 0.90) 64%, transparent)

--neu-shadow-floating:

0 16px 40px rgb(76 50 33 / 0.16), 0 3px 8px rgb(76 50 33 / 0.16), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.68) 45%, transparent)

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#211814

--foreground:

#f8eee6

--card:

#2a1f19

--card-foreground:

#f8eee6

--popover:

#2a1f19

--popover-foreground:

#f8eee6

--primary:

#f08b6b

--primary-foreground:

#21110b

--secondary:

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#efe8df

--foreground:

#35271f

--card:

#efe8df

--card-foreground:

#35271f

--popover:

#f6efe7

--popover-foreground:

#35271f

--primary:

#d46b4c

--primary-foreground:

#2b140d

--secondary:

#e5dbd0

--secondary-foreground:

#35271f

--muted:

#e2d7cb

--muted-foreground:

#6a584d

--neu-select-arrow:

--accent:

#faf4ec

--accent-foreground:

#d46b4c

--destructive:

#c84851

--destructive-foreground:

#ffffff

--success:

#0a9b78

--border:

rgb(128 110 98 / 0.22)

--input:

rgb(128 110 98 / 0.18)

--ring:

#d46b4c

--radius:

14px

--neu-surface:

#efe8df

--neu-surface-soft:

#faf4ec

--neu-surface-low:

#e2d7cb

--neu-edge:

transparent

--neu-shadow-dark:

rgb(76 50 33 / 0.16)

--neu-shadow-light:

rgb(255 255 255 / 0.90)

--neu-shadow-raised:

--neu-shadow-raised-sm:

--neu-shadow-inset:

inset 2px 2px 7px rgb(76 50 33 / 0.16), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.90) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(76 50 33 / 0.16), inset -1px -1px 3px rgb(255 255 255 / 0.90)

--neu-shadow-plate:

--neu-shadow-primary:

--neu-shadow-primary-hover:

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #e2d7cb 35%, #efe8df), color-mix(in srgb, #faf4ec 30%, #efe8df))

--neu-shadow-primary-inset:

inset 2px 2px 5px color-mix(in srgb, #d46b4c 68%, black), inset -2px -2px 5px color-mix(in srgb, #d46b4c 78%, white)

--neu-shadow-destructive-inset:

inset 2px 2px 5px color-mix(in srgb, #c84851 68%, black), inset -2px -2px 5px color-mix(in srgb, #c84851 78%, white)

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

6px

--neu-radius-small:

4px

--neu-accent-ink:

#9c533c

--neu-radius-surface:

14px

--neu-radius-overlay:

14px

--neu-duration:

180ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #faf4ec 12%, #efe8df), #efe8df)

--neu-fill-primary:

linear-gradient(135deg, color-mix(in srgb, #d46b4c 94%, white), #d46b4c)

--neu-selected:

color-mix(in srgb, #d46b4c 8%, #efe8df)

--neu-selected-border:

color-mix(in srgb, #d46b4c 44%, rgb(128 110 98 / 0.22))

--neu-error-text:

color-mix(in srgb, #c84851 76%, #35271f)

--neu-shadow-hover:

--neu-shadow-floating:

0 16px 40px rgb(76 50 33 / 0.16), 0 3px 8px rgb(76 50 33 / 0.16), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.68) 45%, transparent)

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#211814

--foreground:

#f8eee6

--card:

#2a1f19

--card-foreground:

#f8eee6

--popover:

#2a1f19

--popover-foreground:

#f8eee6

--primary:

#f08b6b

--primary-foreground:

#21110b

--secondary: