Skip to main content
ai-tool-elements is a React component library that requires React 18 or higher as a peer dependency and Node.js 18 or higher at build time. TypeScript is optional but fully supported — types ship with the package, so no additional configuration is needed to get autocomplete and type-checking working immediately.

​
Requirements

Before installing, confirm your project meets the following prerequisites:
  • React 18 or higher — declared as a peer dependency; bring your own React installation
  • Node.js 18 or higher — required by the package’s engines field
  • A build tool that supports ESM — Vite, Next.js, Webpack 5, or any bundler with ESM support works out of the box

​
Install the Package

Add ai-tool-elements to your project dependencies using your preferred package manager.

​
Import Styles

The library ships a pre-built Tailwind CSS stylesheet at the ai-tool-elements/styles.css export path. You must import this file once in your application’s entry point or root layout. Skipping this step means card components will render without any visual styling.
The stylesheet is declared under sideEffects in the package’s package.json, so bundlers will not accidentally tree-shake it away even when using aggressive dead-code elimination.

​
Module Formats

ai-tool-elements ships a dual ESM + CJS build. The exports field in package.json routes bundlers to the correct format automatically:
  • import (ESM) → ./dist/index.js
  • require (CJS) → ./dist/index.cjs
  • ./styles.css → ./dist/index.css
No manual alias configuration or bundler plugin is required. Both modern ESM-first tools (Vite, Next.js App Router) and legacy CommonJS environments resolve the correct entry point without extra setup.

​
TypeScript

Type declarations are bundled with the package at ./dist/index.d.ts. No separate @types/ai-tool-elements package exists or is needed. After installation, the following public types are available for import directly from "ai-tool-elements":
TypeScript 4.7+ (with moduleResolution: "bundler" or "node16") and TypeScript 5.x are both supported.
Importing named connector exports (e.g. import { Gmail } from "ai-tool-elements") lets your bundler tree-shake the output so that only Gmail’s SVG logo and tool definition are included in the final bundle. If you import toolCatalog instead, all 1,000+ connector logos are bundled. Use named imports whenever you only need a specific set of connectors.

​
Next Steps

Quickstart

Follow the five-minute guide to render your first catalog and custom tool cards.