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 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:
PrimitiveElementKey classesPurpose
Carddivrounded-xl border border-border bg-card shadow-sm py-6Outer container. The root of every card.
CardHeaderdiv@container/card-header grid auto-rows-min px-6Flex/grid header row. Switches to a two-column layout when a CardAction is present.
CardTitledivfont-semibold leading-noneBold title text. Rendered by ToolCard as the tool name.
CardDescriptiondivtext-sm text-muted-foregroundMuted small description. Rendered by ToolCard as the tool description.
CardActiondivcol-start-2 row-span-2 row-start-1 self-start justify-self-endSlots into the top-right of the header grid. Used by ToolCard for the actions prop.
CardContentdivpx-6Padded content area. Used by ToolCard to render the tool.fields list.
CardFooterdivflex items-center px-6Padded 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us