reactnatively

Card (LiquidCard)

A glass-surfaced container built on the Liquid Glass engine. Compose structured layouts using LiquidCardHeader, LiquidCardBody, LiquidCardFooter, and LiquidCardImage.

Import

typescript

import {
  LiquidCard,
  LiquidCardHeader,
  LiquidCardBody,
  LiquidCardFooter,
  LiquidCardImage,
} from 'reactnatively';

Interactive preview

Jane Doe

@janedoe · Pro

1.2K

Posts

48K

Followers

312

Following

ProfileCard.tsx

1import { View, Text, StyleSheet } from 'react-native';2import { Card, Avatar, Badge } from 'reactnatively';34export function ProfileCard({ user }: { user: User }) {5  return (6    <Card variant="glass" elevation={2} borderRadius={20} style={styles.card}>7      <View style={styles.header}>8        <Avatar size="lg" src={{ uri: user.avatar }} name={user.name} />9        <View>10          <Text style={styles.name}>{user.name}</Text>11          <Text style={styles.handle}>@{user.handle}</Text>12        </View>13        <Badge label="Pro" status="primary" style={styles.badge} />14      </View>15      <View style={styles.stats}>16        <Stat label="Posts" value={user.posts} />17        <Stat label="Followers" value={user.followers} />18        <Stat label="Following" value={user.following} />19      </View>20    </Card>21  );22}2324const styles = StyleSheet.create({25  card: { padding: 20, gap: 16 },26  header: { flexDirection: 'row', alignItems: 'center', gap: 12 },27  name: { color: '#fff', fontWeight: '600', fontSize: 14 },28  handle: { color: 'rgba(255,255,255,0.4)', fontSize: 12, marginTop: 2 },29  badge: { marginLeft: 'auto' },30  stats: { flexDirection: 'row', justifyContent: 'space-around', borderTopWidth: 1, borderTopColor: 'rgba(255,255,255,0.06)', paddingTop: 14 },31});

Product card

ProductCard.tsx

1import { View, StyleSheet } from 'react-native';2import {3  LiquidCard,4  LiquidCardImage,5  LiquidCardBody,6  LiquidCardFooter,7  Heading,8  Text,9  Button,10  Badge,11} from 'reactnatively';1213export function ProductCard({ product }) {14  return (15    <LiquidCard elevation={2} borderRadius={20} pressable onPress={() => openProduct(product.id)}>16      <LiquidCardImage source={{ uri: product.imageUrl }} height={180} rounded />17      <LiquidCardBody>18        <View style={styles.titleRow}>19          <Heading level="h4">{product.name}</Heading>20          <Badge label="New" status="success" variant="subtle" size="sm" />21        </View>22        <Text variant="sm" color="rgba(255,255,255,0.5)" numberOfLines={2}>23          {product.description}24        </Text>25        <Text variant="lg" weight="bold">${product.price}</Text>26      </LiquidCardBody>27      <LiquidCardFooter bordered>28        <Button variant="solid" color="primary" fullWidth onPress={() => addToCart(product.id)}>29          Add to Cart30        </Button>31      </LiquidCardFooter>32    </LiquidCard>33  );34}3536const styles = StyleSheet.create({37  titleRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },38});

Dashboard stats

StatsGrid.tsx

1import { View, StyleSheet } from 'react-native';2import { LiquidCard, LiquidCardBody, Heading, Text } from 'reactnatively';34const stats = [5  { label: 'Revenue', value: '$48,200', trend: '+12%', color: '#4ade80' },6  { label: 'Users', value: '14.3K', trend: '+8%', color: '#60a5fa' },7  { label: 'Orders', value: '1,204', trend: '-3%', color: '#f87171' },8  { label: 'Retention', value: '87%', trend: '+2%', color: '#a78bfa' },9];1011export function StatsGrid() {12  return (13    <View style={styles.grid}>14      {stats.map((stat) => (15        <LiquidCard key={stat.label} elevation={1} borderRadius={16} style={styles.card}>16          <LiquidCardBody compact>17            <Text variant="xs" color="rgba(255,255,255,0.4)">{stat.label}</Text>18            <Heading level="h3" style={{ marginTop: 4 }}>{stat.value}</Heading>19            <Text variant="sm" color={stat.color}>{stat.trend}</Text>20          </LiquidCardBody>21        </LiquidCard>22      ))}23    </View>24  );25}2627const styles = StyleSheet.create({28  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12, padding: 16 },29  card: { width: '47%' },30});

Props

Prop	Type	Default	Description
elevation	0 \| 1 \| 2 \| 3 \| 4 \| 5	2	Glass depth level controlling blur, shadow, and tint.
variant	'ultraThin' \| 'thin' \| 'surface' \| 'elevated' \| 'overlay' \| 'frosted' \| 'tinted'	"surface"	Glass tint preset.
borderRadius	number	20	Corner radius in logical pixels.
glow	{ color: string; radius?: number; opacity?: number } \| false	undefined	Outer glow effect. iOS-only.
border	boolean	true	Glass edge border ring.
pressable	boolean	false	Makes the card respond to touch with a press animation.
onPress	() => void	undefined	Called when the card is pressed (requires pressable).
onLongPress	() => void	undefined	Called on long press.
fullWidth	boolean	false	Stretches the card to fill its container width.
style	StyleProp<ViewStyle>	undefined	Style applied to the outer container.
contentStyle	StyleProp<ViewStyle>	undefined	Style applied to the inner content wrapper.
children	ReactNode	undefined	Card content — use sub-components for structure.