FrameButton is a futuristic button with animated corner frames and tactile motion interactions.

Preview

Frame Button

Interactive

Variants

`default`

Frame Button

Interactive

`secondary`

Frame Button

Interactive

`outline`

Frame Button

Interactive

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/frame-button

Usage

Button

[]txt

import { FrameButton } from "@/components/evil-buttons/frame-button";

export function ButtonDemo() {
  return (
    <FrameButton>
      Get Started
    </FrameButton>
  );
}

Link

[]txt

import { FrameButton } from "@/components/evil-buttons/frame-button";

export function ButtonDemo() {
  return (
    <FrameButton as="link" href="https://github.com/radiumcoders/evil-buttons">
      Star on GitHub
    </FrameButton>
  );
}

Props

The component spreads any <button> HTML attributes.

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The button content.
`variant`	`"default" \| "secondary" \| "outline"`	`"default"`	Visual style variant of the button.
`className`	`string`	—	Additional custom class names.
`glow`	`boolean`	`false`	Enables the glow effect on hover.
`size`	`number \| string`	`20`	Size of the frame corner markers.
`offset`	`number`	`7.5`	Distance of the corner markers from the button edges.
`hoverOffset`	`number`	`7`	Movement distance of corner markers on hover.
`as`	`"button" \| "link"`	`"button"`	Renders the component as a button or link.
`href`	`Route \| UrlObject`	—	Link destination when `as="link"` is used.

Registry

The registry item includes components/evil-buttons/frame-button.tsx, installs clsx and tailwind-merge, and motion as a registry dependency.