Buttons
Neon Gradient Button
A compact call-to-action with a glowing gradient edge and dark inner surface.
ctagradientglow
Installation
Copy and paste the code into your project.
Accessibility notes
Use clear button text and keep it inside a form or action region where the intent is obvious.
Preview accent
TypeScript
type NeonGradientButtonProps = {
children?: React.ReactNode;
};
export function NeonGradientButton({ children = "Launch interface" }: NeonGradientButtonProps) {
return (
<button className="rounded-full bg-gradient-to-r from-[#40E0D0] via-[#a78bfa] to-[#fb923c] p-px text-sm font-semibold text-white shadow-[0_0_32px_rgba(64,224,208,0.25)] transition hover:scale-[1.02]">
<span className="block rounded-full bg-[#0b0f14] px-5 py-2.5">{children}</span>
</button>
);
}Usage
<NeonGradientButton>Launch interface</NeonGradientButton>Related components
Buttons
Gradient Split Button
A primary action with a separate options trigger for deploys, exports, and publish flows.
splitdeployaction
Buttons
Icon Pulse Button
A compact icon action with a soft pulse for agent runs, recording, and quick launch controls.
iconpulseagent
No variants yet
Create the first prompt variant to compare quality, cost, and latency.
Cards
Empty State Panel
A friendly empty state with a primary action for variant, file, or project creation.
emptystatecta