HomeBookmarks
Magic UIMagic UI
Magic UI

Magic UI

150+ free, open-source animated React components and effects built with Tailwind CSS and Motion.

DVby Dillion Verma
68components6.9Mviews30.6Kbookmarks

Magic UI contents

  • Glyph MatrixGlyph Matrix

    Glyph Matrix

  • TerminalTerminal

    Terminal

  • TerminalTerminal

    Terminal

  • Tweet CardTweet Card

    Tweet Card

  • Striped Pattern

    Striped Pattern

  • Striped Pattern

    Striped Pattern

  • Striped Pattern

    Striped Pattern

  • Spinning Text

    Spinning Text

  • Spinning Text

    Spinning Text

  • Comic Text

    Comic Text

  • Pixel Image

    Pixel Image

  • Progressive Blur

    Progressive Blur

  • Smooth Cursor

    Smooth Cursor

  • Pointer

    Pointer

  • Line Shadow Text

    Line Shadow Text

  • Warp Background

    Warp Background

  • Script Copy Button

    Script Copy Button

  • Ripple Button

    Ripple Button

  • Interactive Hover Button

    Interactive Hover Button

  • Morphing Text

    Morphing Text

  • Android

    Android

  • Scratch To Reveal

    Scratch To Reveal

  • Bento Grid

    Bento Grid

  • Marquee

    Marquee

    1. Components
    2. /
    3. Dillion Verma
    4. /
    5. Magic UI

    Related libraries

    Aceternity UI

    Aceternity UI

    by Manu Arora

    89

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    Kokonut UI

    Kokonut UI

    by Kokonut UI

    60

    components

    MVPBlocks

    MVPBlocks

    by mvp_Subha

    6

    components

    Ruixen UI

    Ruixen UI

    by Ruixen UI

    347

    components

    shadcn/ui

    shadcn/ui

    by shadcn

    87

    components

    About Magic UI

    This page collects the Magic UI components published on 21st by Dillion Verma — animated React components aimed at marketing sites and landing pages, in the family of marquees, docks, animated numbers, and decorative motion effects. Each one is built with Tailwind CSS and renders in a live preview here, so you see the exact behavior before you commit.

    Compare the components in one place, then take the one you want: copy the full TSX, install it via the shadcn CLI, or pull it into your editor through the Magic MCP from Cursor or Claude Code. Everything is Tailwind-based and drops into Next.js without extra configuration.

    All 64 Magic UI components

    • Android
    • Animated Beam
    • Animated Circular Progress Bar
    • Animated Gradient Text
    • Animated Grid Pattern
    • Animated List
    • Animated Shiny Text
    • Animated Subscribe Button
    • Avatar Circles
    • Bento Grid
    • Blur Fade
    • Blur In

    Frequently asked questions

    Browse by category

    Animated16Hero1152Landing Page69Marquee113Background365

    Browse all component libraries →

  • Border Beam
  • Code Comparison
  • Comic Text
  • Confetti
  • Cool Mode
  • Dock
  • Dot Pattern
  • Fade Text
  • File Tree
  • Flickering Grid
  • Flip Text
  • Globe
  • Glyph Matrix
  • Gradual Spacing
  • Grid Pattern
  • Hero Video Dialog
  • Hyper Text
  • Interactive Hover Button
  • Interactive Icon Cloud
  • Line Shadow Text
  • Magic Card
  • Marquee
  • Morphing Text
  • Number Ticker
  • Orbiting Circles
  • Particles
  • Pixel Image
  • Pointer
  • Progressive Blur
  • Rainbow Button
  • Retro Grid
  • Ripple
  • Ripple Button
  • Safari
  • Scratch To Reveal
  • Script Copy Button
  • Scroll Based Velocity
  • Shimmer Button
  • Shine Border
  • Shiny Button
  • Smooth Cursor
  • Sparkles Text
  • Spinning Text
  • Striped Pattern
  • Terminal
  • Text Reveal
  • Tweet Card
  • Typing Animation
  • Warp Background
  • Word Fade In
  • Word Pull Up
  • Word Rotate