Effects
New UI layering, elevations and effects styles.
Install
Install New UI Effects from your terminal via npm.
npm i -D @new-ui/effects
Usage
@use "@new-ui/effects"; // Use `@import` for CSS
Tokens
Effects tokens cover shadows, focus, radius, blur, perspective, and motion.
| Token | Value / Role |
|---|---|
| Shadows | |
--dialog-strong |
Modals, sidebar overlays, toasts |
--dialog |
Dropdown, tooltip, popover |
--content |
Content area, buttons, controls, cards, pills |
--canvas |
Background |
--keyboard-key |
Keyboard key component |
| Focus | |
--focus-default |
Default focus |
--focus-accent |
Accent focus |
--focus-inverse |
Focus inverse |
| Radius | |
--radius-xs |
0.125rem |
--radius-sm |
0.25rem |
--radius-md |
0.375rem |
--radius-lg |
0.5rem |
--radius-xl |
0.75rem |
--radius-2xl |
1rem |
--radius-3xl |
1.5rem |
--radius-4xl |
2rem |
| Blur | |
--blur-xs |
0.25rem |
--blur-sm |
0.5rem |
--blur-md |
0.75rem |
--blur-lg |
1.0rem |
--blur-xl |
1.5rem |
--blur-2xl |
2.5rem |
--blur-3xl |
4.0rem |
| Perspective | |
--perspective-dramatic |
6.25rem |
--perspective-near |
18.75rem |
--perspective-normal |
31.25rem |
--perspective-midrange |
50.0rem |
--perspective-distant |
75.0rem |
| Transition | |
--default-transition-duration |
150ms |
--default-transition-timing-function |
cubic-bezier(0.4, 0, 0.2, 1) |