@molecule/app-info-display-react

React InfoCard and DefinitionList for structured label/value metadata.

Exports:

<InfoCard> — Card-wrapped DefinitionList with title, icon, actions.
<DefinitionList> — standalone label/value grid.
DefinitionField type.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { InfoCard, DefinitionList } from '@molecule/app-info-display-react'

;<InfoCard
  title="Company Details"
  fields={[
    { label: 'Industry', value: 'Technology' },
    { label: 'Founded', value: '2018' },
    { label: 'Employees', value: '120–150' },
  ]}
  columns={2}
  dataMolId="company-info-card"
/>

Type

feature

Installation

npm install @molecule/app-info-display-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
npm install -D @types/react

API

Interfaces

`DefinitionField`

A single label/value pair rendered inside a DefinitionList.

interface DefinitionField {
  /** Label text (usually `t('...')`). */
  label: ReactNode
  /** Rendered value. */
  value: ReactNode
  /** Optional icon rendered to the left of the label. */
  icon?: ReactNode
}

`DefinitionListProps`

Props for DefinitionList.

interface DefinitionListProps {
  /** Fields to render. */
  fields: DefinitionField[]
  /** Grid column count. */
  columns?: 1 | 2 | 3
  /** Extra classes. */
  className?: string
}

`InfoCardProps`

Props for InfoCard.

interface InfoCardProps {
  /** Card heading. */
  title: ReactNode
  /** Optional leading icon. */
  icon?: ReactNode
  /** Optional right-side header actions (edit button, overflow menu). */
  actions?: ReactNode
  /** Structured fields to display. */
  fields: DefinitionField[]
  /** Grid column count — `1` stacks labels above values, `2+` puts labels beside values. */
  columns?: 1 | 2 | 3
  /** Extra classes on the outer Card. */
  className?: string
  /** `data-mol-id` for AI-agent selectors. */
  dataMolId?: string
}

Functions

`DefinitionList(props)`

Structured label/value pair list. Use standalone or inside <InfoCard>. Apps pass already-formatted values (dates, currency, status pills, etc.) as ReactNodes.

function DefinitionList({ fields, columns = 1, className }: DefinitionListProps): JSX.Element

props — Component props (see DefinitionListProps).

`InfoCard(props)`

Card wrapping a <DefinitionList> of metadata fields.

Used all over CRM/helpdesk/finance detail pages (CompanyInfoCard, DealInfoCard, TicketDetailsCard, TransactionDetailsCard) — same shape everywhere, only the fields differ.

function InfoCard({
  title,
  icon,
  actions,
  fields,
  columns = 1,
  className,
  dataMolId,
}: InfoCardProps): JSX.Element

props — Component props (see InfoCardProps).

Injection Notes

Requirements

Peer dependencies:

@molecule/app-react ^1.0.1
@molecule/app-ui ^1.0.1
@molecule/app-ui-react ^1.0.1
react ^18.0.0 || ^19.0.0

Runtime Dependencies

@molecule/app-react
@molecule/app-ui
@molecule/app-ui-react
react

Purely presentational: pass already-formatted / already-translated ReactNodes as labels and values. getClassMap() requires a bonded ClassMap (e.g. @molecule/app-ui-tailwind) — there is no other wiring. columns={1} stacks label above value; 2/3 arrange fields in a grid.

`@molecule/app-info-display-react`

How it works

Reference