# Getting started · Usage

Understand lights and surfaces before connecting your components.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/docs/usage/

<a id="share-one-light"></a>

## 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.

<a id="keep-your-styles"></a>

## 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](https://edge.bolerish.com/docs/styles/) and how the light moves in [Motion](https://edge.bolerish.com/docs/motion/).

For input wrappers and decoration conflicts, see [Integration considerations](https://edge.bolerish.com/docs/integration/#wrap-inputs-you-own).

For application-controlled position changes, see [layout changes](https://edge.bolerish.com/docs/integration/#refresh-after-layout-changes).

<a id="connect-existing-components"></a>

## Choose your framework

Follow the guide for your framework.

[

### React





](https://edge.bolerish.com/docs/react/usage/)