Usage

Choose an area

A light controls a group of surfaces that respond together. Choose a section or a few elements to share one light.

A surface is an element connected to that light. Only connected surfaces respond. Use a separate light for an independent area.

Keep your UI

Edge keeps your background, text, spacing and base border. Its highlight uses each surface’s own text color and border radius by default. Keep existing interactions and keyboard focus indicators.

Choose the surface response in Style and how the light moves in Motion.

For input wrappers and decoration conflicts, see Integration considerations.

For application-controlled position changes, see layout changes.

Choose your framework

Follow the guide for your framework.