neu-light soft-extrusion helpers.

Usage#

html
<div class="neu-light p-6 rounded-xl">Soft UI</div>

The classes#

ClassPurpose
neu-lightSoft raised surface
neu-*Inset/outset variations

Compose with utilities#

html
<div class="neu-light p-6 rounded-2xl max-w-xs">Soft</div>

Customization#

v1 components are frozen CSS — customize by overriding after the stylesheet, or by redefining the palette variables they consume.

Accessibility#

  • Soft contrast fails in bright environments — test outdoors

components/index|Components hub · themes/index|Themes · recipes/index|Recipes