Dev Design Library

Badtz UI components

A sleek, modern React UI library for frontend developers who want to ship polished interfaces faster.

Components
35
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
270
Source
https://github.com/badtzx0/badtz-ui
Website
https://badtz-ui.com
Install
npx shadcn@latest add https://badtz-ui.com/r/{name}.json

All Badtz UI components

  • 3D Wrapper: This component transforms any content into an immersive, interactive 3D experience. It tracks cursor movements to animate a smooth…
  • Animated Card 1
  • Animated Card 2
  • Animated Card 3
  • Animated Keyboard: Displays an animated keyboard with keycaps that can be customized with different colors and variants.
  • Animated List: A sophisticated animation component that creates dynamic column-based transitions with scaling effects. Perfect for showcasing…
  • Blur Reveal: A text component that reveals its content with a smooth blur-to-focus animation, activated by default when the text enters the viewport.
  • Border Beam: Displays an animated border effect with a glowing beam around the content that adapts to the size of the container.
  • Button
  • Cloud Orbit: This component creates a dynamic and interactive experience, where each icon orbits in a fluid motion. Fully customizable, it's ideal for…
  • Confetti Button: A fun and interactive button that triggers a confetti explosion effect on click.
  • Cursor Cards: Interactive cards with animated gradient borders that respond to cursor movement and proximity. Inspired by Cursor's website.
  • Dock: An interactive icon dock that smoothly scales icons/images on hover, providing a responsive and engaging visual effect.
  • Expandable Card: A versatile and engaging UI component that allows users to explore content in a more immersive way.
  • Fade Up Word: A text component that reveals its content with a smooth fade-up animation, activated by default when the text enters the viewport.
  • Flipping Card: A two-sided card component that flips on hover, revealing content on its back face. Ideal for interactive displays or showcasing…
  • Glowing Button: A visually distinct button component featuring a configurable, animated glow effect to highlight calls to action or important interactions.
  • Gradient Slide Button: A dynamic and stylish button that reveals a vibrant gradient as you hover over it.
  • Hyperspace Background: A dynamic and customizable background component that simulates a star-filled hyperspace effect.
  • Image Split: This component provides a dynamic and visually captivating way to display images split into multiple sections.
  • Image Trail: Image Trail adds a dynamic, interactive trail of images that follows the cursor, enhancing user engagement and visual appeal on your…
  • Infinite Ribbon: A dynamic and customizable sliding ribbon component that enhances UI experiences with smooth scrolling animations.
  • Like Button: A dynamic button that animates on click, creating a burst of heart icons that randomly scatter before fading out.
  • Marquee: A dynamic and customizable sliding component that creates smooth, infinite scrolling animations for showcasing content like testimonials…
  • Mouse Wave: An interactive and customizable component that creates a dynamic wave effect responding to mouse movements, perfect for immersive…
  • Particles: A versatile and performant component for creating engaging, animated content displays with smooth infinite scrolling animations. Perfect…
  • Pixel Distorsion: An interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect for creating engaging…
  • Pulse Shader: An interactive and customizable shader effect that creates a dynamic wave in response to hover interactions, perfect for adding engaging…
  • Shuffle Button: A dynamic button that shuffles the characters of its text when hovered over, creating an engaging animation.
  • Social Proof Avatars: A component that displays user avatars with optional extra count and star ratings, ideal for showcasing social proof.
  • Stagger Blur Effect: Inspired by Vercel's homepage, this text component creates a 3D rotation effect with blur on hover, revealing text with a staggered…
  • Stagger Button: A dynamic button that animates on hover, where each letter of the text flips in 3D with a staggered effect.
  • Star Button: The StarButton is a visually striking button that features a radial light animation with a starry background.
  • Stripe Animated Gradient: Recreate the iconic animated gradient from Stripe with this seamless background animation component.
  • Swipe Button: A sleek swipe-to-validate button with animated text, smooth transitions.

Browse by category