Card

Installation

$ pnpm dlx shadcn@latest add https://react.uipkge.dev/r/react/card.json

$ npx shadcn@latest add https://react.uipkge.dev/r/react/card.json

$ yarn dlx shadcn@latest add https://react.uipkge.dev/r/react/card.json

$ bunx shadcn@latest add https://react.uipkge.dev/r/react/card.json

Examples

Props

Dependencies

Used by

Files (3)

• components/ui/card/card.tsx 2.5 kB

  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('flex flex-col space-y-1.5 p-6', 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.ts 1 kB

  import type { VariantProps } from 'class-variance-authority'
  import { cva } from 'class-variance-authority'
  
  /**
   * Variant definitions live in their own file (rather than the package
   * `index.ts`) so `Card.vue` can `import { cardVariants } from './card.variants'`
   * without creating a circular dependency back through the index. The circular
   * form caused intermittent `$setup.cardVariants is not a function` errors
   * during dev SSR when several `<Card>` instances rendered in a v-for before
   * the module graph had fully resolved.
   */
  export const cardVariants = cva(
    'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150',
    {
      variants: {
        variant: {
          default: 'border-border',
          elevated: 'border-transparent shadow-md hover:shadow-md',
          outline: 'border-2',
          ghost: 'border-transparent shadow-none hover:bg-muted/50',
        },
      },
      defaultVariants: {
        variant: 'default',
      },
    },
  )
  
  export type CardVariants = VariantProps<typeof cardVariants>

• components/ui/card/index.ts 0.2 kB

  export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps } from './card'
  export { cardVariants, type CardVariants } from './card.variants'

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