Skip to content

Update import statement for ComponentPropsWithoutRef #892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yeom-JinHo merged 2 commits into from
Mar 2, 2026
Merged

Update import statement for ComponentPropsWithoutRef #892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4e3d02
Update import statement for ComponentPropsWithoutRef
ryanzam Feb 20, 2026
1ac8f58
chore(registry): use type-only React imports in magicui components
Yeom-JinHo Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 21 additions & 12 deletions apps/www/public/llms-full.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2233,7 +2233,7 @@ Title: Animated Gradient Text
Description: An animated gradient background which transitions between colors for text.

--- file: magicui/animated-gradient-text.tsx ---
import { ComponentPropsWithoutRef } from "react"
import { type ComponentPropsWithoutRef } from "react"

import { cn } from "@/lib/utils"

Expand Down Expand Up @@ -2336,12 +2336,12 @@ Description: A animated background grid pattern made with SVGs, fully customizab
"use client"

import {
ComponentPropsWithoutRef,
useCallback,
useEffect,
useId,
useRef,
useState,
type ComponentPropsWithoutRef,
} from "react"
import { motion } from "motion/react"

Expand Down Expand Up @@ -2542,10 +2542,10 @@ Description: A list that animates each item in sequence with a delay. Used to sh
"use client"

import React, {
ComponentPropsWithoutRef,
useEffect,
useMemo,
useState,
type ComponentPropsWithoutRef,
} from "react"
import { AnimatePresence, motion, type MotionProps } from "motion/react"

Expand Down Expand Up @@ -2732,7 +2732,11 @@ Title: Animated Shiny Text
Description: A light glare effect which pans across text making it appear as if it is shimmering.

--- file: magicui/animated-shiny-text.tsx ---
import { ComponentPropsWithoutRef, CSSProperties, FC } from "react"
import {
type ComponentPropsWithoutRef,
type CSSProperties,
type FC,
} from "react"

import { cn } from "@/lib/utils"

Expand Down Expand Up @@ -3070,7 +3074,7 @@ Title: Bento Grid
Description: Bento grid is a layout used to showcase the features of a product in a simple and elegant way.

--- file: magicui/bento-grid.tsx ---
import { ComponentPropsWithoutRef, ReactNode } from "react"
import { type ComponentPropsWithoutRef, type ReactNode } from "react"
import { ArrowRightIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"
Expand Down Expand Up @@ -9485,7 +9489,7 @@ Title: Marquee
Description: An infinite scrolling component that can be used to display text, images, or videos.

--- file: magicui/marquee.tsx ---
import { ComponentPropsWithoutRef } from "react"
import { type ComponentPropsWithoutRef } from "react"

import { cn } from "@/lib/utils"

Expand Down Expand Up @@ -10490,7 +10494,7 @@ Description: Animate numbers to count up or down to a target number
--- file: magicui/number-ticker.tsx ---
"use client"

import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
import { useEffect, useRef, type ComponentPropsWithoutRef } from "react"
import { useInView, useMotionValue, useSpring } from "motion/react"

import { cn } from "@/lib/utils"
Expand Down Expand Up @@ -10851,10 +10855,10 @@ Description: Particles are a fun way to add some visual flair to your website. T
"use client"

import React, {
ComponentPropsWithoutRef,
useEffect,
useRef,
useState,
type ComponentPropsWithoutRef,
} from "react"

import { cn } from "@/lib/utils"
Expand Down Expand Up @@ -11990,7 +11994,7 @@ Title: Ripple
Description: An animated ripple effect typically used behind elements to emphasize them.

--- file: magicui/ripple.tsx ---
import React, { ComponentPropsWithoutRef, CSSProperties } from "react"
import React, { type ComponentPropsWithoutRef, type CSSProperties } from "react"

import { cn } from "@/lib/utils"

Expand Down Expand Up @@ -12859,7 +12863,7 @@ Title: Shimmer Button
Description: A button with a shimmering light which travels around the perimeter.

--- file: magicui/shimmer-button.tsx ---
import React, { ComponentPropsWithoutRef, CSSProperties } from "react"
import React, { type ComponentPropsWithoutRef, type CSSProperties } from "react"

import { cn } from "@/lib/utils"

Expand Down Expand Up @@ -13651,7 +13655,7 @@ Description: The Spinning Text component animates text in a circular motion with
--- file: magicui/spinning-text.tsx ---
"use client"

import React, { ComponentPropsWithoutRef } from "react"
import React, { type ComponentPropsWithoutRef } from "react"
import { motion, Transition, Variants } from "motion/react"

import { cn } from "@/lib/utils"
Expand Down Expand Up @@ -14877,7 +14881,12 @@ Description: Fade in text as you scroll down the page.
--- file: magicui/text-reveal.tsx ---
"use client"

import { ComponentPropsWithoutRef, FC, ReactNode, useRef } from "react"
import {
useRef,
type ComponentPropsWithoutRef,
type FC,
type ReactNode,
} from "react"
import { motion, MotionValue, useScroll, useTransform } from "motion/react"

import { cn } from "@/lib/utils"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/animated-gradient-text.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"files": [
{
"path": "registry/magicui/animated-gradient-text.tsx",
"content": "import { ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGradientTextProps extends ComponentPropsWithoutRef<\"div\"> {\n speed?: number\n colorFrom?: string\n colorTo?: string\n}\n\nexport function AnimatedGradientText({\n children,\n className,\n speed = 1,\n colorFrom = \"#ffaa40\",\n colorTo = \"#9c40ff\",\n ...props\n}: AnimatedGradientTextProps) {\n return (\n <span\n style={\n {\n \"--bg-size\": `${speed * 300}%`,\n \"--color-from\": colorFrom,\n \"--color-to\": colorTo,\n } as React.CSSProperties\n }\n className={cn(\n `animate-gradient inline bg-gradient-to-r from-[var(--color-from)] via-[var(--color-to)] to-[var(--color-from)] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n className\n )}\n {...props}\n >\n {children}\n </span>\n )\n}\n",
"content": "import { type ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGradientTextProps extends ComponentPropsWithoutRef<\"div\"> {\n speed?: number\n colorFrom?: string\n colorTo?: string\n}\n\nexport function AnimatedGradientText({\n children,\n className,\n speed = 1,\n colorFrom = \"#ffaa40\",\n colorTo = \"#9c40ff\",\n ...props\n}: AnimatedGradientTextProps) {\n return (\n <span\n style={\n {\n \"--bg-size\": `${speed * 300}%`,\n \"--color-from\": colorFrom,\n \"--color-to\": colorTo,\n } as React.CSSProperties\n }\n className={cn(\n `animate-gradient inline bg-gradient-to-r from-[var(--color-from)] via-[var(--color-to)] to-[var(--color-from)] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,\n className\n )}\n {...props}\n >\n {children}\n </span>\n )\n}\n",
"type": "registry:ui"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/animated-grid-pattern.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"files": [
{
"path": "registry/magicui/animated-grid-pattern.tsx",
"content": "\"use client\"\n\nimport {\n ComponentPropsWithoutRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGridPatternProps extends ComponentPropsWithoutRef<\"svg\"> {\n width?: number\n height?: number\n x?: number\n y?: number\n strokeDasharray?: number\n numSquares?: number\n maxOpacity?: number\n duration?: number\n repeatDelay?: number\n}\n\ntype Square = {\n id: number\n pos: [number, number]\n iteration: number\n}\n\nexport function AnimatedGridPattern({\n width = 40,\n height = 40,\n x = -1,\n y = -1,\n strokeDasharray = 0,\n numSquares = 50,\n className,\n maxOpacity = 0.5,\n duration = 4,\n repeatDelay = 0.5,\n ...props\n}: AnimatedGridPatternProps) {\n const id = useId()\n const containerRef = useRef<SVGSVGElement | null>(null)\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n const [squares, setSquares] = useState<Array<Square>>([])\n\n const getPos = useCallback((): [number, number] => {\n return [\n Math.floor((Math.random() * dimensions.width) / width),\n Math.floor((Math.random() * dimensions.height) / height),\n ]\n }, [dimensions.height, dimensions.width, height, width])\n\n const generateSquares = useCallback(\n (count: number) => {\n return Array.from({ length: count }, (_, i) => ({\n id: i,\n pos: getPos(),\n iteration: 0,\n }))\n },\n [getPos]\n )\n\n const updateSquarePosition = useCallback(\n (squareId: number) => {\n setSquares((currentSquares) => {\n const current = currentSquares[squareId]\n if (!current || current.id !== squareId) return currentSquares\n\n const nextSquares = currentSquares.slice()\n nextSquares[squareId] = {\n ...current,\n pos: getPos(),\n iteration: current.iteration + 1,\n }\n\n return nextSquares\n })\n },\n [getPos]\n )\n\n useEffect(() => {\n if (dimensions.width && dimensions.height) {\n setSquares(generateSquares(numSquares))\n }\n }, [dimensions.width, dimensions.height, generateSquares, numSquares])\n\n useEffect(() => {\n const element = containerRef.current\n if (!element) return\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setDimensions((currentDimensions) => {\n const nextWidth = entry.contentRect.width\n const nextHeight = entry.contentRect.height\n if (\n currentDimensions.width === nextWidth &&\n currentDimensions.height === nextHeight\n ) {\n return currentDimensions\n }\n return { width: nextWidth, height: nextHeight }\n })\n }\n })\n\n resizeObserver.observe(element)\n\n return () => {\n resizeObserver.disconnect()\n }\n }, [])\n\n return (\n <svg\n ref={containerRef}\n aria-hidden=\"true\"\n className={cn(\n \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id={id}\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <path\n d={`M.5 ${height}V.5H${width}`}\n fill=\"none\"\n strokeDasharray={strokeDasharray}\n />\n </pattern>\n </defs>\n <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n <svg x={x} y={y} className=\"overflow-visible\">\n {squares.map(({ pos: [squareX, squareY], id, iteration }, index) => (\n <motion.rect\n initial={{ opacity: 0 }}\n animate={{ opacity: maxOpacity }}\n transition={{\n duration,\n repeat: 1,\n delay: index * 0.1,\n repeatType: \"reverse\",\n repeatDelay,\n }}\n onAnimationComplete={() => updateSquarePosition(id)}\n key={`${id}-${iteration}`}\n width={width - 1}\n height={height - 1}\n x={squareX * width + 1}\n y={squareY * height + 1}\n fill=\"currentColor\"\n strokeWidth=\"0\"\n />\n ))}\n </svg>\n </svg>\n )\n}\n",
"content": "\"use client\"\n\nimport {\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n} from \"react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGridPatternProps extends ComponentPropsWithoutRef<\"svg\"> {\n width?: number\n height?: number\n x?: number\n y?: number\n strokeDasharray?: number\n numSquares?: number\n maxOpacity?: number\n duration?: number\n repeatDelay?: number\n}\n\ntype Square = {\n id: number\n pos: [number, number]\n iteration: number\n}\n\nexport function AnimatedGridPattern({\n width = 40,\n height = 40,\n x = -1,\n y = -1,\n strokeDasharray = 0,\n numSquares = 50,\n className,\n maxOpacity = 0.5,\n duration = 4,\n repeatDelay = 0.5,\n ...props\n}: AnimatedGridPatternProps) {\n const id = useId()\n const containerRef = useRef<SVGSVGElement | null>(null)\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n const [squares, setSquares] = useState<Array<Square>>([])\n\n const getPos = useCallback((): [number, number] => {\n return [\n Math.floor((Math.random() * dimensions.width) / width),\n Math.floor((Math.random() * dimensions.height) / height),\n ]\n }, [dimensions.height, dimensions.width, height, width])\n\n const generateSquares = useCallback(\n (count: number) => {\n return Array.from({ length: count }, (_, i) => ({\n id: i,\n pos: getPos(),\n iteration: 0,\n }))\n },\n [getPos]\n )\n\n const updateSquarePosition = useCallback(\n (squareId: number) => {\n setSquares((currentSquares) => {\n const current = currentSquares[squareId]\n if (!current || current.id !== squareId) return currentSquares\n\n const nextSquares = currentSquares.slice()\n nextSquares[squareId] = {\n ...current,\n pos: getPos(),\n iteration: current.iteration + 1,\n }\n\n return nextSquares\n })\n },\n [getPos]\n )\n\n useEffect(() => {\n if (dimensions.width && dimensions.height) {\n setSquares(generateSquares(numSquares))\n }\n }, [dimensions.width, dimensions.height, generateSquares, numSquares])\n\n useEffect(() => {\n const element = containerRef.current\n if (!element) return\n\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setDimensions((currentDimensions) => {\n const nextWidth = entry.contentRect.width\n const nextHeight = entry.contentRect.height\n if (\n currentDimensions.width === nextWidth &&\n currentDimensions.height === nextHeight\n ) {\n return currentDimensions\n }\n return { width: nextWidth, height: nextHeight }\n })\n }\n })\n\n resizeObserver.observe(element)\n\n return () => {\n resizeObserver.disconnect()\n }\n }, [])\n\n return (\n <svg\n ref={containerRef}\n aria-hidden=\"true\"\n className={cn(\n \"pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30\",\n className\n )}\n {...props}\n >\n <defs>\n <pattern\n id={id}\n width={width}\n height={height}\n patternUnits=\"userSpaceOnUse\"\n x={x}\n y={y}\n >\n <path\n d={`M.5 ${height}V.5H${width}`}\n fill=\"none\"\n strokeDasharray={strokeDasharray}\n />\n </pattern>\n </defs>\n <rect width=\"100%\" height=\"100%\" fill={`url(#${id})`} />\n <svg x={x} y={y} className=\"overflow-visible\">\n {squares.map(({ pos: [squareX, squareY], id, iteration }, index) => (\n <motion.rect\n initial={{ opacity: 0 }}\n animate={{ opacity: maxOpacity }}\n transition={{\n duration,\n repeat: 1,\n delay: index * 0.1,\n repeatType: \"reverse\",\n repeatDelay,\n }}\n onAnimationComplete={() => updateSquarePosition(id)}\n key={`${id}-${iteration}`}\n width={width - 1}\n height={height - 1}\n x={squareX * width + 1}\n y={squareY * height + 1}\n fill=\"currentColor\"\n strokeWidth=\"0\"\n />\n ))}\n </svg>\n </svg>\n )\n}\n",
"type": "registry:ui"
}
]
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/animated-list.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"files": [
{
"path": "registry/magicui/animated-list.tsx",
"content": "\"use client\"\n\nimport React, {\n ComponentPropsWithoutRef,\n useEffect,\n useMemo,\n useState,\n} from \"react\"\nimport { AnimatePresence, motion, type MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n const animations: MotionProps = {\n initial: { scale: 0, opacity: 0 },\n animate: { scale: 1, opacity: 1, originY: 0 },\n exit: { scale: 0, opacity: 0 },\n transition: { type: \"spring\", stiffness: 350, damping: 40 },\n }\n\n return (\n <motion.div {...animations} layout className=\"mx-auto w-full\">\n {children}\n </motion.div>\n )\n}\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode\n delay?: number\n}\n\nexport const AnimatedList = React.memo(\n ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\n const [index, setIndex] = useState(0)\n const childrenArray = useMemo(\n () => React.Children.toArray(children),\n [children]\n )\n\n useEffect(() => {\n if (index < childrenArray.length - 1) {\n const timeout = setTimeout(() => {\n setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n }, delay)\n\n return () => clearTimeout(timeout)\n }\n }, [index, delay, childrenArray.length])\n\n const itemsToShow = useMemo(() => {\n const result = childrenArray.slice(0, index + 1).reverse()\n return result\n }, [index, childrenArray])\n\n return (\n <div\n className={cn(`flex flex-col items-center gap-4`, className)}\n {...props}\n >\n <AnimatePresence>\n {itemsToShow.map((item) => (\n <AnimatedListItem key={(item as React.ReactElement).key}>\n {item}\n </AnimatedListItem>\n ))}\n </AnimatePresence>\n </div>\n )\n }\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n",
"content": "\"use client\"\n\nimport React, {\n useEffect,\n useMemo,\n useState,\n type ComponentPropsWithoutRef,\n} from \"react\"\nimport { AnimatePresence, motion, type MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n const animations: MotionProps = {\n initial: { scale: 0, opacity: 0 },\n animate: { scale: 1, opacity: 1, originY: 0 },\n exit: { scale: 0, opacity: 0 },\n transition: { type: \"spring\", stiffness: 350, damping: 40 },\n }\n\n return (\n <motion.div {...animations} layout className=\"mx-auto w-full\">\n {children}\n </motion.div>\n )\n}\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode\n delay?: number\n}\n\nexport const AnimatedList = React.memo(\n ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\n const [index, setIndex] = useState(0)\n const childrenArray = useMemo(\n () => React.Children.toArray(children),\n [children]\n )\n\n useEffect(() => {\n if (index < childrenArray.length - 1) {\n const timeout = setTimeout(() => {\n setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n }, delay)\n\n return () => clearTimeout(timeout)\n }\n }, [index, delay, childrenArray.length])\n\n const itemsToShow = useMemo(() => {\n const result = childrenArray.slice(0, index + 1).reverse()\n return result\n }, [index, childrenArray])\n\n return (\n <div\n className={cn(`flex flex-col items-center gap-4`, className)}\n {...props}\n >\n <AnimatePresence>\n {itemsToShow.map((item) => (\n <AnimatedListItem key={(item as React.ReactElement).key}>\n {item}\n </AnimatedListItem>\n ))}\n </AnimatePresence>\n </div>\n )\n }\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n",
"type": "registry:ui"
}
]
Expand Down
Loading
Loading