Installation

Requirements

• A React project with TypeScript. Components are built for the Next.js App Router and work in any modern React setup.
• Tailwind CSS v4.
• Node.js, to run the shadcn CLI with npx.
• A free AI Canvas account, to install. Browsing, previews and free source need no account.

Set up shadcn

AI Canvas installs through the shadcn CLI. If your project has no components.json yet, run this in the project root and answer its questions:

npx shadcn@latest init

Starting from nothing? Follow the shadcn installation guide for your framework first, then come back.

Connect your account

Installs need a free account. There are two ways to send it with each install:

• From a component page. Sign in, open any component and click Copy Command. The command it copies already carries your token.
• Once per project. Add your token to components.json, and every plain @aicanvas/... command is authenticated. See components.json.

Install a component

Every install uses the same shape. Swap in the name from the component's page:

npx shadcn@latest add @aicanvas/<name>

The CLI fetches the source, installs the npm packages it needs and writes the files into your project. Then import it:

import AiJobCards from '@/components/aicanvas/ai-job-cards'

export default function Page() {
  return <AiJobCards />
}

The import path follows the aliases in your components.json. If your project uses a different alias than @/, use yours.

What changed in your project

The CLI also adds the component's npm packages to package.json, for example framer-motion or three. Nothing else in your project is touched. The files are yours: edit them like any other code. Each Line icon file opens with a one-line AI Canvas notice: Line icons are free under the AI Canvas Premium License with that credit kept in the code.

Manual install

Prefer to copy by hand? Every free component page has a Manual tab with the packages to install and the full source. Copy the file into your project and install the packages it lists.

Next steps