Entity Card

A versatile card component for displaying entity data with support for images, fields, metrics, progress bars, status badges, and tilt animations. Uses generic typing for type-safe entity rendering.

Installation

$ npx shadcn@latest add @orecus/entity-card

Dependencies:

motion

Registry:

@orecus/progress@orecus/color-utils@orecus/use-tilt-animation

Component

Generic entity cards for projects, loans, budgets, and more.

Project Card

In Progress

Kitchen Renovation

Timeline100%

Jan 15, 2024

Jun 30, 2024

$32,500

$45,000

3 contacts

12/28 tasks

Loan Card

Home Mortgage

First National Bank

$285,000

Rate: 4.5%

Monthly: $1,850

Paid Off35%

Mortgage

LN-2024-0042

Budget Card

Expense

Monthly Utilities

$342

$400

Props

Prop	Type	Default	Description
`entity`*	`T extends BaseEntity`	—	The entity object to display in the card
`title`*	`CardTitle<T>`	—	Title configuration with key, render function, and left/right content slots
`image`	`CardImage<T>`	—	Image configuration with src, alt, aspectRatio, objectFit
`ImageComponent`	`React.ElementType`	`'img'`	Image component to use (e.g., next/image for Next.js)
`fields`	`CardField<T>[]`	—	Array of field configurations to display
`metrics`	`MetricField<T>[]`	—	Metrics displayed in a 2-column grid in the card body
`footerMetrics`	`MetricField<T>[]`	—	Metrics displayed in the footer section
`progress`	`ProgressField<T>`	—	Progress bar configuration with value, label, placement (top/bottom/footer)
`status`	`StatusField<T>`	—	Status badge displayed on the image with value and variant
`hoverEffect`	`MaybeEntityValue<T, 'none' \| 'lift' \| 'scale' \| 'tilt'>`	`'none'`	Hover effect style. Supports static value or entity-derived function.
`tiltConfig`	`TiltConfig`	—	Configuration for tilt animation (max angle, perspective, scale, speed). Only used with tilt effects.
`hoverBorder`	`MaybeEntityValue<T, boolean>`	`false`	Whether border color animates on hover. Supports static value or entity-derived function.
`hoverGlow`	`MaybeEntityValue<T, boolean>`	`false`	Whether to show gradient glow effect on hover. Supports static value or entity-derived function.
`onClick`	`(entity: T) => void`	—	Click handler - makes card interactive with hover effects
`type`	`MaybeEntityValue<T, 'normal' \| 'subtle' \| 'strong' \| 'solid' \| 'none'>`	`'normal'`	Card glass effect variant. Supports static value or entity-derived function.
`invert`	`MaybeEntityValue<T, boolean>`	`false`	Invert glass overlay approach. Supports static value or entity-derived function.
`accentBar`	`MaybeEntityValue<T, 'none' \| 'top' \| 'bottom'>`	`'none'`	Gradient accent bar position. Supports static value or entity-derived function.
`accentBarVariant`	`MaybeEntityValue<T, 'fade' \| 'solid'>`	`'fade'`	Accent bar gradient style. Supports static value or entity-derived function.
`accentColor`	`MaybeEntityValue<T, ThemeColor>`	`'primary'`	Predefined accent color for accent bar. Supports static value or entity-derived function for dynamic coloring per entity.
`accentBarOnHover`	`MaybeEntityValue<T, boolean>`	`false`	Whether accent bar appears only on hover. Supports static value or entity-derived function.
`className`	`string`	—	Additional CSS classes for the card
`loading`	`boolean`	`false`	Shows skeleton loading state when true
`bento`	`BentoConfig`	—	Bento grid configuration. When provided, card uses h-full and flex layout to fill grid cells. Supports optional minHeight class override.