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 { TextRef, ViewRef } from '@rn-primitives/types';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';
const Card = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => ( <View ref={ref} className={cn( 'rounded-lg border border-border bg-card shadow-sm shadow-foreground/10', className )} {...props} />));Card.displayName = 'Card';
const CardHeader = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => ( <View ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />));CardHeader.displayName = 'CardHeader';
const CardTitle = React.forwardRef<TextRef, TextProps>(({ className, ...props }, ref) => ( <Text role='heading' aria-level={3} ref={ref} className={cn( 'text-2xl text-card-foreground font-semibold leading-none tracking-tight', className )} {...props} />));CardTitle.displayName = 'CardTitle';
const CardDescription = React.forwardRef<TextRef, TextProps>(({ className, ...props }, ref) => ( <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />));CardDescription.displayName = 'CardDescription';
const CardContent = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => ( <TextClassContext.Provider value='text-card-foreground'> <View ref={ref} className={cn('p-6 pt-0', className)} {...props} /> </TextClassContext.Provider>));CardContent.displayName = 'CardContent';
const CardFooter = React.forwardRef<ViewRef, ViewProps>(({ className, ...props }, ref) => ( <View ref={ref} className={cn('flex flex-row items-center p-6 pt-0', className)} {...props} />));CardFooter.displayName = 'CardFooter';
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