Label CardsColour-blocked label cards scattered at random angles.

Add to your project

One command adds this component to your project.

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 Label Cards

Label Cards is a scatter of color-blocked cards thrown at random angles across the canvas, like sticky notes on a corkboard. Tap any one and it springs to the centre, scales up, and rotates upright; tap again and it returns to the pile. Motion drives the spring-to-centre and the return path so the motion always feels physical. Use it for mood boards, branding showcases, design-system color directories, and empty states that want to feel like a creative workspace.

Built with

Frequently asked questions

Is Label Cards free to use?

Yes. Label 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 Label Cards?

One command: npx shadcn@latest add https://aicanvas.me/r/label-cards.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Label 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 Label Cards built with?

Label Cards is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Label Cards?

Common uses include Mood board, Branding showcase, and Empty state. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Label Cards with AI?

Yes. Label 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