Card

Installation

Examples

Props

Used by

Files installed (3)

• components/ui/card/card.tsx2.7 kB

  Copy

  import * as React from 'react'
  import { cn } from '@/lib/utils'
  import { cardVariants, type CardVariants } from './card.variants'
  
  export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, CardVariants {}
  
  const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, variant, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="card"
      className={cn(cardVariants({ variant }), 'overflow-hidden', className)}
      {...props}
    />
  ))
  Card.displayName = 'Card'
  
  const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="card-header"
        className={cn(
          'grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] items-start gap-1.5 p-6 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]',
          className,
        )}
        {...props}
      />
    ),
  )
  CardHeader.displayName = 'CardHeader'
  
  const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => (
      <h3
        ref={ref}
        data-uipkge=""
        data-slot="card-title"
        className={cn('leading-none font-semibold tracking-tight', className)}
        {...props}
      />
    ),
  )
  CardTitle.displayName = 'CardTitle'
  
  const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
    ({ className, ...props }, ref) => (
      <p
        ref={ref}
        data-uipkge=""
        data-slot="card-description"
        className={cn('text-muted-foreground text-sm', className)}
        {...props}
      />
    ),
  )
  CardDescription.displayName = 'CardDescription'
  
  const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="card-action"
        className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
        {...props}
      />
    ),
  )
  CardAction.displayName = 'CardAction'
  
  const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
      <div ref={ref} data-uipkge="" data-slot="card-content" className={cn('p-6 pt-0', className)} {...props} />
    ),
  )
  CardContent.displayName = 'CardContent'
  
  const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="card-footer"
        className={cn('flex items-center p-6 pt-0', className)}
        {...props}
      />
    ),
  )
  CardFooter.displayName = 'CardFooter'
  
  export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter }
  

• components/ui/card/card.variants.ts1 kB

  Copy
• components/ui/card/index.ts0.2 kB

  Copy

Raw manifest:https://uipkge.dev/r/react/card.json

Related components