Components
Card

Card Component

The Card component in sidcn is a versatile container that allows you to organize and present information in a structured and visually appealing way. With customizable components like CardHeader, CardContent, and CardFooter, you can create engaging and responsive card layouts for your React Native and Expo applications.

HelloHello

Add Card Component

npx sidcn add card

Reset Cache

yarn start --clear // yarn
 
npm start -- --reset-cache // npm

Import Card

Get started with the Card component by importing it from sidcn.

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

How to use

Create a card with various components such as CardHeader, CardContent, and CardFooter.

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

Use with className

<Card className="w-full">
  <CardHeader>
    <CardTitle className='text-[20px]'>Card Title</CardTitle>
    <CardDescription className='text-[10px]'>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <View className="flex flex-row space-x-2">
      <Badge>Primary</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </View>
  </CardContent>
  <CardFooter className="flex flex-row">
    <Button variant="primary" className='w-full h-10'>Click me</Button>
  </CardFooter>
</Card>
ButtonCheckbox