Styling, Theming, and CSS Variables in ai-tool-elements

ai-tool-elements ships a bundled CSS file built with Tailwind CSS v4. Importing it once sets up all the card styles. You can override or extend those styles with your own Tailwind utility classes via the className prop, or by redefining the underlying CSS custom properties that the card components rely on.

Importing the bundled styles

The bundled stylesheet must be imported once in your application’s entry point before any ToolCard is rendered. Without it, the cards will have no default visual styles.

import "ai-tool-elements/styles.css";

Next.js — add to app/layout.tsx:

import "ai-tool-elements/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Vite — add to src/main.tsx:

import "ai-tool-elements/styles.css";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Overriding styles with className

ToolCard forwards all props it does not consume directly to the underlying Card element, including className. Any Tailwind utilities or custom classes you pass are merged on top of the default card styles using tailwind-merge, so conflicting utilities resolve predictably.

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

// Add a custom border color and hover effect
<ToolCard
  tool={Slack}
  className="border-blue-500 hover:shadow-md transition-shadow"
/>

Because the library uses tailwind-merge internally, passing a utility that targets the same property as a built-in class (e.g. a different border color) will correctly override it rather than producing duplicate declarations.

CSS custom properties

The card’s colors are driven by four CSS custom properties that map to shadcn/ui design tokens. You can redefine them at :root or at any parent scope to change the palette for all cards in that subtree:

:root {
  --card: #ffffff;
  --card-foreground: #0f172a;
  --border: #e2e8f0;
  --muted-foreground: #64748b;
}

Variable	Controls
`--card`	Card background fill
`--card-foreground`	Primary text inside the card
`--border`	Card border and footer divider
`--muted-foreground`	Secondary text: field descriptions and Required/Optional badges

The bundled stylesheet declares sensible light-mode defaults for all four variables, so overriding only the ones you need is sufficient.

Dark mode

The bundled styles.css only declares light-mode defaults for the four CSS custom properties — it does not include a built-in dark-mode block. To support dark mode in your application, redefine the variables under your dark-mode selector or media query in your own stylesheet:

/* Using a .dark class toggled on <html> or <body> */
.dark {
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --border: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
}

/* Or with the prefers-color-scheme media query */
@media (prefers-color-scheme: dark) {
  :root {
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --border: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
  }
}

Because all card colors are driven by these four CSS custom properties, a single override block covers every ToolCard on the page.

Card dimensions

ToolCard is fluid by default — it stretches to fill the width of its containing block. To control layout, wrap cards in a grid or flexbox container:

<div className="grid grid-cols-3 gap-4 max-w-4xl">
  {toolCatalog.slice(0, 6).map((tool) => (
    <ToolCard key={tool.id} tool={tool} />
  ))}
</div>

Use max-w-sm or similar on individual cards when you need a fixed maximum width without a grid.

The library uses Tailwind CSS v4 internally. If your app also uses Tailwind, the bundled CSS and your app’s CSS coexist without conflict because both compile to standard CSS — there is no shared runtime or global state between the two Tailwind instances.

Get Started

Components

Tool Catalog

Guides

Styling, Theming, and CSS Variables in ai-tool-elements

Importing the bundled styles

Overriding styles with className

CSS custom properties

Dark mode

Card dimensions

​Importing the bundled styles

​Overriding styles with className

​CSS custom properties

​Dark mode

​Card dimensions

Importing the bundled styles

Overriding styles with className

CSS custom properties

Dark mode

Card dimensions