magic-ui
magicui.designUnverifiedrepo only
This registry publishes no description of itself. Everything below was read from its own manifest.
Items
209
2026-08-02Every entry in its own registry.json, counted last night.Free to install
0
2026-08-02Item endpoints that returned source without credentials.Behind a key
0
2026-08-02Item endpoints that answered 401.Last push
1 month ago
0 stars. Both figures are GitHub's about this repository, not ones this index measured.Components
Search withinFreeits item endpoint answered without a keyPaidits item endpoint answered 401Unverifiedit serves no item endpoint we could ask
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Androidandroid | A mockup of an Android device. | Components | Unverified | no deps | |
| Animated Beamanimated-beam | An animated beam of light which travels along a path. Useful for showcasing the integration features of a website. | Components | Unverified | 1 dep | |
| Animated Circular Progress Baranimated-circular-progress-bar | Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value. | Components | Unverified | no deps | |
| Animated Gradient Textanimated-gradient-text | An animated gradient background which transitions between colors for text. | Components | Unverified | no deps | |
| Animated Grid Patternanimated-grid-pattern | A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Unverified | 1 dep | |
| Animated Listanimated-list | A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page. | Components | Unverified | 1 dep | |
| Animated Shiny Textanimated-shiny-text | A light glare effect which pans across text making it appear as if it is shimmering. | Components | Unverified | no deps | |
| Animated Subscribe Buttonanimated-subscribe-button | An animated subscribe button useful for showing a micro animation from intial to final result. | Components | Unverified | 1 dep | |
| Theme Toggleranimated-theme-toggler | A component for theme changing animation. | Components | Unverified | 1 dep | |
| Arc Timelinearc-timeline | A curved timeline that elegantly visualizes key milestones, perfect for Web3 and AI roadmaps. | Components | Unverified | no deps | |
| Aurora Textaurora-text | A beautiful aurora text effect | Components | Unverified | no deps | |
| Avatar Circlesavatar-circles | Overlapping circles of avatars. | Components | Unverified | no deps | |
| Bento Gridbento-grid | Bento grid is a layout used to showcase the features of a product in a simple and elegant way. | Components | Unverified | 1 dep | |
| Blur Fadeblur-fade | Blur fade in and out animation. Used to smoothly fade in and out content. | Components | Unverified | 1 dep | |
| Border Beamborder-beam | An animated beam of light which travels along the border of its container. | Components | Unverified | 1 dep | |
| Box Reveal Animationbox-reveal | Sliding box animation that reveals text behind it. | Components | Unverified | 1 dep | |
| Client Tweet Cardclient-tweet-card | A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture. | Components | Unverified | 1 dep | |
| Code Comparisoncode-comparison | A component which compares two code snippets. | Components | Unverified | 2 deps | |
| Comic Textcomic-text | Comic text animation | Components | Unverified | 1 dep | |
| Confetticonfetti | Confetti animations are best used to delight your users when something special happens | Components | Unverified | 2 deps | |
| Cool Modecool-mode | Cool mode effect for buttons, links, and other DOMs | Components | Unverified | no deps | |
| Dockdock | An implementation of the MacOS dock using react + tailwindcss + motion | Components | Unverified | 1 dep | |
| Dot Patterndot-pattern | A background dot pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Unverified | no deps | |
| File Treefile-tree | A component used to showcase the folder and file structure of a directory. | Components | Unverified | no deps | |
| Flickering Gridflickering-grid | A flickering grid background made with SVGs, fully customizable using Tailwind CSS. | Components | Unverified | no deps | |
| Flip Textflip-text | Text flipping character animation | Components | Unverified | 1 dep | |
| Globeglobe | An autorotating, interactive, and highly performant globe made using WebGL. | Components | Unverified | 2 deps | |
| Grid Beamsgrid-beams | A dynamic grid background with animated light beams rays and grid patterns. | Components | Unverified | 1 dep | |
| Grid Patterngrid-pattern | A background grid pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Unverified | no deps | |
| Hero Video Dialoghero-video-dialog | A hero video dialog component. | Components | Unverified | 1 dep | |
| Highlighterhighlighter | A text highlighter that mimics the effect of a human-drawn marker stroke. | Components | Unverified | 1 dep | |
| Hyper Texthyper-text | A text animation that scrambles letters before revealing the final text. | Components | Unverified | 1 dep | |
| Icon Cloudicon-cloud | An interactive 3D tag cloud component | Components | Unverified | no deps | |
| Interactive Grid Patterninteractive-grid-pattern | A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Unverified | no deps | |
| interactive-hover-buttoninteractive-hover-button | no description published | Components | Unverified | no deps | |
| iPhone 15 Proiphone-15-pro | A mockup of the iPhone 15 Pro | Components | Unverified | no deps | |
| Lenslens | A interactive component that enables zooming into images, videos and other elements. | Components | Unverified | 1 dep | |
| Line Shadow Textline-shadow-text | A text component with a moving line shadow. | Components | Unverified | 1 dep | |
| Magic Cardmagic-card | A spotlight effect that follows your mouse cursor and highlights borders on hover. | Components | Unverified | 1 dep | |
| Marqueemarquee | An infinite scrolling component that can be used to display text, images, or videos. | Components | Unverified | no deps | |
| Meteorsmeteors | A meteor shower effect. | Components | Unverified | no deps | |
| Morphing Textmorphing-text | A dynamic text morphing component for Magic UI. | Components | Unverified | no deps | |
| Neon Gradient Cardneon-gradient-card | A beautiful neon card effect | Components | Unverified | no deps | |
| Number Tickernumber-ticker | Animate numbers to count up or down to a target number | Components | Unverified | 1 dep | |
| Orbiting Circlesorbiting-circles | A collection of circles which move in orbit along a circular path | Components | Unverified | no deps | |
| Particlesparticles | 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. | Components | Unverified | no deps | |
| Pixel Imagepixel-image | A component that displays an image with a pixelated effect, creating a retro aesthetic. | Components | Unverified | no deps | |
| Pointerpointer | A component that displays a pointer when hovering over an element | Components | Unverified | 1 dep |
Themes
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| indexindex | no description published | Themes | Unverified | 3 deps |
Utilities
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| utilsutils | no description published | Utilities | Unverified | 2 deps |
Examples
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Android Demoandroid-demo | Example showing a mockup of an Android device. | Examples | Unverified | no deps | |
| Android Demo 2android-demo-2 | Second example showing a mockup of an Android device. | Examples | Unverified | no deps | |
| Android Demo 3android-demo-3 | Third example showing a mockup of an Android device. | Examples | Unverified | no deps | |
| Animated Beam Bidirectionalanimated-beam-bidirectional | Example showing a bidirectional animated beam effect. | Examples | Unverified | no deps | |
| Animated Beam Demoanimated-beam-demo | Example showing an animated beam of light effect. | Examples | Unverified | 1 dep | |
| Animated Beam Multiple Inputsanimated-beam-multiple-inputs | Example showing animated beams with multiple input points. | Examples | Unverified | no deps | |
| Animated Beam Multiple Outputsanimated-beam-multiple-outputs | Example showing animated beams with multiple output points. | Examples | Unverified | no deps | |
| Animated Beam Unidirectionalanimated-beam-unidirectional | Example showing a unidirectional animated beam effect. | Examples | Unverified | no deps | |
| Animated Circular Progress Bar Demoanimated-circular-progress-bar-demo | Example showing an animated circular progress gauge. | Examples | Unverified | no deps | |
| Animated Gradient Text Demoanimated-gradient-text-demo | Example showing text with animated gradient backgrounds. | Examples | Unverified | 1 dep | |
| Animated Gradient Text Demo 2animated-gradient-text-demo-2 | Second example showing text with animated gradient backgrounds. | Examples | Unverified | no deps | |
| Animated Grid Pattern Demoanimated-grid-pattern-demo | Example showing an animated grid pattern background. | Examples | Unverified | no deps | |
| Animated List Demoanimated-list-demo | Example showing a list with sequenced item animations. | Examples | Unverified | no deps | |
| Animated Shiny Text Demoanimated-shiny-text-demo | Example showing text with a shimmering light effect. | Examples | Unverified | 1 dep | |
| Animated Subscribe Button (Controlled)animated-subscribe-button-controlled-demo | Controlled example showing async behavior for AnimatedSubscribeButton. | Examples | Unverified | no deps | |
| Animated Subscribe Button Demoanimated-subscribe-button-demo | Example showing an animated subscribe button with micro animations. | Examples | Unverified | no deps | |
| Animated Theme Toggler Demoanimated-theme-toggler-demo | Example showing animation while changing the theme. | Examples | Unverified | no deps | |
| Arc Timeline Demoarc-timeline-demo | Example showing an arc timeline component. | Examples | Unverified | no deps · 2 files | |
| Aurora Text Demoaurora-text-demo | Example showing a beautiful aurora text effect. | Examples | Unverified | no deps | |
| Avatar Circles Demoavatar-circles-demo | Example showing overlapping avatar circles. | Examples | Unverified | no deps | |
| Bento Demobento-demo | Example showing a bento grid layout for showcasing features. | Examples | Unverified | 1 dep | |
| Bento Vertical Demobento-demo-vertical | Example showing a vertical bento grid layout. | Examples | Unverified | 1 dep | |
| Blur Fade Demoblur-fade-demo | Example showing blur fade in and out animations. | Examples | Unverified | no deps | |
| Blur Fade Text Demoblur-fade-text-demo | Example showing blur fade animations with text. | Examples | Unverified | no deps | |
| Border Beam Demoborder-beam-demo | Example showing an animated border beam effect. | Examples | Unverified | no deps | |
| Border Beam Demoborder-beam-demo-2 | Example showing an animated border beam effect. | Examples | Unverified | no deps | |
| Border Beam Demo 3border-beam-demo-3 | Example showing an animated border beam effect. | Examples | Unverified | no deps | |
| Border Beam Demo 4border-beam-demo-4 | Example showing an animated border beam effect. | Examples | Unverified | no deps | |
| Box Reveal Demobox-reveal-demo | Example showing a sliding box text reveal animation. | Examples | Unverified | no deps | |
| Code Comparison Democode-comparison-demo | Example showing a component which compares two code snippets. | Examples | Unverified | no deps | |
| Comic Text Democomic-text-demo | Example showing comic text animation. | Examples | Unverified | no deps | |
| Confetti Basic Cannonconfetti-basic-cannon | Example showing basic confetti cannon animation. | Examples | Unverified | no deps | |
| Confetti Custom Shapesconfetti-custom-shapes | Example showing confetti with custom shape particles. | Examples | Unverified | no deps | |
| Confetti Democonfetti-demo | Example showing confetti animations for celebrations. | Examples | Unverified | no deps | |
| Confetti Emojiconfetti-emoji | Example showing confetti with emoji particles. | Examples | Unverified | no deps | |
| Confetti Fireworksconfetti-fireworks | Example showing fireworks-style confetti animation. | Examples | Unverified | no deps | |
| Confetti Random Directionconfetti-random-direction | Example showing confetti with random directions. | Examples | Unverified | no deps | |
| Confetti Side Cannonsconfetti-side-cannons | Example showing side-mounted confetti cannons. | Examples | Unverified | no deps | |
| Confetti Starsconfetti-stars | Example showing star-shaped confetti animation. | Examples | Unverified | no deps | |
| Cool Mode Customcool-mode-custom | Example showing customized cool mode effects. | Examples | Unverified | no deps | |
| Cool Mode Democool-mode-demo | Example showing cool mode effect for buttons and links. | Examples | Unverified | no deps | |
| Dock Demodock-demo | Example showing a MacOS-style dock implementation. | Examples | Unverified | 1 dep · 2 files | |
| Dock Demo 2dock-demo-2 | Second example showing a MacOS-style dock implementation. | Examples | Unverified | no deps | |
| Dock Demo 3dock-demo-3 | Third example showing a MacOS-style dock implementation. | Examples | Unverified | no deps | |
| Dot Pattern Demodot-pattern-demo | Example showing a background dot pattern made with SVGs. | Examples | Unverified | no deps | |
| Dot Pattern Linear Gradientdot-pattern-linear-gradient | Example showing a dot pattern with linear gradient effects. | Examples | Unverified | no deps | |
| Dot Pattern with glow effectdot-pattern-with-glow-effect | Example showing a dot pattern with glow effect | Examples | Unverified | no deps | |
| File Tree Demofile-tree-demo | Example showing a component that displays folder and file structure. | Examples | Unverified | no deps |
