Dev Design Library

Magic UI components

UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.

Components
79
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
22,431
Source
https://github.com/magicuidesign/magicui
Website
https://magicui.design
Install
npx shadcn@latest add @magicui/{name}

All Magic UI components

  • Android: A mockup of an Android device.
  • Animated Beam: An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.
  • Animated Circular Progress Bar: Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.
  • Animated Gradient Text: An animated gradient background which transitions between colors for text.
  • Animated Grid Pattern: A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
  • Animated List: A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.
  • Animated Shiny Text: A light glare effect which pans across text making it appear as if it is shimmering.
  • Theme Toggler: Theme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered origin.
  • Aurora Text: A beautiful aurora text effect
  • Avatar Circles: Overlapping circles of avatars.
  • Backlight: A backlight glow effect for videos, images, and SVGs.
  • Bento Grid: Bento grid is a layout used to showcase the features of a product in a simple and elegant way.
  • Blur Fade: Blur fade in and out animation. Used to smoothly fade in and out content.
  • Border Beam: An animated beam of light which travels along the border of its container.
  • Client Tweet Card: A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
  • Code Comparison: A component which compares two code snippets.
  • Comic Text: Comic text animation
  • Confetti: Confetti animations are best used to delight your users when something special happens
  • Cool Mode: Cool mode effect for buttons, links, and other DOMs
  • Dia Text Reveal: A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color.
  • Dither Field: An animated WebGL2 background of Bayer-dithered square dots. The dots follow a light pattern, an image or a video, take one color or a…
  • Dock: An implementation of the MacOS dock using react + tailwindcss + motion
  • Dot Pattern: A background dot pattern made with SVGs, fully customizable using Tailwind CSS.
  • Dotted Map: A component with a dotted map.
  • File Tree: A component used to showcase the folder and file structure of a directory.
  • Flickering Grid: A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
  • Floating 3D Particles: A canvas-based pseudo-3D particle field with perspective projection, continuous rotation and buoyant drift.
  • Glare Hover: A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color).
  • Globe: An autorotating, interactive, and highly performant globe made using WebGL.
  • Glyph Matrix: An animated grid of subtly shifting glyphs with fade effect and theme support.
  • Grid Pattern: A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
  • Hero Video Dialog: A hero video dialog component.
  • Hexagon Pattern: A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.
  • Highlighter: A text highlighter that mimics the effect of a human-drawn marker stroke.
  • Hyper Text: A text animation that scrambles letters before revealing the final text.
  • Icon Cloud: An interactive 3D tag cloud component
  • Interactive Grid Pattern: A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.
  • Interactive Hover Button: A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for…
  • iPhone: A mockup of the iPhone
  • Kinetic Text: A text component that animates font weight of characters on hover.
  • Lens: A interactive component that enables zooming into images, videos and other elements.
  • Light Rays: A component with animated light rays which shine down from above.
  • Line Shadow Text: A text component with a moving line shadow.
  • Magic Card: A spotlight effect that follows your mouse cursor and highlights borders on hover.
  • Marquee: An infinite scrolling component that can be used to display text, images, or videos.
  • Meteors: A meteor shower effect.
  • Morphing Text: A dynamic text morphing component for Magic UI.
  • Neon Gradient Card: A beautiful neon card effect
  • Noise Texture: An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays.
  • Number Ticker: Animate numbers to count up or down to a target number
  • Orbiting Circles: A collection of circles which move in orbit along a circular path
  • Particles: Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
  • Pixel Image: A component that displays an image with a pixelated effect, creating a retro aesthetic.
  • Pointer: A component that displays a pointer when hovering over an element
  • Progressive Blur: The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.
  • Pulsating Button: An animated pulsating button useful for capturing attention of users.
  • Rainbow Button: An animated button with a rainbow effect.
  • Retro Grid: An animated scrolling retro grid effect
  • Ripple: An animated ripple effect typically used behind elements to emphasize them.
  • Ripple Button: An animated button with ripple useful for user engagement.
  • Safari: A safari browser mockup to showcase your website.
  • Scroll Based Velocity: Scrolling text whose speed changes based on scroll speed
  • Scroll Progress: Animated Scroll Progress for your pages
  • Shimmer Button: A button with a shimmering light which travels around the perimeter.
  • Shine Border: Shine border is an animated background border effect.
  • Shiny Button: A shiny button component with dynamic styles in the dark mode or light mode.
  • Smooth Cursor: A customizable, physics-based smooth cursor animation component with spring animations and rotation effects
  • Sparkles Text: A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
  • Spinning Text: The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and…
  • Striped Pattern: A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
  • Terminal: A terminal component
  • Text 3D Flip: A text effect that flips each letter in 3D with a staggered animation on hover.
  • Text Animate: A text animation component that animates text using a variety of different animations.
  • Text Reveal: Fade in text as you scroll down the page.
  • Tweet Card: A card that displays a tweet with the author's name, handle, and profile picture.
  • Typing Animation: Characters appearing in typed animation
  • Video Text: A component that displays text with a video playing in the background.
  • Warp Background: A card with a time warping background effect.
  • Word Rotate: A vertical rotation of words

Browse by category