magicui
magicui.designFreemanifest served live
This registry publishes no description of itself. Everything below was read from its own manifest.
Items
247
2026-08-03Every entry in its own registry.json, counted last night.Free to install
247
2026-08-03Item endpoints that returned source without credentials.Behind a key
0
2026-08-03Item endpoints that answered 401.Last seen
yesterday
2026-08-03The last night the crawl reached this manifest. There is no public repository here, so there is no push date to read.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 | Free | 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 | Free | 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 | Free | no deps | |
| Animated Gradient Textanimated-gradient-text | An animated gradient background which transitions between colors for text. | Components | Free | no deps | |
| Animated Grid Patternanimated-grid-pattern | A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Free | 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 | Free | 1 dep | |
| Animated Shiny Textanimated-shiny-text | A light glare effect which pans across text making it appear as if it is shimmering. | Components | Free | no deps | |
| Theme Toggleranimated-theme-toggler | Theme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered origin. | Components | Free | 1 dep | |
| Aurora Textaurora-text | A beautiful aurora text effect | Components | Free | no deps | |
| Avatar Circlesavatar-circles | Overlapping circles of avatars. | Components | Free | no deps | |
| Backlightbacklight | A backlight glow effect for videos, images, and SVGs. | Components | Free | 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 | Free | 1 dep | |
| Blur Fadeblur-fade | Blur fade in and out animation. Used to smoothly fade in and out content. | Components | Free | 1 dep | |
| Border Beamborder-beam | An animated beam of light which travels along the border of its container. | Components | Free | 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 | Free | 1 dep | |
| Code Comparisoncode-comparison | A component which compares two code snippets. | Components | Free | 2 deps | |
| Comic Textcomic-text | Comic text animation | Components | Free | 1 dep | |
| Confetticonfetti | Confetti animations are best used to delight your users when something special happens | Components | Free | 2 deps | |
| Cool Modecool-mode | Cool mode effect for buttons, links, and other DOMs | Components | Free | no deps | |
| Dia Text Revealdia-text-reveal | A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color. | Components | Free | 1 dep | |
| Dockdock | An implementation of the MacOS dock using react + tailwindcss + motion | Components | Free | 1 dep | |
| Dot Patterndot-pattern | A background dot pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Free | no deps | |
| Dotted Mapdotted-map | A component with a dotted map. | Components | Free | 1 dep | |
| File Treefile-tree | A component used to showcase the folder and file structure of a directory. | Components | Free | no deps | |
| Flickering Gridflickering-grid | A flickering grid background made with SVGs, fully customizable using Tailwind CSS. | Components | Free | no deps | |
| Glare Hoverglare-hover | A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color). | Components | Free | no deps | |
| Globeglobe | An autorotating, interactive, and highly performant globe made using WebGL. | Components | Free | 2 deps | |
| Glyph Matrixglyph-matrix | An animated grid of subtly shifting glyphs with fade effect and theme support. | Components | Free | no deps | |
| Grid Patterngrid-pattern | A background grid pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Free | no deps | |
| Hero Video Dialoghero-video-dialog | A hero video dialog component. | Components | Free | 1 dep | |
| Hexagon Patternhexagon-pattern | A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Free | no deps | |
| Highlighterhighlighter | A text highlighter that mimics the effect of a human-drawn marker stroke. | Components | Free | 2 deps | |
| Hyper Texthyper-text | A text animation that scrambles letters before revealing the final text. | Components | Free | 1 dep | |
| Icon Cloudicon-cloud | An interactive 3D tag cloud component | Components | Free | 1 dep | |
| Interactive Grid Patterninteractive-grid-pattern | A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS. | Components | Free | no deps | |
| interactive-hover-buttoninteractive-hover-button | no description published | Components | Free | no deps | |
| iPhoneiphone | A mockup of the iPhone | Components | Free | no deps | |
| Kinetic Textkinetic-text | A text component that animates font weight of characters on hover. | Components | Free | no deps | |
| Lenslens | A interactive component that enables zooming into images, videos and other elements. | Components | Free | 1 dep | |
| Light Rayslight-rays | A component with animated light rays which shine down from above. | Components | Free | 1 dep | |
| Line Shadow Textline-shadow-text | A text component with a moving line shadow. | Components | Free | 1 dep | |
| Magic Cardmagic-card | A spotlight effect that follows your mouse cursor and highlights borders on hover. | Components | Free | 2 deps | |
| Marqueemarquee | An infinite scrolling component that can be used to display text, images, or videos. | Components | Free | no deps | |
| Meteorsmeteors | A meteor shower effect. | Components | Free | no deps | |
| Morphing Textmorphing-text | A dynamic text morphing component for Magic UI. | Components | Free | no deps | |
| Neon Gradient Cardneon-gradient-card | A beautiful neon card effect | Components | Free | no deps | |
| Noise Texturenoise-texture | An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays. | Components | Free | no deps | |
| Number Tickernumber-ticker | Animate numbers to count up or down to a target number | Components | Free | 1 dep |
Themes
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| indexindex | no description published | Themes | Free | 2 deps |
Utilities
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| utilsutils | no description published | Utilities | Free | 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 | Free | no deps | |
| Android Demo 2android-demo-2 | Second example showing a mockup of an Android device. | Examples | Free | no deps | |
| Android Demo 3android-demo-3 | Third example showing a mockup of an Android device. | Examples | Free | no deps | |
| Animated Beam Bidirectionalanimated-beam-bidirectional | Example showing a bidirectional animated beam effect. | Examples | Free | no deps | |
| Animated Beam Demoanimated-beam-demo | Example showing an animated beam of light effect. | Examples | Free | 1 dep | |
| Animated Beam Multiple Inputsanimated-beam-multiple-inputs | Example showing animated beams with multiple input points. | Examples | Free | no deps | |
| Animated Beam Multiple Outputsanimated-beam-multiple-outputs | Example showing animated beams with multiple output points. | Examples | Free | no deps | |
| Animated Beam Unidirectionalanimated-beam-unidirectional | Example showing a unidirectional animated beam effect. | Examples | Free | no deps | |
| Animated Circular Progress Bar Demoanimated-circular-progress-bar-demo | Example showing an animated circular progress gauge. | Examples | Free | no deps | |
| Animated Gradient Text Demoanimated-gradient-text-demo | Example showing text with animated gradient backgrounds. | Examples | Free | 1 dep | |
| Animated Gradient Text Demo 2animated-gradient-text-demo-2 | Second example showing text with animated gradient backgrounds. | Examples | Free | no deps | |
| Animated Grid Pattern Demoanimated-grid-pattern-demo | Example showing an animated grid pattern background. | Examples | Free | no deps | |
| Animated List Demoanimated-list-demo | Example showing a list with sequenced item animations. | Examples | Free | no deps | |
| Animated Shiny Text Demoanimated-shiny-text-demo | Example showing text with a shimmering light effect. | Examples | Free | 1 dep | |
| Animated Theme Toggler Demoanimated-theme-toggler-demo | Example showing animation while changing the theme. | Examples | Free | no deps | |
| Animated Theme Toggler — Diamondanimated-theme-toggler-diamond-demo | Theme transition with a diamond-shaped clip reveal. | Examples | Free | no deps | |
| Animated Theme Toggler — Hexagonanimated-theme-toggler-hexagon-demo | Theme transition with a hexagon clip reveal. | Examples | Free | no deps | |
| Animated Theme Toggler — next-themesanimated-theme-toggler-next-themes-demo | Controlled usage with next-themes so useTheme() subscribers stay in sync on toggle. | Examples | Free | 1 dep | |
| Animated Theme Toggler — Rectangleanimated-theme-toggler-rectangle-demo | Theme transition with a rectangle clip reveal. | Examples | Free | no deps | |
| Animated Theme Toggler — Squareanimated-theme-toggler-square-demo | Theme transition with a square clip reveal. | Examples | Free | no deps | |
| Animated Theme Toggler — Staranimated-theme-toggler-star-demo | Theme transition with a star-shaped clip reveal. | Examples | Free | no deps | |
| Animated Theme Toggler — Triangleanimated-theme-toggler-triangle-demo | Theme transition with a triangle clip reveal. | Examples | Free | no deps | |
| Aurora Text Demoaurora-text-demo | Example showing a beautiful aurora text effect. | Examples | Free | no deps | |
| Avatar Circles Demoavatar-circles-demo | Example showing overlapping avatar circles. | Examples | Free | no deps | |
| backlight-image-demobacklight-image-demo | An example of the backlight component with a image. | Examples | Free | no deps | |
| backlight-svg-demobacklight-svg-demo | An example of the backlight component with SVGs. | Examples | Free | no deps | |
| backlight-video-demobacklight-video-demo | An example of the backlight component with a video. | Examples | Free | no deps | |
| Bento Demobento-demo | Example showing a bento grid layout for showcasing features. | Examples | Free | 1 dep | |
| Bento Vertical Demobento-demo-vertical | Example showing a vertical bento grid layout. | Examples | Free | 1 dep | |
| Blur Fade Demoblur-fade-demo | Example showing blur fade in and out animations. | Examples | Free | no deps | |
| Blur Fade Text Demoblur-fade-text-demo | Example showing blur fade animations with text. | Examples | Free | no deps | |
| Border Beam Demoborder-beam-demo | Example showing an animated border beam effect. | Examples | Free | no deps | |
| Border Beam Demoborder-beam-demo-2 | Example showing an animated border beam effect. | Examples | Free | no deps | |
| Border Beam Demo 3border-beam-demo-3 | Example showing an animated border beam effect. | Examples | Free | no deps | |
| Border Beam Demo 4border-beam-demo-4 | Example showing an animated border beam effect. | Examples | Free | no deps | |
| Code Comparison Democode-comparison-demo | Example showing a component which compares two code snippets. | Examples | Free | no deps | |
| Comic Text Democomic-text-demo | Example showing comic text animation. | Examples | Free | no deps | |
| Confetti Basic Cannonconfetti-basic-cannon | Example showing basic confetti cannon animation. | Examples | Free | no deps | |
| Confetti Custom Shapesconfetti-custom-shapes | Example showing confetti with custom shape particles. | Examples | Free | no deps | |
| Confetti Democonfetti-demo | Example showing confetti animations for celebrations. | Examples | Free | no deps | |
| Confetti Emojiconfetti-emoji | Example showing confetti with emoji particles. | Examples | Free | no deps | |
| Confetti Fireworksconfetti-fireworks | Example showing fireworks-style confetti animation. | Examples | Free | no deps | |
| Confetti Random Directionconfetti-random-direction | Example showing confetti with random directions. | Examples | Free | no deps | |
| Confetti Side Cannonsconfetti-side-cannons | Example showing side-mounted confetti cannons. | Examples | Free | no deps | |
| Confetti Starsconfetti-stars | Example showing star-shaped confetti animation. | Examples | Free | no deps | |
| Cool Mode Customcool-mode-custom | Example showing customized cool mode effects. | Examples | Free | no deps | |
| Cool Mode Democool-mode-demo | Example showing cool mode effect for buttons and links. | Examples | Free | no deps | |
| Dia Text Reveal Demodia-text-reveal-demo | Example showing a sweeping color band reveal on headline text. | Examples | Free | no deps |
