Border Beam Button
A button with an animated beam that travels around the border for a premium call to action.
Dependencies
- @radix-ui/react-slot
- class-variance-authority
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/border-beam-button.tsx
Installation
Using shadcn CLI
npx shadcn add border-beam-button --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge framer-motionRelated Buttons Components
Add to Cart Button
E-commerce button with loading spinner, success checkmark, and animated state transitions.
Aurora Button
An animated button with a flowing gradient effect that shifts between your primary and secondary colors. Perfect for calls-to-action.
Button
A versatile button component with multiple variants including default, outline, fancy, ghost, and secondary styles.
Copy Button
Click to copy text with animated feedback and tooltip support.
Floating Action Button
Speed dial style floating action button with expandable quick actions.
Follow Button
Follow and following toggle with follower count label.