@marcelkargul

Glide button

A button where inline text glides into an arrow on hover.

Installation

npx shadcn@latest add qubydev/bunui/glide-button

How to use

demo.tsx
import { GlideButton, Arrow } from "@/components/ui/glide-button"


export function Demo() {
  return (
    <GlideButton>
      Start <Arrow>a</Arrow> project
    </GlideButton>
  )
}

Props

Options you can pass to customize this component.

Prop
Type
Description
children*
ReactNode

The text or elements inside the button (e.g. 'Start <Arrow>a</Arrow> project').

arrow
string

Optional fallback prop for the transforming text substring.

href
string

Optional URL. If provided, renders an accessible Next.js Link.

variant
"default""outline""secondary""ghost"

Visual appearance style.

size
"default""sm""lg"

Size preset.

className
string

Extra classes merged onto the button container.

Dependencies

motion

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Bun UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.