Click me!

) } `,__src__:"registry/ax-base/example/site-cta-button-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-site-cta-button'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"CtaButtonDemo"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid gap-8"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Click me!"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { CtaButton } from '@brudi/react-site-cta-button' export function CtaButtonDemo() { return Click me! } `,__src__:"registry/ax-site/example/site-cta-button-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-site-cta-button'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"CtaButtonDemo"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Click me!"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { CtaButton } from '@brudi/react-site-cta-button' export function CtaButtonDemo() { return Click me! } `,__src__:"registry/ax-app/example/site-cta-button-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-site-cta-button'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"CtaButtonDemo"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Click me!"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @brudi/react-site `,__npmCommand__:`npm install @brudi/react-site `,__yarnCommand__:`yarn add @brudi/react-site `,__pnpmCommand__:`pnpm add @brudi/react-site `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"npm"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"install"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"@brudi/react-site"})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { CtaButton } from '@brudi/react-site/cta-button' `,children:(0,n.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-site/cta-button'"})]})})})}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`Click me! `,children:(0,n.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Click me!"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]})})})}),` `,(0,n.jsx)(l.hr,{}),` `,(0,n.jsxs)(l.h3,{id:"with-gradient",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-gradient",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"With Gradient"]}),` `,(0,n.jsxs)(s,{name:"site-cta-button-with-gradient",children:[(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { CtaButton } from '@brudi/react-site-cta-button' export function CtaButtonWithGradient() { return (

Use the --cta-gradient-colors and --cta-gradient-rotation-duration{' '} css variables to change the gradient.

Title

Click me! Click me!

) } `,__src__:"registry/ax-base/example/site-cta-button-with-gradient.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@brudi/react-site-cta-button'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"CtaButtonWithGradient"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid gap-6"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"border border-dotted p-3 text-sm"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Use the "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"--cta-gradient-colors"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" and "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"--cta-gradient-rotation-duration"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"' '"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" css variables to change the gradient."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"grid grid-cols-2 gap-2"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"Title"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"flex "'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"A"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"button"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"B"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"!border-1"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-colors'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'blue, purple, red, pink, blue'"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Click me!"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"rounded"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-colors'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'transparent 0%, transparent 45%, black, transparent 55%'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-rotation-duration'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'10s'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"any"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Click me!"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { CtaButton } from '@/registry/ax-base/ui/site-cta-button' export function CtaButtonWithGradient() { return (

Use the --cta-gradient-colors and --cta-gradient-rotation-duration{' '} css variables to change the gradient.

Click me! Click me!

) } `,__src__:"registry/ax-site/example/site-cta-button-with-gradient.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@/registry/ax-base/ui/site-cta-button'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"CtaButtonWithGradient"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"pb-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Use the "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"--cta-gradient-colors"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" and "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"--cta-gradient-rotation-duration"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"' '"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" css variables to change the gradient."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"!border-1"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-colors'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'blue, purple, red, pink, blue'"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Click me!"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"rounded"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-colors'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'transparent 0%, transparent 45%, black, transparent 55%'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-rotation-duration'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'10s'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"any"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Click me!"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})}),(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { CtaButton } from '@/registry/ax-base/ui/site-cta-button' export function CtaButtonWithGradient() { return (

Use the --cta-gradient-colors and --cta-gradient-rotation-duration{' '} css variables to change the gradient.

Click me! Click me!

) } `,__src__:"registry/ax-app/example/site-cta-button-with-gradient.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"import "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4",fontStyle:"italic"},children:"CtaButton"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:" from "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'@/registry/ax-base/ui/site-cta-button'"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#EA9A97"},children:"CtaButtonWithGradient"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"p"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"pb-4"'}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Use the "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"--cta-gradient-colors"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" and "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"code"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:"--cta-gradient-rotation-duration"}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"' '"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" css variables to change the gradient."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"!border-1"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{{"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-colors'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'blue, purple, red, pink, blue'"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"any"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Click me!"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"CtaButton"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:'"rounded"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#C4A7E7",fontStyle:"italic"},children:"style"}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"{"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-colors'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'transparent 0%, transparent 45%, black, transparent 55%'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'--cta-gradient-rotation-duration'"}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F6C177"},children:"'10s'"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#3E8FB0"},children:"as"}),(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9CCFD8"},children:"any"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" Click me!"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6E6A86"},children:""})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E0DEF4"},children:" )"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#908CAA"},children:"}"})})]})})})]})]})}function N(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var B=N;function g(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return D(b);})(); ;return Component;

CTA Button

Installation

Usage

With Gradient