Radial CardsSeven health-metric cards bloom into a slowly rotating flower — tap any petal to pull it forward and read your stats up close.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/radial-cardsFor dark mode, add the dark class to your <html> element:
<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 Radial Cards
Radial Cards is a flower of seven health-metric cards arranged around a central hub, slowly rotating so each petal cycles through the foreground. Tap any petal and it pulls forward, scales up, and pauses the rotation so you can read the stats up close; tap again and the bloom resumes. Motion handles both the orbit and the focus-pull. It is a strong fit for health-app dashboards, marketing pages for fitness or wellness products, and any UI where multiple related stats deserve equal billing.
Built with
Frequently asked questions
- Is Radial Cards free to use?
- Yes. Radial 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 Radial Cards?
- One command: npx shadcn@latest add https://aicanvas.me/r/radial-cards.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Radial 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 Radial Cards built with?
- Radial Cards is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Radial Cards?
- Common uses include Dashboard, Health app, and Marketing site. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Radial Cards with AI?
- Yes. Radial Cards ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.
AI Canvas