Development · Web app
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.
What it's 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
- Topic
- UI Components
- 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: 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
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated