); } `,children:(0,c.jsxs)(t.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { ArrowRight } "}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"import"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"from"}),(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"interface"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" IGetStartedButtonProps"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#FFAB70"},children:" text"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,c.jsx)(t.span,{style:{color:"#79B8FF"},children:" string"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#FFAB70"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"?:"}),(0,c.jsx)(t.span,{style:{color:"#79B8FF"},children:" string"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:" "}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"export"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:" default"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:" function"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" GetStartedButton"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#FFAB70"},children:" text"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:" ="}),(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "Get started"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#FFAB70"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:":"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" IGetStartedButtonProps"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#F97583"},children:" return"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,c.jsx)(t.span,{style:{color:"#85E89D"},children:"div"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"min-h-12 w-48"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,c.jsx)(t.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "group flex h-12 w-40 items-center justify-center gap-3 rounded-lg bg-amber-100 p-2 font-bold transition-colors duration-100 ease-in-out hover:bg-orange-600"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,c.jsx)(t.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "text-orange-600 transition-colors duration-100 ease-in-out group-hover:text-amber-100"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" {text}"})}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,c.jsx)(t.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "relative flex h-7 w-7 items-center justify-center overflow-hidden rounded-full transition-transform duration-100"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "bg-orange-600 group-hover:bg-amber-100"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,c.jsx)(t.span,{style:{color:"#85E89D"},children:"div"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:'"absolute left-0 flex h-7 w-14 -translate-x-1/2 items-center justify-center transition-all duration-200 ease-in-out group-hover:translate-x-0"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,c.jsx)(t.span,{style:{color:"#79B8FF"},children:"ArrowRight"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" size"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,c.jsx)(t.span,{style:{color:"#79B8FF"},children:"16"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "size-7 transform p-1 text-orange-600 opacity-0 group-hover:opacity-100"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" <"}),(0,c.jsx)(t.span,{style:{color:"#79B8FF"},children:"ArrowRight"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" size"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,c.jsx)(t.span,{style:{color:"#79B8FF"},children:"16"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:" className"}),(0,c.jsx)(t.span,{style:{color:"#F97583"},children:"="}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"{"}),(0,c.jsx)(t.span,{style:{color:"#B392F0"},children:"cn"}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#9ECBFF"},children:' "size-7 transform p-1 text-amber-100 opacity-100 transition-transform duration-300 ease-in-out group-hover:opacity-0"'}),(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,c.jsxs)(t.span,{className:"line","data-line":"",children:[(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,c.jsx)(t.span,{className:"line","data-line":"",children:(0,c.jsx)(t.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})}function NR(n={}){let{wrapper:t}=n.components||{};return t?(0,c.jsx)(t,Object.assign({},n,{children:(0,c.jsx)(Cv,n)})):Cv(n)}var GR=NR;function kv(n,t){throw new Error("Expected "+(t?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return mv(WR);})(); /*! Bundled license information: lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.390.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) */ ;return Component;

Buttons overview