# Border Beam

> Animated border beam component for buttons, cards, and input fields

Border Beam is a ready-to-use UI component library that adds animated light streaks traveling along component borders. Created by Jakub Antalik, it supports multiple beam styles and color variations with both light and dark mode integration.

Website: https://beam.jakubantalik.com/

## What it is for

- Add animated glowing borders to AI search inputs or prompt bars
- Highlight featured pricing cards with a continuous border beam effect
- Style primary call-to-action buttons with animated gradient borders

## Features

- Available as an npm package under border-beam
- Three distinct beam animation types
- Four preset color variations
- Built-in light and dark mode support
- Drop-in compatibility with cards, buttons, search bars, and pills

## Pricing

Free to install via npm

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library
- For: Frontend developers and UI designers looking for modern glowing border effects
- Alternative to: Magic UI Border Beam, Aceternity UI
- Tags: react, ui components, css animation, tailwind, frontend, npm

## Why it was saved

- [@Jakubantalik, 15 April 2026](https://x.com/Jakubantalik/status/2044444638010917278): Drop-in component that adds a moving, iridescent light streak around the border of cards, buttons, inputs and pills — a popular 'AI product' look, available in 3 beam types, 4 color variations, dark and light mode.

## Compare

- [Alternatives to Aceternity UI](https://xiry.app/alternatives/aceternity-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/border-beam

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.