Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/omavashia2005/ai-tool-elements/llms.txt

Use this file to discover all available pages before exploring further.

ToolCard is a generic React component that renders a tool or connector as a styled card. It accepts a tool prop plus optional actions, footer, and any props the underlying Card div accepts. The component displays the connector’s logo, name, description, and configuration fields automatically from the shape of the tool object.

​
Signature

function ToolCard<T extends Tool>(props: ToolCardProps<T>): JSX.Element

​
Type Definition

type ToolCardProps<T extends Tool = Tool> = Omit<ComponentProps<typeof Card>, "children"> & {
  tool: T;
  actions?: ReactNode;
  footer?: ReactNode;
};

​
Props

​
tool
T extends Tool
required
The connector data to display. All visual content — logo, name, description, and configuration fields — is derived from this object. Must satisfy the Tool type at minimum, but can be any supertype when the component is used with an explicit type parameter.
​
actions
ReactNode
Content rendered in the card’s top-right action slot, inline with the connector name. Useful for interactive controls such as a Connect or Disconnect button, an Active badge, or a toggle switch.
​
footer
ReactNode
Content rendered in the card footer, below a top border that visually separates it from the main card body. Useful for metadata rows, last-sync timestamps, account identifiers, or secondary links.
​
className
string
Additional CSS class names passed to the underlying Card div. Merged with the component’s own classes. Inherited from ComponentProps<typeof Card>.
​
...props
ComponentProps<typeof Card>
Any prop accepted by the underlying shadcn Card component is forwarded directly to it. This includes all standard div HTML attributes: data-* attributes, aria-* accessibility attributes, event handlers such as onClick, inline style, and id.

​
Examples

import { Slack, ToolCard } from "ai-tool-elements";

<ToolCard tool={Slack} />

​
Generic Typing

ToolCard is fully generic over any type T that extends Tool. This means you can pass a richer subtype as the tool prop and TypeScript will track the additional properties through the component tree — for instance, accessing them inside actions or footer without a type cast. 
type TrackedTool = Tool & { readonly status: "active" | "inactive" };

const MyTrackedTool: TrackedTool = {
  id: "my-tool",
  name: "My Tool",
  status: "active",
};

// tool prop is typed as TrackedTool — tool.status is accessible in actions
<ToolCard<TrackedTool>
  tool={MyTrackedTool}
  actions={<span>{MyTrackedTool.status}</span>}
/>
When TypeScript can infer the type from the tool prop directly, the explicit <TrackedTool> type parameter is optional — inference handles it automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us