Card Primitives: The shadcn/ui Components Behind ToolCard

ToolCard is built on shadcn/ui Card sub-components. While ToolCard covers the standard use case — logo, name, description, fields list, actions, and footer — understanding the underlying primitives lets you build custom tool UI layouts that follow the same visual language without being constrained by the default structure.

The Card primitives (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) are used internally by ToolCard but are not re-exported from ai-tool-elements. The public API surface of the package is ToolCard, ToolCardProps, toolCatalog, and the TypeScript types (Tool, ToolCatalogItem, ToolField, ToolImage). If you need the Card primitives directly, install shadcn/ui and add the Card component to your project.

Available primitives

These are the seven sub-components that make up the shadcn/ui Card used inside ToolCard:

Primitive	Element	Key classes	Purpose
`Card`	`div`	`rounded-xl border border-border bg-card shadow-sm py-6`	Outer container. The root of every card.
`CardHeader`	`div`	`@container/card-header grid auto-rows-min px-6`	Flex/grid header row. Switches to a two-column layout when a `CardAction` is present.
`CardTitle`	`div`	`font-semibold leading-none`	Bold title text. Rendered by `ToolCard` as the tool name.
`CardDescription`	`div`	`text-sm text-muted-foreground`	Muted small description. Rendered by `ToolCard` as the tool description.
`CardAction`	`div`	`col-start-2 row-span-2 row-start-1 self-start justify-self-end`	Slots into the top-right of the header grid. Used by `ToolCard` for the `actions` prop.
`CardContent`	`div`	`px-6`	Padded content area. Used by `ToolCard` to render the `tool.fields` list.
`CardFooter`	`div`	`flex items-center px-6`	Padded footer row. `ToolCard` adds `border-t` when rendering the `footer` prop.

Installing shadcn/ui Card

To use these primitives in your own components, add the shadcn/ui Card to your project:

npx shadcn@latest add card

This copies the Card component source into your project under components/ui/card.tsx, where you can modify it freely. See the shadcn/ui Card documentation for the full installation guide.

How ToolCard uses the primitives

The structure ToolCard builds from these primitives is straightforward. Here is the rendered tree, condensed for clarity:

<Card>
  <CardHeader>
    {/* 40×40 px logo image — rendered only when tool.image is set */}
    <div>
      <CardTitle>{tool.name}</CardTitle>
      {/* CardDescription — rendered only when tool.description is set */}
      {tool.description ? (
        <CardDescription>{tool.description}</CardDescription>
      ) : null}
    </div>
    {/* CardAction — rendered only when the actions prop is provided */}
    {actions ? <CardAction>{actions}</CardAction> : null}
  </CardHeader>

  {/* CardContent — rendered only when tool.fields is non-empty */}
  {tool.fields?.length ? (
    <CardContent>
      {/* field list items */}
    </CardContent>
  ) : null}

  {/* CardFooter — rendered only when the footer prop is provided */}
  {footer ? <CardFooter className="border-t">{footer}</CardFooter> : null}
</Card>

CardDescription, CardAction, CardContent, and CardFooter are all conditionally rendered: CardDescription only when tool.description is set; CardAction only when actions is provided; CardContent only when tool.fields has at least one entry; CardFooter only when footer is provided.

Customizing with className

Because ToolCard spreads all extra props onto the underlying Card div, you can pass a className to override or extend any of its default styles without touching the primitives directly:

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

<ToolCard tool={Slack} className="border-2 border-blue-500" />

Tailwind’s merge utility (cn) inside the Card component ensures your class additions compose correctly with the defaults.

Using shadcn/ui Card directly

For fully custom layouts that go beyond what ToolCard provides, use the shadcn/ui Card primitives directly after installing them. The same sub-component structure applies:

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function CustomToolCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Custom Tool</CardTitle>
        <CardDescription>A hand-crafted tool card layout.</CardDescription>
        <CardAction>
          <button>Configure</button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p>Any content you need here.</p>
      </CardContent>
      <CardFooter className="border-t">
        <span>Connected</span>
      </CardFooter>
    </Card>
  );
}

Refer to the shadcn/ui Card docs for the full component reference and theming options.

ToolCard forwards all extra props to the underlying Card div, so you can pass data-* attributes, aria-* attributes, and event handlers (such as onClick or onKeyDown) directly to ToolCard without needing to wrap it in another element.

Get Started

Components

Tool Catalog

Guides

Card Primitives: The shadcn/ui Components Behind ToolCard

Available primitives

Installing shadcn/ui Card

How ToolCard uses the primitives

Customizing with className

Using shadcn/ui Card directly

​Available primitives

​Installing shadcn/ui Card

​How ToolCard uses the primitives

​Customizing with className

​Using shadcn/ui Card directly

Available primitives

Installing shadcn/ui Card

How ToolCard uses the primitives

Customizing with className

Using shadcn/ui Card directly