magicui

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

    Language: typescript

    Author: Felipe Aydın (@felipea)

    478 stars · 1428 views

    Files

    • apps (txt)
    • www (txt)
    • source.config.ts (ts)
    • lib (txt)
    • fonts.ts (ts)
    • docs.ts (ts)
    • registry.ts (ts)
    • rehype-component.ts (ts)
    • highlight-code.ts (ts)
    • types.ts (ts)
    • github.ts (ts)
    • source.ts (ts)
    • events.ts (ts)
    • posthog.ts (ts)
    • utils.ts (ts)
    • rehype-npm-command.ts (ts)
    • registry.json (json)
    • eslint.config.mjs (mjs)
    • tsconfig.json (json)
    • registry (txt)
    • lib (txt)
    • utils.ts (ts)
    • example (txt)
    • iphone-demo-3.tsx (tsx)
    • dock-demo.tsx (tsx)
    • border-beam-demo-4.tsx (tsx)
    • interactive-hover-button-demo.tsx (tsx)
    • animated-theme-toggler-demo.tsx (tsx)
    • bento-demo.tsx (tsx)
    • border-beam-demo-3.tsx (tsx)
    • lens-demo.tsx (tsx)
    • file-tree-demo.tsx (tsx)
    • text-reveal-demo.tsx (tsx)
    • text-animate-demo-6.tsx (tsx)
    • number-ticker-demo.tsx (tsx)
    • number-ticker-demo-2.tsx (tsx)
    • confetti-random-direction.tsx (tsx)
    • confetti-emoji.tsx (tsx)
    • glare-hover-demo.tsx (tsx)
    • marquee-demo-vertical.tsx (tsx)
    • noise-texture-demo-2.tsx (tsx)
    • text-animate-demo-5.tsx (tsx)
    • smooth-cursor-demo.tsx (tsx)
    • text-animate-demo.tsx (tsx)
    • dock-demo-3.tsx (tsx)
    • spinning-text-demo.tsx (tsx)
    • interactive-grid-pattern-demo-2.tsx (tsx)
    • magic-card-demo.tsx (tsx)
    • marquee-3d.tsx (tsx)
    • backlight-svg-demo.tsx (tsx)
    • shimmer-button-demo.tsx (tsx)
    • text-3d-flip-demo-2.tsx (tsx)
    • meteors-demo.tsx (tsx)
    • hero-video-dialog-demo.tsx (tsx)
    • typing-animation-demo.tsx (tsx)
    • text-animate-demo-8.tsx (tsx)
    • shine-border-demo-2.tsx (tsx)
    • animated-beam-bidirectional.tsx (tsx)
    • globe-demo.tsx (tsx)
    • glare-hover-demo-cta.tsx (tsx)
    • scroll-progress-demo.tsx (tsx)
    • highlighter-demo.tsx (tsx)
    • terminal-demo-2.tsx (tsx)
    • icon-cloud-demo-2.tsx (tsx)
    • aurora-text-demo.tsx (tsx)
    • morphing-text-demo.tsx (tsx)
    • animated-theme-toggler-square-demo.tsx (tsx)
    • iphone-demo.tsx (tsx)
    • hexagon-pattern-dashed.tsx (tsx)
    • lens-demo-2.tsx (tsx)
    • blur-fade-text-demo.tsx (tsx)
    • flickering-grid-demo.tsx (tsx)
    • android-demo-3.tsx (tsx)
    • animated-theme-toggler-rectangle-demo.tsx (tsx)
    • hexagon-pattern-demo.tsx (tsx)
    • android-demo-2.tsx (tsx)
    • animated-theme-toggler-next-themes-demo.tsx (tsx)
    • progressive-blur-demo.tsx (tsx)
    • rainbow-button-demo-2.tsx (tsx)
    • rainbow-button-demo.tsx (tsx)
    • shiny-button-demo.tsx (tsx)
    • dot-pattern-with-glow-effect.tsx (tsx)
    • sparkles-text-demo.tsx (tsx)
    • grid-pattern-linear-gradient.tsx (tsx)
    • animated-theme-toggler-hexagon-demo.tsx (tsx)
    • iphone-demo-2.tsx (tsx)
    • typing-animation-demo-7.tsx (tsx)
    • spinning-text-demo-2.tsx (tsx)
    • animated-theme-toggler-star-demo.tsx (tsx)
    • typing-animation-demo-3.tsx (tsx)
    • cool-mode-demo.tsx (tsx)
    • safari-demo.tsx (tsx)
    • typing-animation-demo-2.tsx (tsx)
    • avatar-circles-demo.tsx (tsx)
    • animated-theme-toggler-diamond-demo.tsx (tsx)
    • hexagon-pattern-linear-gradient.tsx (tsx)
    • retro-grid-demo.tsx (tsx)
    • animated-gradient-text-demo.tsx (tsx)
    • shine-border-demo.tsx (tsx)
    • safari-demo-2.tsx (tsx)
    • dia-text-reveal-demo-3.tsx (tsx)
    • warp-background-demo.tsx (tsx)
    • animated-beam-multiple-outputs.tsx (tsx)
    • scroll-based-velocity-images-demo.tsx (tsx)
    • typing-animation-demo-8.tsx (tsx)
    • grid-pattern-dashed.tsx (tsx)
    • striped-pattern-dashed.tsx (tsx)
    • confetti-basic-cannon.tsx (tsx)
    • typing-animation-demo-4.tsx (tsx)
    • glare-hover-demo-alert.tsx (tsx)
    • kinetic-text-demo.tsx (tsx)
    • dock-demo-2.tsx (tsx)
    • hexagon-pattern-spacing.tsx (tsx)
    • text-3d-flip-demo.tsx (tsx)
    • border-beam-demo.tsx (tsx)
    • border-beam-demo-2.tsx (tsx)
    • terminal-demo.tsx (tsx)
    • comic-text-demo.tsx (tsx)
    • dot-pattern-demo.tsx (tsx)
    • animated-beam-multiple-inputs.tsx (tsx)
    • dia-text-reveal-demo-4.tsx (tsx)
    • typing-animation-demo-6.tsx (tsx)
    • hero-video-dialog-demo-top-in-bottom-out.tsx (tsx)
    • confetti-side-cannons.tsx (tsx)
    • text-animate-demo-9.tsx (tsx)
    • dot-pattern-linear-gradient.tsx (tsx)
    • grid-pattern-demo.tsx (tsx)
    • dia-text-reveal-demo.tsx (tsx)
    • confetti-demo.tsx (tsx)
    • line-shadow-text-demo.tsx (tsx)
    • animated-list-demo.tsx (tsx)
    • ripple-button-demo.tsx (tsx)
    • icon-cloud-demo.tsx (tsx)
    • animated-beam-unidirectional.tsx (tsx)
    • code-comparison-demo.tsx (tsx)
    • dotted-map-demo.tsx (tsx)
    • animated-circular-progress-bar-demo.tsx (tsx)
    • striped-pattern-demo.tsx (tsx)
    • marquee-logos.tsx (tsx)
    • safari-demo-3.tsx (tsx)
    • pulsating-button-demo-2.tsx (tsx)
    • pixel-image-demo.tsx (tsx)
    • interactive-grid-pattern-demo.tsx (tsx)
    • orbiting-circles-demo.tsx (tsx)
    • noise-texture-demo-4.tsx (tsx)
    • striped-pattern-right.tsx (tsx)
    • scroll-based-velocity-demo.tsx (tsx)
    • animated-beam-demo.tsx (tsx)
    • dotted-map-demo-2.tsx (tsx)
    • tweet-card-meta-preview.tsx (tsx)
    • neon-gradient-card-demo.tsx (tsx)
    • text-animate-demo-7.tsx (tsx)
    • tweet-card-images.tsx (tsx)
    • tweet-card-demo.tsx (tsx)
    • animated-grid-pattern-demo.tsx (tsx)
    • ripple-demo.tsx (tsx)
    • noise-texture-demo.tsx (tsx)
    • light-rays-demo.tsx (tsx)
    • dotted-map-demo-3.tsx (tsx)
    • hyper-text-demo.tsx (tsx)
    • word-rotate-demo.tsx (tsx)
    • android-demo.tsx (tsx)
    • typing-animation-demo-5.tsx (tsx)
    • confetti-custom-shapes.tsx (tsx)
    • text-animate-demo-3.tsx (tsx)
    • pointer-demo-1.tsx (tsx)
    • icon-cloud-demo-3.tsx (tsx)
    • marquee-demo.tsx (tsx)
    • safari-demo-4.tsx (tsx)
    • pulsating-button-demo.tsx (tsx)
    • flickering-grid-rounded-demo.tsx (tsx)
    • cool-mode-custom.tsx (tsx)
    • animated-gradient-text-demo-2.tsx (tsx)
    • text-animate-demo-2.tsx (tsx)
    • magic-card-demo2.tsx (tsx)
    • backlight-image-demo.tsx (tsx)
    • lens-demo-3.tsx (tsx)
    • confetti-fireworks.tsx (tsx)
    • video-text-demo.tsx (tsx)
    • animated-shiny-text-demo.tsx (tsx)
    • backlight-video-demo.tsx (tsx)
    • confetti-stars.tsx (tsx)
    • number-ticker-decimal-demo.tsx (tsx)
    • text-animate-demo-4.tsx (tsx)
    • particles-demo.tsx (tsx)
    • dia-text-reveal-demo-2.tsx (tsx)
    • blur-fade-demo.tsx (tsx)
    • animated-theme-toggler-triangle-demo.tsx (tsx)
    • bento-demo-vertical.tsx (tsx)
    • noise-texture-demo-3.tsx (tsx)
    • magicui (txt)
    • pointer.tsx (tsx)
    • dock.tsx (tsx)
    • safari.tsx (tsx)
    • interactive-hover-button.tsx (tsx)
    • animated-theme-toggler.tsx (tsx)
    • meteors.tsx (tsx)
    • typing-animation.tsx (tsx)
    • text-reveal.tsx (tsx)
    • confetti.tsx (tsx)
    • comic-text.tsx (tsx)
    • line-shadow-text.tsx (tsx)
    • hyper-text.tsx (tsx)
    • dot-pattern.tsx (tsx)
    • retro-grid.tsx (tsx)
    • noise-texture.tsx (tsx)
    • animated-gradient-text.tsx (tsx)
    • blur-fade.tsx (tsx)
    • progressive-blur.tsx (tsx)
    • warp-background.tsx (tsx)
    • shine-border.tsx (tsx)
    • pulsating-button.tsx (tsx)
    • code-comparison.tsx (tsx)
    • dotted-map.tsx (tsx)
    • shiny-button.tsx (tsx)
    • tweet-card.tsx (tsx)
    • animated-subscribe-button.tsx (tsx)
    • scroll-based-velocity.tsx (tsx)
    • hero-video-dialog.tsx (tsx)
    • glare-hover.tsx (tsx)
    • marquee.tsx (tsx)
    • animated-list.tsx (tsx)
    • highlighter.tsx (tsx)
    • scroll-progress.tsx (tsx)
    • ripple-button.tsx (tsx)
    • animated-shiny-text.tsx (tsx)
    • light-rays.tsx (tsx)
    • android.tsx (tsx)
    • smooth-cursor.tsx (tsx)
    • particles.tsx (tsx)
    • terminal.tsx (tsx)
    • avatar-circles.tsx (tsx)
    • hexagon-pattern.tsx (tsx)
    • client-tweet-card.tsx (tsx)
    • text-animate.tsx (tsx)
    • rainbow-button.tsx (tsx)
    • animated-grid-pattern.tsx (tsx)
    • globe.tsx (tsx)
    • aurora-text.tsx (tsx)
    • pixel-image.tsx (tsx)
    • morphing-text.tsx (tsx)
    • flickering-grid.tsx (tsx)
    • interactive-grid-pattern.tsx (tsx)
    • shimmer-button.tsx (tsx)
    • striped-pattern.tsx (tsx)
    • lens.tsx (tsx)
    • spinning-text.tsx (tsx)
    • grid-pattern.tsx (tsx)
    • animated-beam.tsx (tsx)
    • magic-card.tsx (tsx)
    • text-3d-flip.tsx (tsx)
    • cool-mode.tsx (tsx)
    • video-text.tsx (tsx)
    • dia-text-reveal.tsx (tsx)
    • neon-gradient-card.tsx (tsx)
    • animated-circular-progress-bar.tsx (tsx)
    • ripple.tsx (tsx)
    • kinetic-text.tsx (tsx)
    • sparkles-text.tsx (tsx)
    • backlight.tsx (tsx)
    • border-beam.tsx (tsx)
    • icon-cloud.tsx (tsx)
    • word-rotate.tsx (tsx)
    • bento-grid.tsx (tsx)
    • file-tree.tsx (tsx)
    • number-ticker.tsx (tsx)
    • iphone.tsx (tsx)
    • orbiting-circles.tsx (tsx)
    • registry-ui.ts (ts)
    • registry-lib.ts (ts)
    • registry-examples.ts (ts)
    • index.ts (ts)
    • content (txt)
    • docs (txt)
    • index.mdx (mdx)
    • story.mdx (mdx)
    • installation (txt)
    • index.mdx (mdx)
    • legacy.mdx (mdx)
    • mcp.mdx (mdx)
    • templates (txt)
    • portfolio.mdx (mdx)
    • changelog.mdx (mdx)
    • codeforge.mdx (mdx)
    • saas.mdx (mdx)
    • devtool.mdx (mdx)
    • blog.mdx (mdx)
    • mobile.mdx (mdx)
    • agent.mdx (mdx)
    • startup.mdx (mdx)
    • components (txt)
    • cool-mode.mdx (mdx)
    • index.mdx (mdx)
    • striped-pattern.mdx (mdx)
    • border-beam.mdx (mdx)
    • line-shadow-text.mdx (mdx)
    • icon-cloud.mdx (mdx)
    • typing-animation.mdx (mdx)
    • warp-background.mdx (mdx)
    • rainbow-button.mdx (mdx)
    • confetti.mdx (mdx)
    • animated-beam.mdx (mdx)
    • shine-border.mdx (mdx)
    • dock.mdx (mdx)
    • morphing-text.mdx (mdx)
    • text-animate.mdx (mdx)
    • text-reveal.mdx (mdx)
    • file-tree.mdx (mdx)
    • highlighter.mdx (mdx)
    • number-ticker.mdx (mdx)
    • animated-gradient-text.mdx (mdx)
    • shimmer-button.mdx (mdx)
    • blur-fade.mdx (mdx)
    • magic-card.mdx (mdx)
    • spinning-text.mdx (mdx)
    • interactive-hover-button.mdx (mdx)
    • glare-hover.mdx (mdx)
    • animated-grid-pattern.mdx (mdx)
    • dotted-map.mdx (mdx)
    • code-comparison.mdx (mdx)
    • pixel-image.mdx (mdx)
    • video-text.mdx (mdx)
    • aurora-text.mdx (mdx)
    • hexagon-pattern.mdx (mdx)
    • bento-grid.mdx (mdx)
    • shiny-button.mdx (mdx)
    • noise-texture.mdx (mdx)
    • grid-pattern.mdx (mdx)
    • hyper-text.mdx (mdx)
    • animated-list.mdx (mdx)
    • marquee.mdx (mdx)
    • hero-video-dialog.mdx (mdx)
    • particles.mdx (mdx)
    • dot-pattern.mdx (mdx)
    • dia-text-reveal.mdx (mdx)
    • light-rays.mdx (mdx)
    • animated-theme-toggler.mdx (mdx)
    • pointer.mdx (mdx)
    • scroll-progress.mdx (mdx)
    • lens.mdx (mdx)
    • android.mdx (mdx)
    • tweet-card.mdx (mdx)
    • animated-shiny-text.mdx (mdx)
    • animated-circular-progress-bar.mdx (mdx)
    • avatar-circles.mdx (mdx)
    • progressive-blur.mdx (mdx)
    • terminal.mdx (mdx)
    • globe.mdx (mdx)
    • neon-gradient-card.mdx (mdx)
    • flickering-grid.mdx (mdx)
    • scroll-based-velocity.mdx (mdx)
    • pulsating-button.mdx (mdx)
    • word-rotate.mdx (mdx)
    • sparkles-text.mdx (mdx)
    • retro-grid.mdx (mdx)
    • iphone.mdx (mdx)
    • text-3d-flip.mdx (mdx)
    • ripple.mdx (mdx)
    • kinetic-text.mdx (mdx)
    • smooth-cursor.mdx (mdx)
    • safari.mdx (mdx)
    • orbiting-circles.mdx (mdx)
    • backlight.mdx (mdx)
    • comic-text.mdx (mdx)
    • meteors.mdx (mdx)
    • ripple-button.mdx (mdx)
    • interactive-grid-pattern.mdx (mdx)
    • showcase (txt)
    • roammoon.mdx (mdx)
    • writora.mdx (mdx)
    • langfuse.mdx (mdx)
    • anisvsc.mdx (mdx)
    • undrstnd.mdx (mdx)
    • aomni.mdx (mdx)
    • anara.mdx (mdx)
    • zzzzshawn.mdx (mdx)
    • lyra.mdx (mdx)
    • robot-toast.mdx (mdx)
    • cognosys.mdx (mdx)
    • pulpsense.mdx (mdx)
    • aryankarma.mdx (mdx)
    • sherpa.mdx (mdx)
    • guarahooks.mdx (mdx)
    • d1rshan.mdx (mdx)
    • million.mdx (mdx)
    • nativeexpress.mdx (mdx)
    • gitme.mdx (mdx)
    • infisical.mdx (mdx)
    • elhussary.mdx (mdx)
    • llmreport.mdx (mdx)
    • querylab.mdx (mdx)
    • zen-browser.mdx (mdx)
    • blog (txt)
    • semantic-ui-vs-material-ui.mdx (mdx)
    • how-to-improve-website-loading-speed.mdx (mdx)
    • react-animation-examples.mdx (mdx)
    • navbar-in-react-js.mdx (mdx)
    • startup-landing-page.mdx (mdx)
    • tailwind-landing-page-templates.mdx (mdx)
    • react-js-navbar.mdx (mdx)
    • ATTRIBUTION.md (markdown)

    Loading code snippet…