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

Air

style

The default cool blue Neumorphism UI style with balanced depth and soft controls.

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

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#ebecf0

--foreground:

#25264b

--card:

#ebecf0

--card-foreground:

#25264b

--popover:

#ebecf0

--popover-foreground:

#25264b

--primary:

#0768da

--primary-foreground:

#ffffff

--secondary:

#e5e7ed

--secondary-foreground:

#25264b

--muted:

#dfe1e7

--muted-foreground:

#586079

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

#f2f3f5

--accent-foreground:

#0768da

--destructive:

#b92e43

--destructive-foreground:

#ffffff

--success:

#0a9b78

--border:

rgb(83 99 123 / 0.18)

--input:

rgb(83 99 123 / 0.16)

--ring:

#0768da

--radius:

12px

--neu-surface:

#ebecf0

--neu-surface-soft:

#f2f3f5

--neu-surface-low:

#dfe1e7

--neu-edge:

transparent

--neu-shadow-dark:

rgb(66 72 94 / 0.22)

--neu-shadow-light:

rgb(255 255 255 / 0.94)

--neu-shadow-raised:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 6px 6px 14px color-mix(in srgb, rgb(66 72 94 / 0.22) 92%, transparent), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.94) 74%, transparent)

--neu-shadow-raised-sm:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 2px 2px 7px color-mix(in srgb, rgb(66 72 94 / 0.22) 92%, transparent), -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent)

--neu-shadow-inset:

inset 2px 2px 7px rgb(66 72 94 / 0.22), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(66 72 94 / 0.22), inset -1px -1px 3px rgb(255 255 255 / 0.94)

--neu-shadow-plate:

1px 2px 3px -1px color-mix(in srgb, rgb(66 72 94 / 0.22) 92%, transparent), -1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 4px 4px 10px -2px color-mix(in srgb, rgb(66 72 94 / 0.22) 92%, transparent), -3px -3px 7px -1px color-mix(in srgb, rgb(255 255 255 / 0.94) 68%, transparent)

--neu-shadow-primary:

2px 3px 8px color-mix(in srgb, rgb(66 72 94 / 0.22) 92%, transparent), -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white)

--neu-shadow-primary-hover:

3px 3px 10px color-mix(in srgb, rgb(66 72 94 / 0.22) 92%, transparent), -3px -3px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white)

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #dfe1e7 35%, #ebecf0), color-mix(in srgb, #f2f3f5 30%, #ebecf0))

--neu-shadow-primary-inset:

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

--neu-shadow-destructive-inset:

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

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

8px

--neu-radius-small:

4px

--neu-accent-ink:

#0965d3

--neu-radius-surface:

12px

--neu-radius-overlay:

12px

--neu-duration:

180ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #f2f3f5 12%, #ebecf0), #ebecf0)

--neu-fill-primary:

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

--neu-selected:

color-mix(in srgb, #0768da 8%, #ebecf0)

--neu-selected-border:

color-mix(in srgb, #0768da 44%, rgb(83 99 123 / 0.18))

--neu-error-text:

color-mix(in srgb, #b92e43 76%, #25264b)

--neu-shadow-hover:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 3px 3px 10px color-mix(in srgb, rgb(66 72 94 / 0.22) 92%, transparent), -3px -3px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent)

--neu-shadow-floating:

0 16px 40px rgb(66 72 94 / 0.22), 0 3px 8px rgb(66 72 94 / 0.22), 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:

#242731

--foreground:

#e9f0fa

--card:

#242731

--card-foreground:

#e9f0fa

--popover:

#292d39

--popover-foreground:

#e9f0fa

--primary:

#237bff

--primary-foreground:

#07111f

--secondary:

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#ebecf0

--foreground:

#25264b

--card:

#ebecf0

--card-foreground:

#25264b

--popover:

#ebecf0

--popover-foreground:

#25264b

--primary:

#0768da

--primary-foreground:

#ffffff

--secondary:

#e5e7ed

--secondary-foreground:

#25264b

--muted:

#dfe1e7

--muted-foreground:

#586079

--neu-select-arrow:

--accent:

#f2f3f5

--accent-foreground:

#0768da

--destructive:

#b92e43

--destructive-foreground:

#ffffff

--success:

#0a9b78

--border:

rgb(83 99 123 / 0.18)

--input:

rgb(83 99 123 / 0.16)

--ring:

#0768da

--radius:

12px

--neu-surface:

#ebecf0

--neu-surface-soft:

#f2f3f5

--neu-surface-low:

#dfe1e7

--neu-edge:

transparent

--neu-shadow-dark:

rgb(66 72 94 / 0.22)

--neu-shadow-light:

rgb(255 255 255 / 0.94)

--neu-shadow-raised:

--neu-shadow-raised-sm:

--neu-shadow-inset:

inset 2px 2px 7px rgb(66 72 94 / 0.22), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(66 72 94 / 0.22), inset -1px -1px 3px rgb(255 255 255 / 0.94)

--neu-shadow-plate:

--neu-shadow-primary:

--neu-shadow-primary-hover:

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #dfe1e7 35%, #ebecf0), color-mix(in srgb, #f2f3f5 30%, #ebecf0))

--neu-shadow-primary-inset:

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

--neu-shadow-destructive-inset:

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

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

8px

--neu-radius-small:

4px

--neu-accent-ink:

#0965d3

--neu-radius-surface:

12px

--neu-radius-overlay:

12px

--neu-duration:

180ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #f2f3f5 12%, #ebecf0), #ebecf0)

--neu-fill-primary:

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

--neu-selected:

color-mix(in srgb, #0768da 8%, #ebecf0)

--neu-selected-border:

color-mix(in srgb, #0768da 44%, rgb(83 99 123 / 0.18))

--neu-error-text:

color-mix(in srgb, #b92e43 76%, #25264b)

--neu-shadow-hover:

--neu-shadow-floating:

0 16px 40px rgb(66 72 94 / 0.22), 0 3px 8px rgb(66 72 94 / 0.22), 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:

#242731

--foreground:

#e9f0fa

--card:

#242731

--card-foreground:

#e9f0fa

--popover:

#292d39

--popover-foreground:

#e9f0fa

--primary:

#237bff

--primary-foreground:

#07111f

--secondary: