TapCard - Tappify Documentation

function TapCard(__namedParameters): ReactElement;

Renders the bordered surface a widget, tab or page section sits in.

Parameters

__namedParameters

Returns

ReactElement

Remarks

Renders as a section on --bg-raised with a --divider border and the --tap-radius corner, and the footer in --fg-muted. The header appears only when title or action is given, and the body carries its own padding, so nest content directly rather than wrapping it in another padded box. A widget belongs in one card.

Example

import { TapButton, TapCard, TapStat } from '@tappify/extension-sdk';

function InstallSummary() {
  return (
    <TapCard
      title="Install summary"
      action={<TapButton variant="ghost" size="sm">Compact</TapButton>}
      footer={<span>Last seven days</span>}
    >
      <TapStat label="Installs" value="1,260" delta={0.087} />
    </TapCard>
  );
}