Row

The row is a div with display: flex and flex-direction: row. Like the Column component, it provides convenience props for basic flex configurations.

Example Instance

<Row gap="lg" justify-content="space-around" align-items="center">
  <div style={{ background: "#ddd", padding: "1rem" }}>Item 1</div>
  <div style={{ background: "#bbb", padding: "1rem" }}>Item 2</div>
  <div style={{ background: "#999", padding: "1rem" }}>Item 3</div>
</Row>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add row` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
alignItems	no	"start" \| "center" \| "end" \| "stretch"	Defines how children are aligned along the cross axis	undefined
defaultChildBehavior	no	"auto-grow" \| "auto-shrink" \| "ignoreFlexRules" \| "ignoreIntrinsicSize"	Determines the default behavior of children within the row	undefined
gap	no	LkSizeUnit	Sets the spacing between children in the row	undefined
justifyContent	no	"start" \| "center" \| "end" \| "space-between" \| "space-around"	Defines how children are distributed along the main axis	undefined
wrapChildren	no	boolean	Determines whether children should wrap onto multiple lines	undefined

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Supported
Native HTML attributes	Supported