> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TapCard

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

```ts theme={null}
function TapCard(__namedParameters): ReactElement;
```

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

## Parameters

### \_\_namedParameters

[`TapCardProps`](/extensions/reference/frontend-api/Interface.TapCardProps)

## 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

```tsx theme={null}
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>
  );
}
```