Magic UI

3 snippets

Delightful micro-interactions: shimmers, docks, glowing borders.

macOS Dock

Featured

macOS-style magnifying dock bar

"use client";
import { useRef } from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";

function DockItem({ icon, label, mouseX }: {
Magic UI tsx · 49 lines

Shimmer Button

Featured

CTA button with sweeping shimmer on hover

export function ShimmerButton({ children, className = "" }: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
Magic UI tsx · 16 lines

Animated Gradient Border

Card with spinning gradient border

export function GradientCard({ children, className = "" }: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
Magic UI tsx · 26 lines