PrimeReact/ui blocks

Connect with us, learn, and grow through our newsletter.

{renderAvatar(5)}

2350+ people

Already in the line

); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-light",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Avatar } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/avatar"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { AvatarGroup } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/avatargroup"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/button"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { Divider } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/divider"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" { InputText } "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:' "primereact/inputtext"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" HeroFormCenterAlignedWithAForm"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" renderAvatar"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Array."}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"({ length: count }, ("}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"_"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E36209"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Avatar"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{index}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" image"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"`https://i.pravatar.cc/300?img=${"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"large"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" shape"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"circle"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ));"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"space-y-8 py-4"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"text-center text-pretty space-y-4"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"text-xs font-semibold text-muted-foreground tracking-wide uppercase"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" PrimeReact/ui blocks"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"h1"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"text-4xl font-extrabold tracking-tight lg:text-5xl"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Connect with us, learn, and grow through our newsletter."})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex items-center justify-center text-center flex-wrap"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"AvatarGroup"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:"renderAvatar"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"5"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Avatar"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"+2"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" shape"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"circle"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" size"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"large"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Divider"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" layout"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"vertical"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"hidden sm:block"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Divider"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" layout"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"horizontal"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"sm:hidden"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"text-lg font-semibold"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">2350+ people"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" Already in the line"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"flex items-center justify-between gap-3 p-2 border rounded-md shadow flex-wrap"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"grid grid-cols-2 grow gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"InputText"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"text"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"name"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Occupation"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"InputText"}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"email"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"email"'}),(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Email address"'}),(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"submit"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"Get started"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6F42C1"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#032F62"},children:'"w-full lg:w-auto"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})})})})]})}function v(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var C=v;function f(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(D);})(); ;return Component;

Newsletter

Hero Form Center Aligned with a Form

Connect with us, learn, and grow through our newsletter.