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.

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;
}
VariableControls
--cardCard background fill
--card-foregroundPrimary text inside the card
--borderCard border and footer divider
--muted-foregroundSecondary 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us