Card

Card container with header, content, and footer sections.

Card Title

Card description goes here.

Card content area.

Web preview — components render natively on iOS & Android

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";

export function MyScreen() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here.</CardDescription>
      </CardHeader>
      <CardContent>
        <Text>Card content</Text>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

Installation#

npx @aniui/cli add card

Usage#

app/index.tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";

export function MyScreen() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here.</CardDescription>
      </CardHeader>
      <CardContent>
        <Text>Card content</Text>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

Compound Components#

Card is a compound component with the following exports:

ComponentDescription

Card

Root container with border and padding

CardHeader

Header section with bottom padding

CardTitle

Title text component

CardDescription

Description text in muted color

CardContent

Main content area

CardFooter

Footer with row layout for actions

Props#

PropTypeDefault

className

string

—

children

React.ReactNode

—

All sub-components accept className and their respective React Native base props.

Accessibility#

Semantic container for grouped content.
Supports className for custom styling and all React Native View accessibility props.

Source#

components/ui/card.tsx

import React from "react";
import { View, Text } from "react-native";
import { cn } from "@/lib/utils";

export interface CardProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  children?: React.ReactNode;
}
export function Card({ className, ...props }: CardProps) {
  return (
    <View
      className={cn("rounded-lg border border-border bg-card p-6", className)}
      {...props}
    />
  );
}
export interface CardHeaderProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  children?: React.ReactNode;
}
export function CardHeader({ className, ...props }: CardHeaderProps) {
  return <View className={cn("pb-4", className)} {...props} />;
}
export interface CardTitleProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}
export function CardTitle({ className, ...props }: CardTitleProps) {
  return (
    <Text
      className={cn("text-2xl font-semibold text-card-foreground tracking-tight", className)}
      {...props}
    />
  );
}
export interface CardDescriptionProps extends React.ComponentPropsWithoutRef<typeof Text> {
  className?: string;
}
export function CardDescription({ className, ...props }: CardDescriptionProps) {
  return <Text className={cn("text-sm text-muted-foreground", className)} {...props} />;
}
export interface CardContentProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  children?: React.ReactNode;
}
export function CardContent({ className, ...props }: CardContentProps) {
  return <View className={cn("py-2", className)} {...props} />;
}
export interface CardFooterProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  children?: React.ReactNode;
}
export function CardFooter({ className, ...props }: CardFooterProps) {
  return <View className={cn("flex-row items-center pt-4", className)} {...props} />;
}

Previous← Calendar NextCarousel →