Components
Card

Card Component

Installation

The Card component provides a flexible container for organizing related content.

Installation Command
npx @nativecn/cli add card

Basic Example

Basic Card Layout

Account Settings
Manage your account preferences and details
Your account content goes here

With Footer Actions

Card with Footer Actions

New Project
Create a new project from scratch
Cancel
Create Project

Profile Card Example

Profile Card

major tom
Full Stack Developer
📍 Bengaluru, India
📧 tailwiinder@gmail.com
🔗 github.com/tailwiinder

Usage Example

Responsive Card with Dynamic Mode
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@nativecn/ui';
import { useColorScheme } from 'react-native';

export function ProductCard({ product }) {
  const colorScheme = useColorScheme();
  
  return (
    <Card mode={colorScheme}>
      <CardHeader>
        <CardTitle mode={colorScheme}>{product.name}</CardTitle>
        <CardDescription mode={colorScheme}>{product.category}</CardDescription>
      </CardHeader>
      <CardContent>
        <Image 
          source={{ uri: product.image }}
          style={{ width: '100%', height: 200 }}
          resizeMode="cover"
        />
        <Text style={{ marginTop: 16 }}>{product.description}</Text>
        <Text style={{ marginTop: 8, fontWeight: 'bold' }}>
            {product.price}
        </Text>
      </CardContent>
    </Card>
  );
}

Reference

Card Component Props
// Card Props
interface CardProps extends ViewProps {
  className?: string;
  mode?: 'light' | 'dark';
}

// CardHeader Props
interface CardHeaderProps extends ViewProps {
  className?: string;
}

// CardTitle Props
interface CardTitleProps extends TextProps {
  className?: string;
  mode?: 'light' | 'dark';
}

// CardDescription Props
interface CardDescriptionProps extends TextProps {
  className?: string;
  mode?: 'light' | 'dark';
}

// CardContent Props
interface CardContentProps extends ViewProps {
  className?: string;
}

// CardFooter Props
interface CardFooterProps extends ViewProps {
  className?: string;
}
ButtonCarousel