Foundations/Shade

Shade

Five steps of elevation from one light source.

Shade

shade-1Rows, chips
shade-2Cards
shade-3Menus, popovers
shade-4Panels, sheets
shade-5Dialogs, windows

Every step is a contact shadow and an ambient one, from a single light above, with a 1px inset edge so the surface reads on any background. Tailwind's shadow-xs … shadow-xl map to the same steps, so shadcn components get them too.