Cyber Button

A button component with a distinctive cyberpunk aesthetic featuring angular cutouts at the corners.

Preview

pnpm dlx shadcn@latest add https://mahou-ui.kevintakeda.com/r/cyber-button.json

pnpm dlx shadcn@latest add https://mahou-ui.kevintakeda.com/r/cyber-button.json

import { CyberButton } from "@/components/ui/cyber-button";

<CyberButton size={"lg"}>Hello world!</CyberButton>

Prop	Type	Default	Description
`as`	`React.ElementType`	`"button"`	The element type to render (e.g., "button", "a")
`variant`	`"default"`	`"default"`	Visual style variant of the button
`size`	`"default"` \| `"sm"` \| `"lg"` \|	`"default"`	Size variant of the button
`edgeSize`	`number`	`-`	Size of the cyber-style corner edges
`borderWidth`	`number`	`-`	Width of the button border