\u{1F389} {' '}

{' '} Introducing Nyxb UI

) } `,__src__:"registry/miami/example/animated-gradient-text-demo.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ChevronRight } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'lucide-react'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" AnimatedGradientText "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/animated-gradient-text'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" async"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" AnimatedGradientTextDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"z-10 flex min-h-64 items-center justify-center"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"AnimatedGradientText"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" \u{1F389}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"hr"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"mx-2 h-4 w-px shrink-0 bg-gray-300"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Introducing Nyxb UI"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ChevronRight"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/example/animated-gradient-text-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { ChevronRight } from 'lucide-react' import { ny } from '~/lib/utils' import AnimatedGradientText from '~/components/ui/animated-gradient-text' export async function AnimatedGradientTextDemo() { return (

\u{1F389} {' '}

{' '} Introducing Nyxb UI

) } `,__src__:"registry/default/example/animated-gradient-text-demo.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ChevronRight } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'lucide-react'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" AnimatedGradientText "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/animated-gradient-text'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" async"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" AnimatedGradientTextDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"z-10 flex min-h-64 items-center justify-center"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"AnimatedGradientText"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" \u{1F389}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"hr"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"mx-2 h-4 w-px shrink-0 bg-gray-300"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" `animate-gradient inline bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Introducing Nyxb UI"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"ChevronRight"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(n.h3,{id:"installation",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(o,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(d,{value:"cli",children:"CLI"}),(0,e.jsx)(d,{value:"manual",children:"Manual"})]}),(0,e.jsx)(c,{value:"cli",children:(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx nyxb@latest add animated-gradient-text `,__npmCommand__:`npx nyxb@latest add animated-gradient-text `,__yarnCommand__:`npx nyxb@latest add animated-gradient-text `,__pnpmCommand__:`pnpm dlx nyxb@latest add animated-gradient-text `,__bunCommand__:`bunx --bun nyxb@latest add animated-gradient-text `,children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" nyxb@latest"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" animated-gradient-text"})]})})})})}),(0,e.jsx)(c,{value:"manual",children:(0,e.jsxs)(r,{children:[(0,e.jsx)(n.p,{children:"Copy and paste the following code into your project."}),(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"ts","data-theme":"github-dark",__rawString__:`// tailwind.config.ts module.exports = { theme: { extend: { animation: { gradient: "gradient 8s linear infinite", }, keyframes: { gradient: { to: { backgroundPosition: "var(--bg-size) 0", }, }, }, }, }, }; `,children:(0,e.jsxs)(n.code,{"data-language":"ts","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// tailwind.config.ts"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"module"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"exports"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" theme: {"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" extend: {"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" animation: {"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" gradient: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"gradient 8s linear infinite"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" keyframes: {"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" gradient: {"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" to: {"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" backgroundPosition: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"var(--bg-size) 0"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"text","data-theme":"github-dark",__rawString__:`components/ui/animated-gradient-text.tsx `,children:(0,e.jsx)(n.code,{"data-language":"text","data-theme":"github-dark",style:{display:"grid"},children:(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{children:"components/ui/animated-gradient-text.tsx"})})})})}),(0,e.jsxs)(i,{name:"animated-gradient-text",children:[(0,e.jsx)(n.figure,{__src__:"registry/miami/ui/animated-gradient-text.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import type { ReactNode } from 'react' import { ny } from '~/lib/utils' export function AnimatedGradientText({ children, className, }: { children: ReactNode className?: string }) { return (

{children}

) } `,__src__:"registry/miami/ui/animated-gradient-text.tsx",__style__:"miami",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ReactNode } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" AnimatedGradientText"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" children"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" children"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" ReactNode"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(n.figure,{__src__:"registry/default/ui/animated-gradient-text.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import type { ReactNode } from 'react' import { ny } from '~/lib/utils' export function AnimatedGradientText({ children, className, }: { children: ReactNode className?: string }) { return (

{children}

) } `,__src__:"registry/default/ui/animated-gradient-text.tsx",__style__:"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" type"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ReactNode } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" '~/lib/utils'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" AnimatedGradientText"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" children"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" children"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" ReactNode"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"?:"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" string"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}) {"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"ny"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" 'group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40'"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"animate-gradient absolute inset-0 block size-full bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-px ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {children}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})})]}),` `,(0,e.jsxs)(n.h2,{id:"props",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Prop"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"}),(0,e.jsx)(n.th,{children:"Default"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"children"}),(0,e.jsx)(n.td,{}),(0,e.jsx)(n.td,{children:"The children passed into the component"}),(0,e.jsx)(n.td,{})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"className"}),(0,e.jsx)(n.td,{children:"string"}),(0,e.jsx)(n.td,{children:"The class name to be applied to the shimmer."}),(0,e.jsx)(n.td,{})]})]})]})]})}function g(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(m,{...l})}):m(l)}function t(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(k);})(); ;return Component;

Prop	Type	Description	Default
children		The children passed into the component
className	string	The class name to be applied to the shimmer.

Animated Gradient Text

Installation

Props