Andromeda Button
A 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. Transparent hairline surfaces sit on a near-black canvas, with an electric-blue accent that brightens and glows on interaction.
Buttons & TogglesDesign SystemAndromeda
Variants
Sizes
With icon
Disabled
Add to your project
One command adds this component to your project.
1
Run the following command:
npx shadcn@latest add "https://aicanvas.me/r/andromeda-button.json"2
For dark mode, add the dark class to your <html> element:
<html class="dark">3
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">
