NovaUI
Components

Card

A container component for grouping related content with header, body, and footer sections.

The Card component is a versatile container for grouping related content. It features a compound component API with header, title, description, content, and footer parts for flexible layouts. Built with NativeWind for consistent styling across platforms.

Preview

Card TitleCard description goes here.
This is the card content area where you can place any content.

Installation

npx novaui-cli add card

Import

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'novaui-components'

Basic Usage

The Card is a compound component with six parts:

  • Card - The outer container
  • CardHeader - Groups the title and description
  • CardTitle - The card heading
  • CardDescription - Subtitle or description text
  • CardContent - The main body area
  • CardFooter - Bottom section for actions
Card TitleCard description goes here.
This is the card content area where you can place any content.
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'novaui-components'
import { Button } from 'novaui-components'
import { Text } from 'react-native'

export function BasicCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here.</CardDescription>
      </CardHeader>
      <CardContent>
        <Text>This is the card content area where you can place any content.</Text>
      </CardContent>
      <CardFooter>
        <Button label="Action" />
      </CardFooter>
    </Card>
  )
}

Header Only

A simple card with just a header:

NotificationsYou have 3 unread messages.
<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
</Card>

With Content

A card with header and content sections:

AccountManage your account settings and preferences.
Emailjohn@example.com
PlanPro
StatusActive
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from 'novaui-components'
import { View, Text } from 'react-native'

export function AccountCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Account</CardTitle>
        <CardDescription>Manage your account settings and preferences.</CardDescription>
      </CardHeader>
      <CardContent>
        <View className="gap-3">
          <View className="flex-row items-center justify-between">
            <Text>Email</Text>
            <Text className="text-muted-foreground">john@example.com</Text>
          </View>
          <View className="flex-row items-center justify-between">
            <Text>Plan</Text>
            <Text className="text-muted-foreground">Pro</Text>
          </View>
          <View className="flex-row items-center justify-between">
            <Text>Status</Text>
            <Text className="text-muted-foreground">Active</Text>
          </View>
        </View>
      </CardContent>
    </Card>
  )
}

A card with action buttons in the footer:

Create ProjectDeploy your new project in one click.
Name
My Project
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'novaui-components'
import { Button } from 'novaui-components'
import { View, Text, TextInput } from 'react-native'

export function CreateProjectCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create Project</CardTitle>
        <CardDescription>Deploy your new project in one click.</CardDescription>
      </CardHeader>
      <CardContent>
        <View className="gap-2">
          <Text className="text-sm font-medium">Name</Text>
          <TextInput
            placeholder="My Project"
            className="h-10 w-full rounded-md border border-input bg-background px-3"
          />
        </View>
      </CardContent>
      <CardFooter className="justify-between">
        <Button variant="outline" label="Cancel" />
        <Button label="Deploy" />
      </CardFooter>
    </Card>
  )
}

Custom Styling

Apply custom classes to any part of the Card:

FeaturedA card with custom primary styling.
Custom borders and background colors using className overrides.
<Card className="border-2 border-primary bg-primary/5">
  <CardHeader>
    <CardTitle className="text-primary">Featured</CardTitle>
    <CardDescription className="text-primary/70">
      A card with custom primary styling.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <Text>Custom borders and background colors using className overrides.</Text>
  </CardContent>
</Card>

Card Grid

Display multiple cards in a grid layout:

128Total Users
$4,250Revenue
98%Uptime
42Active Now
import { Card, CardHeader, CardTitle, CardDescription } from 'novaui-components'
import { View } from 'react-native'

const stats = [
  { value: '128', label: 'Total Users' },
  { value: '$4,250', label: 'Revenue' },
  { value: '98%', label: 'Uptime' },
  { value: '42', label: 'Active Now' },
]

export function StatsGrid() {
  return (
    <View className="flex-row flex-wrap gap-4">
      {stats.map((stat) => (
        <Card key={stat.label} className="flex-1 min-w-[140px]">
          <CardHeader>
            <CardTitle>{stat.value}</CardTitle>
            <CardDescription>{stat.label}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </View>
  )
}

Props API

Card Props

Extends React.ComponentPropsWithoutRef<typeof View>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

CardHeader Props

Extends React.ComponentPropsWithoutRef<typeof View>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

CardTitle Props

Extends React.ComponentPropsWithoutRef<typeof Text>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

CardDescription Props

Extends React.ComponentPropsWithoutRef<typeof Text>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

CardContent Props

Extends React.ComponentPropsWithoutRef<typeof View>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

CardFooter Props

Extends React.ComponentPropsWithoutRef<typeof View>:

PropTypeDefaultDescription
classNamestring-Additional CSS classes

Best Practices

  1. Consistent structure: Always use CardHeader for title/description and CardContent for body

  2. Footer for actions: Place buttons and links in CardFooter for consistent alignment

  3. Don't nest cards: Avoid placing cards inside cards — use sections instead

  4. Responsive layouts: Use flex or grid wrappers to create responsive card grids

  5. Shadow usage: The default shadow is subtle — increase it with className for elevated cards

  • Combine with Button for card actions
  • Use Avatar inside cards for user profiles
  • Use Badge for status indicators on cards

Continue reading

Getting StartedComponents OverviewPopular: DialogSEO Playbook

Badge

A small status indicator component for displaying labels, counts, or categories.

Table

A structured data display component with rows, columns, headers, and optional footer and caption.

On this page

PreviewInstallationImportBasic UsageHeader OnlyWith ContentWith Footer ActionsCustom StylingCard GridProps APICard PropsCardHeader PropsCardTitle PropsCardDescription PropsCardContent PropsCardFooter PropsBest PracticesRelated Components