Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Grid

Grid is a layout component for creating grid-based layouts using flexbox under the hood.

​
Import

import { Grid } from 'radix-native-ui';

​
Usage

import { Grid, Box, Text } from 'radix-native-ui';

<Grid columns={3} gap={4}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Grid>

​
Props

​
Examples

​
Basic Grid

<Grid columns={3} gap={3}>
  <Card>1</Card>
  <Card>2</Card>
  <Card>3</Card>
  <Card>4</Card>
  <Card>5</Card>
  <Card>6</Card>
</Grid>

​
Different Gaps

<Grid columns={2} columnGap={4} rowGap={2}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
  <Box>Item 4</Box>
</Grid>

​
Centered Grid

<Grid columns={2} gap={3} align="center" justify="center">
  <Box>Centered 1</Box>
  <Box>Centered 2</Box>
</Grid>

<Grid columns={3} gap={2}>
  {images.map((image, index) => (
    <AspectRatio key={index} ratio={1}>
      <Image source={{ uri: image.uri }} />
    </AspectRatio>
  ))}
</Grid>

​
Dashboard Cards

<Grid columns={2} gap={4}>
  <Card>
    <Flex direction="column" gap={2}>
      <Text size={2} color="gray">Total Users</Text>
      <Heading size={5}>1,234</Heading>
    </Flex>
  </Card>
  <Card>
    <Flex direction="column" gap={2}>
      <Text size={2} color="gray">Revenue</Text>
      <Heading size={5}>$12,345</Heading>
    </Flex>
  </Card>
  <Card>
    <Flex direction="column" gap={2}>
      <Text size={2} color="gray">Orders</Text>
      <Heading size={5}>567</Heading>
    </Flex>
  </Card>
  <Card>
    <Flex direction="column" gap={2}>
      <Text size={2} color="gray">Growth</Text>
      <Heading size={5}>+23%</Heading>
    </Flex>
  </Card>
</Grid>
  • Box - Primitive container
  • Flex - Flexbox layout component
  • Container - Responsive container