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.

​
Card

Card is a data display component for grouping related content in a styled container.

​
Import

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

​
Usage

import { Card, Text, Heading, Flex } from 'radix-native-ui';

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Card Title</Heading>
    <Text>Card content goes here.</Text>
  </Flex>
</Card>

​
Props

​
Examples

​
Variants

<Card variant="solid">Solid card</Card>
<Card variant="soft">Soft card</Card>
<Card variant="surface">Surface card</Card>
<Card variant="outline">Outline card</Card>
<Card variant="ghost">Ghost card</Card>

​
Sizes

<Card size={1}>Small padding</Card>
<Card size={2}>Medium padding (default)</Card>
<Card size={3}>Large padding</Card>
<Card size={4}>Extra large padding</Card>

​
With Color

<Card color="blue">
  <Text>Blue card</Text>
</Card>

​
Profile Card

<Card>
  <Flex direction="column" gap={3}>
    <Flex direction="row" gap={3} align="center">
      <Avatar
        src="https://i.pravatar.cc/150"
        fallback="JD"
        size={5}
      />
      <Flex direction="column">
        <Heading size={3}>John Doe</Heading>
        <Text size={2} color="gray">Software Engineer</Text>
      </Flex>
    </Flex>
    <Text>
      Building beautiful mobile apps with React Native and Radix Themes.
    </Text>
    <Button>View Profile</Button>
  </Flex>
</Card>

​
Product Card

<Card>
  <Flex direction="column" gap={3}>
    <Inset clip="overflow">
      <Image
        source={{ uri: 'https://example.com/product.jpg' }}
        style={{ width: '100%', height: 150 }}
      />
    </Inset>
    <Flex direction="column" gap={2}>
      <Flex direction="row" justify="between" align="center">
        <Heading size={3}>Product Name</Heading>
        <Badge color="green">New</Badge>
      </Flex>
      <Text size={2} color="gray">Product description goes here.</Text>
      <Flex direction="row" justify="between" align="center">
        <Text weight="bold" size={4}>$29.99</Text>
        <Button size={1}>Add to Cart</Button>
      </Flex>
    </Flex>
  </Flex>
</Card>

​
Stats Card

<Card>
  <Flex direction="column" gap={2}>
    <Text size={2} color="gray">Total Revenue</Text>
    <Heading size={6}>$12,345</Heading>
    <Flex direction="row" gap={1} align="center">
      <Badge color="green" size={1}>+12%</Badge>
      <Text size={1} color="gray">vs last month</Text>
    </Flex>
  </Flex>
</Card>
  • Box - Primitive container
  • Flex - Flexbox layout
  • Inset - Inset component