Card

Card is the React Native implementation shipped by the native-card registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.

The native Card component is a composable surface for grouping related content. It mirrors the structure of the shadcn card while using React Native View and the native Typography component.

Use CardHeader, CardTitle, and CardDescription for the introductory content, CardContent for the main body, and CardFooter for actions or supporting controls.

See the shadcn/ui Card documentation for the web component API, concepts, and additional examples.

Installation

CLI

npx shadcn add https://ui.tiesen.id.vn/r/native-card.json

Manual

Copy and paste the following code into your project.

import type { Text } from 'react-native'import * as React from 'react'import { View } from 'react-native'import { cn } from '@/lib/utils'import { Typography, TypographyContext } from '@/components/native/typography'function Card({ className, ...props }: React.ComponentProps<typeof View>) {  return (    <TypographyContext value='text-card-foreground text-sm'>      <View        data-slot='card'        className={cn(          'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 ring-1 ring-foreground/10',          className        )}        {...props}      />    </TypographyContext>  )}function CardHeader({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='card-header'      className={cn(        'group/card-header flex flex-col items-start gap-1 rounded-t-xl px-4',        className      )}      {...props}    />  )}function CardTitle({ className, ...props }: React.ComponentProps<typeof Text>) {  return (    <Typography      data-slot='card-title'      className={cn(        'text-base leading-none font-semibold text-card-foreground',        className      )}      {...props}    />  )}function CardDescription({  className,  ...props}: React.ComponentProps<typeof Text>) {  return (    <Typography      data-slot='card-description'      className={cn('text-sm text-muted-foreground', className)}      {...props}    />  )}function CardAction({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='card-action'      className={cn('self-start justify-self-end', className)}      {...props}    />  )}function CardContent({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='card-content'      className={cn('px-4', className)}      {...props}    />  )}function CardFooter({  className,  ...props}: React.ComponentProps<typeof View>) {  return (    <View      data-slot='card-footer'      className={cn('flex items-center rounded-b-xl px-4', className)}      {...props}    />  )}export {  Card,  CardHeader,  CardFooter,  CardTitle,  CardAction,  CardDescription,  CardContent,}

Features

Composable card structure.
Header, title, description, action, content, and footer primitives.
Uses native View and Typography components.
Applies a shared typography context to card content.
Every primitive accepts a className for customization.

Registry dependencies: This component depends on native-typography.

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/native/card'
import { Button } from '@/components/native/button'

export function CardExample() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>
          Choose how you want to be notified.
        </CardDescription>
      </CardHeader>

      <CardContent>
        {/* form content */}
      </CardContent>

      <CardFooter>
        <Button>Save</Button>
      </CardFooter>
    </Card>
  )
}

Composition

Use the primitives together to create a consistent card hierarchy:

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Not every section is required. The primitives are simple layout components, so additional native children can be composed inside them.

Card actions

CardAction is a small layout wrapper intended for controls aligned independently from the title and description.

<CardHeader>
  <View className='flex-1'>
    <CardTitle>Team</CardTitle>
    <CardDescription>Manage your team members.</CardDescription>
  </View>
  <CardAction>
    <Button size='sm'>Invite</Button>
  </CardAction>
</CardHeader>