Layout
Row and Column arrange content horizontally and vertically with Flex alignment, spacing, and sizing props. Row accepts
row (the default) or row-reverse for direction; Column accepts column (the default) or column-reverse. Both default to gap="sm", and Column defaults to fullWidth={true}.Source
LLM docs
Package
Examples
1
Properties
41
Basics
Combine Row and Column to arrange content in horizontal and vertical groups.
Loading demo…
import { Block, Column, Row, Text } from '@plocks/ui';
export function Demo() {
return (
<Column gap="md" fullWidth>
<Row gap="sm">
<Block bg="subtle" p="sm">
<Text>First</Text>
</Block>
<Block bg="subtle" p="sm">
<Text>Second</Text>
</Block>
</Row>
<Text>Rows place items side by side; columns stack them.</Text>
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources