Card
Types Primitives
Text ComponentDemo
Shows a card component.
Installation
npx @react-native-reusables/cli@latest add cardCopy/paste the following code to ~/components/ui/card.tsx
import * as React from 'react';import { Text, type TextProps, View, type ViewProps } from 'react-native';import { cn } from '~/lib/utils';import { TextClassContext } from '~/components/ui/text';
function Card({ className, ...props}: ViewProps & { ref?: React.RefObject<View>;}) { return ( <View className={cn( 'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10', className )} {...props} /> );}
function CardHeader({ className, ...props}: ViewProps & { ref?: React.RefObject<View>;}) { return <View className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;}
function CardTitle({ className, ...props}: TextProps & { ref?: React.RefObject<Text>;}) { return ( <Text role='heading' aria-level={3} className={cn( 'text-2xl text-card-foreground font-semibold leading-none tracking-tight', className )} {...props} /> );}
function CardDescription({ className, ...props}: TextProps & { ref?: React.RefObject<Text>;}) { return <Text className={cn('text-sm text-muted-foreground', className)} {...props} />;}
function CardContent({ className, ...props}: ViewProps & { ref?: React.RefObject<View>;}) { return ( <TextClassContext.Provider value='text-card-foreground'> <View className={cn('p-6 pt-0', className)} {...props} /> </TextClassContext.Provider> );}
function CardFooter({ className, ...props}: ViewProps & { ref?: React.RefObject<View>;}) { return <View className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />;}
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };Usage
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from '~/components/ui/card';import { Text } from '~/components/ui/text';
function Example() { return ( <Card className='w-full max-w-sm'> <CardHeader> <CardTitle>Card Title</CardTitle> <CardDescription>Card Description</CardDescription> </CardHeader> <CardContent> <Text>Card Content</Text> </CardContent> <CardFooter> <Text>Card Footer</Text> </CardFooter> </Card> );}Props
Card
Extends View props
CardHeader
Extends View props
CardTitle
Extends Text props
CardDescription
Extends Text props
CardContent
Extends View props
CardFooter
Extends View props