Card

v1.0.0

Layout

A flexible container for grouping related content with header, content, and footer sections

Installation

Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/card.json

Manual Installation

// 1. Copy the component code to components/ui/card.tsx

// 2. Usage example:
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function MyCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Card</CardTitle>
      </CardHeader>
      <CardContent>
        <p>This is my card content.</p>
      </CardContent>
    </Card>
  )
}

Props

Component properties and their types

className

string

default: ''

Additional CSS classes to apply to the card

Examples

2 different usage examples

Basic Card

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

export default function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
    </Card>
  )
}

Registry

View the component registry file

View Registry

Live Preview

Interactive

2 examples available

Card Title

Card description goes here

This is the card content. You can put any content here.