ui Architecture Docs
Home / File/ card.tsx — ui Source File

card.tsx — ui Source File

Architecture documentation for card.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 2 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  cb4307b5_e5c3_2bef_e2df_d70322bd4a8a["card.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  cb4307b5_e5c3_2bef_e2df_d70322bd4a8a --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  cb4307b5_e5c3_2bef_e2df_d70322bd4a8a --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  style cb4307b5_e5c3_2bef_e2df_d70322bd4a8a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} 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}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

Domain

Subdomains

Functions

Dependencies

  • react
  • utils

Source

Frequently Asked Questions

What does card.tsx do?
card.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in card.tsx?
card.tsx defines 6 function(s): Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle.
What does card.tsx depend on?
card.tsx imports 2 module(s): react, utils.
Where is card.tsx in the architecture?
card.tsx is located at deprecated/www/registry/default/ui/card.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: deprecated/www/registry/default/ui).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free