> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/row.md).

# Row

The `Row` component adds space below a UI element or group of UI elements. It can optionally restrict the width of the row.

```javascript
import { Row } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Row width='md'>
        <div>Element 1</div>
        <div>Element 2</div>
      </Row>
    </div>
  );
}
```

### Props

| Prop      | Description                   | Required | Value                |
| --------- | ----------------------------- | -------- | -------------------- |
| children  | children to render            | required | component            |
| className | custom style                  | optional | SCSS or Tailwind     |
| mainTitle | the main title of the row     | optional | string               |
| width     | restrict the width of the row | optiona  | string (sm/md/lg/xl) |

### Notes

* The `children` prop allows for rendering nested components within the row.
* The `width` prop restricts the width of the row if provided.
* The `className` prop allows for custom styling to be applied.