Card

Displays a card with header, content, and footer.

Installation

Terminal

npx flexnative-cli add "https://registry.flexnative.com/c/card.json"

Usage

Importing

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

Using

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
  <p>Card Content</p>
</CardContent>
<CardFooter>
  <p>Card Footer</p>
</CardFooter>
</Card>

Examples

API

Card

Displays a container to wrap header, content, and footer with dynamic styling based on the theme.

Prop	Type	Description	Default
`children`	`ReactNode`	Content of the card.	-
`style`	`StyleProp<ViewStyle>`	Additional styles for the card.	-

CardHeader

Defines the top section of the card, typically for the title and description.

Prop	Type	Description	Default
`children`	`ReactNode`	Content inside the header.	-
`style`	`StyleProp<ViewStyle>`	Additional styles for the header.	-

CardTitle

Renders the main title within the CardHeader.

Prop	Type	Description	Default
`children`	`ReactNode`	Title text.	-
`style`	`StyleProp<TextStyle>`	Additional styles for the title.	-

CardDescription

Provides a smaller descriptive text within the CardHeader.

Prop	Type	Description	Default
`children`	`ReactNode`	Description text.	-
`style`	`StyleProp<TextStyle>`	Additional styles for the description.	-

CardContent

Main content area of the card for body elements.

Prop	Type	Description	Default
`children`	`ReactNode`	Body content.	-
`style`	`StyleProp<ViewStyle>`	Additional styles for the content.	-

CardFooter

Defines the bottom section of the card, often for actions like buttons.

Prop	Type	Description	Default
`children`	`ReactNode`	Footer content.	-
`style`	`StyleProp<ViewStyle>`	Additional styles for the footer.	-