AI Job CardsThree AI job card stacks with swipe-to-cycle.

Cards & ModalsJob boardDashboardMarketing site
$120/hr

Prompt Engineer

AnthropicAI Research
$145/hr

AI Safety Researcher

AnthropicSafety & Alignment
$155/hr

Interpretability Lead

AnthropicResearch
$160/hr

Generative AI Lead

PerplexityAI Platform
$135/hr

ML Engineer

PerplexityInfrastructure
$140/hr

Search AI Researcher

PerplexityResearch
$130–160/hr

LLM Platform Engineer

GoogleEngineering
$150/hr

AI Research Scientist

GoogleResearch
$165/hr

Multimodal AI Lead

GoogleDeepMind

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/ai-job-cards
2

For dark mode, add the dark class to your <html> element:

Optional
<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About AI Job Cards

AI Job Cards is three independent stacks of AI-job cards, each with brand logos, a bookmark toggle, and a swipe-to-cycle interaction so users can browse without leaving the column. Springs deliver each new card from beneath the stack with a slight overshoot, and the bookmark icon scales on tap. Motion drives the swipe, the layered z-order, and the bookmark feedback. It is built for job boards, talent marketplaces, marketing pages introducing an AI tool, and dashboard widgets that want browsable depth in a small footprint.

Built with

MotionTailwind CSS

Frequently asked questions

Is AI Job Cards free to use?
Yes. AI Job Cards is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
How do I install AI Job Cards?
One command: npx shadcn@latest add https://aicanvas.me/r/ai-job-cards.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install AI Job Cards for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
What is AI Job Cards built with?
AI Job Cards is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use AI Job Cards?
Common uses include Job board, Dashboard, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix AI Job Cards with AI?
Yes. AI Job Cards ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections

More like this