# Card 03 - Total Assets Card

> Present total assets with supporting metrics like employees, projects, clients, and events in a simple overview card. Useful for finance, investment, crypto, and portfolio dashboards.

A shadcn/ui block from the [@shadcn-dashboard](https://shadcndashboard.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-dashboard/total-assets-card).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-dashboard/total-assets-card
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-dashboard/total-assets-card-light-c5e3a528074ca2f0.png
- Registry item: https://shadcndashboard.dev/r/total-assets-card.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcndashboard.dev/r/total-assets-card.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `card`

## Files

### `src/components/shadcn-dashboard/blocks/cards/total-assets-card.tsx`

```tsx

'use client'
import { CardContent, CardHeader,Card, CardTitle } from '@/components/ui/card';
import { Bookmark, BriefcaseBusiness, Box, Users, File } from 'lucide-react';


const assetsData = [
  {
    id: 'Employees',
    title: 'Employees',
    href: '/apps/kanban',
    value: '96',
    icon: Users
  },

  {
    id: 'Projects',
    title: 'Projects',
    href: '/apps/calendar',
    value: '356',
    icon: File
  },
  {
    id: 'Clients',
    title: 'Clients',
    href: '/',
    value: '3,650',
    icon: BriefcaseBusiness
  },
  {
    id: 'Events',
    title: 'Events',
    href: '/',
    value: '86',
    icon: Bookmark
  },
];

type AssetCardProps = {
  title: string;
  href: string;
  value: string ;
  icon: any;
};

function AssetCard({ title, value, icon: Icon }: AssetCardProps) {
  return (
    <div className='flex flex-col gap-6 p-6 bg-background'>
      <div className='border border-border rounded-md p-2 w-fit'>
        <Icon size={16} />
      </div>  
      <div>
        <h6 className='text-2xl font-semibold'>{value}</h6>
        <p className='text-sm font-normal'>{title}</p>
      </div>
    </div>
  );
}

export default function TotalAssets() {
  return (
    <div className="w-full max-w-lg">
     <Card className="flex flex-col gap-0! pb-0! h-full">
      <CardHeader className="border-b border-border">
        <CardTitle className="flex items-center gap-2">
          <Box size={16} className="text-muted-foreground" />
          Total Assets
        </CardTitle>
      </CardHeader>
      <CardContent className='p-0!'>
        <div className='grid grid-cols-2 gap-px bg-border'>
          {assetsData.map((item) => (
            <AssetCard key={item.id} {...item} />
          ))}
        </div>
      </CardContent>
    </Card>
    </div>
  );
}
```