Usage

Choose an area with Lighting, then mark the elements that should respond with Lighting.Surface. Keep your own styles and interactions.

Connect an area

Install Edge and load its CSS from Installation. React 19 is required. In frameworks with Server Components, place interactive lighting components and hooks inside a client boundary.

Wrap the part of your interface you want to connect in Lighting. Add Lighting.Surface only to the elements that should respond. Other elements keep their appearance. A nested Lighting creates an independent scope.

Project overview

One light connects this card, the button and the input wrapper.

Project name

This ordinary element has no lighting decoration.

<Lighting>
  <Lighting.Surface as="article">
    Project overview
  </Lighting.Surface>
  <Lighting.Surface as="button" type="button" onClick={saveProject}>
    Save project
  </Lighting.Surface>
  <Lighting.Surface as="label" edgeStyle="recessed">
    Project name
    <Input name="project-name" defaultValue="Website refresh" />
  </Lighting.Surface>
</Lighting>

The example becomes interactive when JavaScript is enabled.

<Lighting>
  <Lighting.Surface as="article">
    Project overview
  </Lighting.Surface>
  <Lighting.Surface as="button" type="button" onClick={saveProject}>
    Save project
  </Lighting.Surface>
  <Lighting.Surface as="label" edgeStyle="recessed">
    Project name
    <Input name="project-name" defaultValue="Website refresh" />
  </Lighting.Surface>
</Lighting>

Keep your styles and events

Use as to choose the HTML element, and pass events and refs to that element. The className and style props are optional: use them to apply your existing styles, not to enable Edge. Lighting adds no wrapper; each Surface renders one host.

<Lighting.Surface as="button" onClick={saveProject}>
  Save project
</Lighting.Surface>

Inputs need a wrapper. If an existing decoration conflicts, see Integration. Choose appearance and movement in Style and Motion.

Connect an existing component

The component API above is the default way to use Edge. If a Card or Button already owns its DOM element, use the ref-based integration in the API reference. Create one light in the common parent and connect each existing component to that light.

For layout changes or decoration conflicts, see Integration.