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

Lavender

style

A low-depth violet Neumorphism UI style with relaxed motion and pill controls.

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

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#ebe9f4

--foreground:

#252036

--card:

#ebe9f4

--card-foreground:

#252036

--popover:

#f2eff8

--popover-foreground:

#252036

--primary:

#7557df

--primary-foreground:

#ffffff

--secondary:

#e0ddea

--secondary-foreground:

#252036

--muted:

#ddd9e9

--muted-foreground:

#625970

--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%23625970%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:

#f6f3fb

--accent-foreground:

#7557df

--destructive:

#cf5368

--destructive-foreground:

#000000

--success:

#0a9b78

--border:

rgb(111 102 128 / 0.22)

--input:

rgb(111 102 128 / 0.18)

--ring:

#7557df

--radius:

26px

--neu-surface:

#ebe9f4

--neu-surface-soft:

#f6f3fb

--neu-surface-low:

#ddd9e9

--neu-edge:

transparent

--neu-shadow-dark:

rgb(45 32 76 / 0.16)

--neu-shadow-light:

rgb(255 255 255 / 0.96)

--neu-shadow-raised:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.96) 82%, transparent), 3px 3px 8px color-mix(in srgb, rgb(45 32 76 / 0.16) 92%, transparent), -3px -3px 8px color-mix(in srgb, rgb(255 255 255 / 0.96) 74%, transparent)

--neu-shadow-raised-sm:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.96) 82%, transparent), 1px 1px 5px color-mix(in srgb, rgb(45 32 76 / 0.16) 92%, transparent), -1px -1px 5px color-mix(in srgb, rgb(255 255 255 / 0.96) 64%, transparent)

--neu-shadow-inset:

inset 2px 2px 5px rgb(45 32 76 / 0.16), inset -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.96) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(45 32 76 / 0.16), inset -1px -1px 3px rgb(255 255 255 / 0.96)

--neu-shadow-plate:

1px 2px 3px -1px color-mix(in srgb, rgb(45 32 76 / 0.16) 92%, transparent), -1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.96) 82%, transparent), 3px 3px 8px -2px color-mix(in srgb, rgb(45 32 76 / 0.16) 92%, transparent), -2px -2px 5px -1px color-mix(in srgb, rgb(255 255 255 / 0.96) 68%, transparent)

--neu-shadow-primary:

1px 2px 6px color-mix(in srgb, rgb(45 32 76 / 0.16) 92%, transparent), -1px -1px 5px color-mix(in srgb, rgb(255 255 255 / 0.96) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #7557df 94%, white)

--neu-shadow-primary-hover:

2px 2px 8px color-mix(in srgb, rgb(45 32 76 / 0.16) 92%, transparent), -2px -2px 8px color-mix(in srgb, rgb(255 255 255 / 0.96) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #7557df 94%, white)

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #ddd9e9 35%, #ebe9f4), color-mix(in srgb, #f6f3fb 30%, #ebe9f4))

--neu-shadow-primary-inset:

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

--neu-shadow-destructive-inset:

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

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

999px

--neu-radius-small:

4px

--neu-accent-ink:

#6d52ce

--neu-radius-surface:

26px

--neu-radius-overlay:

26px

--neu-duration:

260ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #f6f3fb 12%, #ebe9f4), #ebe9f4)

--neu-fill-primary:

linear-gradient(135deg, #7557df, color-mix(in srgb, #7557df 94%, black))

--neu-selected:

color-mix(in srgb, #7557df 8%, #ebe9f4)

--neu-selected-border:

color-mix(in srgb, #7557df 44%, rgb(111 102 128 / 0.22))

--neu-error-text:

color-mix(in srgb, #cf5368 76%, #252036)

--neu-shadow-hover:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.96) 82%, transparent), 2px 2px 8px color-mix(in srgb, rgb(45 32 76 / 0.16) 92%, transparent), -2px -2px 8px color-mix(in srgb, rgb(255 255 255 / 0.96) 64%, transparent)

--neu-shadow-floating:

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

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#171520

--foreground:

#f1edff

--card:

#1e1a2a

--card-foreground:

#f1edff

--popover:

#1e1a2a

--popover-foreground:

#f1edff

--primary:

#a98cff

--primary-foreground:

#171022

--secondary:

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#ebe9f4

--foreground:

#252036

--card:

#ebe9f4

--card-foreground:

#252036

--popover:

#f2eff8

--popover-foreground:

#252036

--primary:

#7557df

--primary-foreground:

#ffffff

--secondary:

#e0ddea

--secondary-foreground:

#252036

--muted:

#ddd9e9

--muted-foreground:

#625970

--neu-select-arrow:

--accent:

#f6f3fb

--accent-foreground:

#7557df

--destructive:

#cf5368

--destructive-foreground:

#000000

--success:

#0a9b78

--border:

rgb(111 102 128 / 0.22)

--input:

rgb(111 102 128 / 0.18)

--ring:

#7557df

--radius:

26px

--neu-surface:

#ebe9f4

--neu-surface-soft:

#f6f3fb

--neu-surface-low:

#ddd9e9

--neu-edge:

transparent

--neu-shadow-dark:

rgb(45 32 76 / 0.16)

--neu-shadow-light:

rgb(255 255 255 / 0.96)

--neu-shadow-raised:

--neu-shadow-raised-sm:

--neu-shadow-inset:

inset 2px 2px 5px rgb(45 32 76 / 0.16), inset -2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.96) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(45 32 76 / 0.16), inset -1px -1px 3px rgb(255 255 255 / 0.96)

--neu-shadow-plate:

--neu-shadow-primary:

--neu-shadow-primary-hover:

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #ddd9e9 35%, #ebe9f4), color-mix(in srgb, #f6f3fb 30%, #ebe9f4))

--neu-shadow-primary-inset:

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

--neu-shadow-destructive-inset:

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

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

999px

--neu-radius-small:

4px

--neu-accent-ink:

#6d52ce

--neu-radius-surface:

26px

--neu-radius-overlay:

26px

--neu-duration:

260ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #f6f3fb 12%, #ebe9f4), #ebe9f4)

--neu-fill-primary:

linear-gradient(135deg, #7557df, color-mix(in srgb, #7557df 94%, black))

--neu-selected:

color-mix(in srgb, #7557df 8%, #ebe9f4)

--neu-selected-border:

color-mix(in srgb, #7557df 44%, rgb(111 102 128 / 0.22))

--neu-error-text:

color-mix(in srgb, #cf5368 76%, #252036)

--neu-shadow-hover:

--neu-shadow-floating:

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

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#171520

--foreground:

#f1edff

--card:

#1e1a2a

--card-foreground:

#f1edff

--popover:

#1e1a2a

--popover-foreground:

#f1edff

--primary:

#a98cff

--primary-foreground:

#171022

--secondary: