ui Architecture Docs
Home / File/ section-cards.tsx — ui Source File

section-cards.tsx — ui Source File

Architecture documentation for section-cards.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx ApplicationExhibition Authentication 3 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  37488db0_4e40_94a7_1794_f1c2dac52430["section-cards.tsx"]
  39a0d62e_8e7d_d097_eb95_91d2bca361f7["icons-react"]
  37488db0_4e40_94a7_1794_f1c2dac52430 --> 39a0d62e_8e7d_d097_eb95_91d2bca361f7
  4c79c55d_d834_3cdd_ce17_cc4f4eb47d55["badge"]
  37488db0_4e40_94a7_1794_f1c2dac52430 --> 4c79c55d_d834_3cdd_ce17_cc4f4eb47d55
  c6d6139d_ea69_3d79_5004_68419bae2ac0["card"]
  37488db0_4e40_94a7_1794_f1c2dac52430 --> c6d6139d_ea69_3d79_5004_68419bae2ac0
  style 37488db0_4e40_94a7_1794_f1c2dac52430 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"

import { Badge } from "@/registry/new-york-v4/ui/badge"
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/registry/new-york-v4/ui/card"

export function SectionCards() {
  return (
    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Total Revenue</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            $1,250.00
          </CardTitle>
          <CardAction>
            <Badge variant="outline">
              <IconTrendingUp />
              +12.5%
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Trending up this month <IconTrendingUp className="size-4" />
          </div>
          <div className="text-muted-foreground">
            Visitors for the last 6 months
          </div>
        </CardFooter>
      </Card>
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>New Customers</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            1,234
          </CardTitle>
          <CardAction>
            <Badge variant="outline">
              <IconTrendingDown />
              -20%
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Down 20% this period <IconTrendingDown className="size-4" />
          </div>
          <div className="text-muted-foreground">
            Acquisition needs attention
          </div>
        </CardFooter>
      </Card>
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Active Accounts</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            45,678
          </CardTitle>
          <CardAction>
            <Badge variant="outline">
              <IconTrendingUp />
              +12.5%
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Strong user retention <IconTrendingUp className="size-4" />
          </div>
          <div className="text-muted-foreground">Engagement exceed targets</div>
        </CardFooter>
      </Card>
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>Growth Rate</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            4.5%
          </CardTitle>
          <CardAction>
            <Badge variant="outline">
              <IconTrendingUp />
              +4.5%
            </Badge>
          </CardAction>
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            Steady performance increase <IconTrendingUp className="size-4" />
          </div>
          <div className="text-muted-foreground">Meets growth projections</div>
        </CardFooter>
      </Card>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • badge
  • card
  • icons-react

Source

Frequently Asked Questions

What does section-cards.tsx do?
section-cards.tsx is a source file in the ui codebase, written in tsx. It belongs to the ApplicationExhibition domain, Authentication subdomain.
What functions are defined in section-cards.tsx?
section-cards.tsx defines 1 function(s): SectionCards.
What does section-cards.tsx depend on?
section-cards.tsx imports 3 module(s): badge, card, icons-react.
Where is section-cards.tsx in the architecture?
section-cards.tsx is located at apps/v4/app/(app)/examples/dashboard/components/section-cards.tsx (domain: ApplicationExhibition, subdomain: Authentication, directory: apps/v4/app/(app)/examples/dashboard/components).

Analyze Your Own Codebase

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

Try Supermodel Free