EntityCard

Card component for displaying entities with icon, badges, and stats

Default

Usage

import { EntityCard } from '@tryvienna/ui'

<div className="w-80">
  <EntityCard
    icon={<Target className="size-5" />}
    title="Project Alpha"
    description="Main development project for the Q1 product launch"
  />
</div>

Examples

Default

Default

<div className="w-80">
  <EntityCard
    icon={<Target className="size-5" />}
    title="Project Alpha"
    description="Main development project for the Q1 product launch"
  />
</div>

With Badges

With Badges

<div className="w-80">
  <EntityCard
    icon={<Rocket className="size-5" />}
    title="Deployment Pipeline"
    description="CI/CD configuration and deployment automation"
    badges={[
      { label: 'Active', variant: 'default' },
      { label: 'Production', variant: 'secondary' },
      { label: 'Critical', variant: 'destructive' },
      { label: 'v2.1', variant: 'outline' },
    ]}
  />
</div>

With Stats

With Stats

<div className="w-80">
  <EntityCard
    icon={<BarChart3 className="size-5" />}
    title="Analytics Dashboard"
    description="Real-time metrics and reporting interface"
    badges={[{ label: 'Active', variant: 'default' }]}
    stats={[
      { label: 'Views', value: '12.4k' },
      { label: 'Users', value: '842' },
      { label: 'Events', value: '3.2M' },
    ]}
  />
</div>

Clickable

Clickable

<div className="w-80">
  <EntityCard
    icon={<FolderOpen className="size-5" />}
    title="Documentation"
    description="Internal team docs and API reference"
    badges={[{ label: 'Updated', variant: 'secondary' }]}
    stats={[
      { label: 'Pages', value: '47' },
      { label: 'Contributors', value: '8' },
    ]}
    onClick={() => alert('Entity card clicked!')}
  />
</div>

Without Icon

Without Icon

<div className="w-80">
  <EntityCard
    title="Background Worker"
    description="Processes queued tasks and scheduled jobs"
    badges={[{ label: 'Running', variant: 'default' }]}
    stats={[
      { label: 'Jobs', value: '156' },
      { label: 'Failed', value: '2' },
    ]}
  />
</div>

API Reference

EntityCard

Prop	Type	Default	Description
icon	React.ReactNode	-
title	string	-
description	string	-
badges	EntityCardBadge[]	-
stats	EntityCardStat[]	-
trailing	React.ReactNode	-
onClick	() => void	-

Data Attributes

Component	data-slot
EntityCard	"entity-card"