Andromeda ButtonA sci-fi / blueprint-aesthetic button with five variants (default, outline, ghost, destructive, link), three sizes (small, medium, large), optional leading icon, and full hover / focus / active / disabled state coverage.
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/andromeda-buttonFor dark mode, add the dark class to your <html> element:
<html class="dark">This component uses JetBrains Mono. Add it to your project:
Optional<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap" rel="stylesheet">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 Andromeda Button
Andromeda Button is the canonical button primitive from the Andromeda design system: a sci-fi blueprint aesthetic with five variants (default, outline, ghost, destructive, link), three sizes, optional leading icon, and complete state coverage for hover, focus, active, and disabled. Transparent hairline surfaces sit on a near-black canvas, and the electric-blue accent brightens and glows on interaction so the button always tells you exactly which state it is in. It is the standard control for any dashboard or internal tool built in the Andromeda visual language.
Built with
Frequently asked questions
- Is Andromeda Button free to use?
- Yes. Andromeda Button 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 Andromeda Button?
- One command: npx shadcn@latest add https://aicanvas.me/r/andromeda-button.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Andromeda Button 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 Andromeda Button built with?
- Andromeda Button is built with React and TypeScript, using Tailwind CSS.
- Where would I use Andromeda Button?
- Common uses include Dashboard, Admin panel, and Internal tools. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Andromeda Button with AI?
- Yes. Andromeda Button ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas