Design without Limits

); } `,__src__:"registry/default/examples/texts/gradient-text-01.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" GradientText "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/texts/gradient-text"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" GradientTextDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-center text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Design <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"GradientText"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">without Limits"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(e.h2,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(h,{defaultValue:"cli",children:[(0,n.jsxs)(p,{children:[(0,n.jsx)(c,{value:"cli",children:"CLI"}),(0,n.jsx)(c,{value:"manual",children:"Manual"})]}),(0,n.jsx)(i,{value:"cli",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add "https://designali.in/r/gradient-text" `,__npmCommand__:`npx shadcn@latest add "https://designali.in/r/gradient-text" `,__yarnCommand__:`npx shadcn@latest add "https://designali.in/r/gradient-text" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://designali.in/r/gradient-text" `,__bunCommand__:`bunx --bun shadcn@latest add "https://designali.in/r/gradient-text" `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "https://designali.in/r/gradient-text"'})]})})})})}),(0,n.jsx)(i,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(t,{name:"gradient-text",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react"; import { motion, MotionProps } from "motion/react"; import { cn } from "@/lib/utils"; interface GradientTextProps extends Omit, keyof MotionProps> { className?: string; children: React.ReactNode; as?: React.ElementType; } export function GradientText({ className, children, as: Component = "span", ...props }: GradientTextProps) { const MotionComponent = motion.create(Component); return ( {children} ); } `,__src__:"registry/default/ui/texts/gradient-text.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { motion, MotionProps } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "motion/react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" GradientTextProps"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Omit"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLAttributes"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLElement"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">, "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"keyof"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" MotionProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" children"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"ElementType"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" GradientText"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" children"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"Component"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "span"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" GradientTextProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" MotionComponent"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" motion."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"create"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(Component);"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"MotionComponent"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "relative inline-flex overflow-hidden bg-white dark:bg-black"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[gradient-border_6s_ease-in-out_infinite,gradient-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[gradient-border_6s_ease-in-out_infinite,gradient-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[gradient-border_6s_ease-in-out_infinite,gradient-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[gradient-border_6s_ease-in-out_infinite,gradient-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,n.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(e.h2,{id:"props",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Prop"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Default"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"className"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"string"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"-"})}),(0,n.jsx)(e.td,{children:"The class name to be applied to the component"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"children"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"ReactNode"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"-"})}),(0,n.jsx)(e.td,{children:"Children elements"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"as"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"React.ElementType"})}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:'"span"'})}),(0,n.jsx)(e.td,{children:"The element type to render as"})]})]})]})]})}function u(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(F,{...l})}):F(l)}function a(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(T);})(); ;return Component;

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to be applied to the component
`children`	`ReactNode`	`-`	Children elements
`as`	`React.ElementType`	`"span"`	The element type to render as

Gradient Text

Design without Limits

Installation

Props