const{Fragment:i,jsx:e,jsxs:t}=arguments[0];function _createMdxContent(a){const h={a:"a",code:"code",em:"em",figure:"figure",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...a.components};return t(i,{children:[t(h.p,{children:["There are few choices when integrating Bulma into React but my favorite is ",e(h.a,{href:"https://github.com/couds/react-bulma-components",children:"react-bulma-components"}),". It's well documented, supports all of ",e(h.a,{href:"https://bulma.io/",children:"Bulma"}),"'s features and releases typically come quickly after official Bulma releases."]}),"\n",e(h.h2,{children:"Getting Started"}),"\n",t(h.p,{children:["First we need to add ",e(h.a,{href:"https://github.com/couds/react-bulma-components",children:"react-bulma-components"})," to our React project."]}),"\n",e(h.h3,{children:"NPM"}),"\n",e(h.p,{children:e(h.span,{"data-rehype-pretty-code-figure":"",children:e(h.code,{"data-language":"plaintext","data-theme":"github-dark github-light",children:e(h.span,{"data-line":"",children:e(h.span,{children:"npm install react-bulma-components"})})})})}),"\n",e(h.h3,{children:"Yarn"}),"\n",e(h.p,{children:e(h.span,{"data-rehype-pretty-code-figure":"",children:e(h.code,{"data-language":"plaintext","data-theme":"github-dark github-light",children:e(h.span,{"data-line":"",children:e(h.span,{children:"yarn add react-bulma-components"})})})})}),"\n",t(h.p,{children:["Next, let's import a Bulma component. We're going start with the ",e(h.span,{"data-rehype-pretty-code-figure":"",children:e(h.code,{"data-language":"plaintext","data-theme":"github-dark github-light",children:e(h.span,{"data-line":"",children:e(h.span,{children:"Button"})})})})," component as our first example because it's one of the simplest but is also a great example of the power of ",e(h.a,{href:"https://bulma.io/",children:"Bulma"})," and ",e(h.a,{href:"https://github.com/couds/react-bulma-components",children:"react-bulma-components"}),"."]}),"\n",e(h.figure,{"data-rehype-pretty-code-figure":"",children:e(h.pre,{tabIndex:"0","data-language":"javascript","data-theme":"github-dark github-light",children:e(h.code,{"data-language":"javascript","data-theme":"github-dark github-light",style:{display:"grid"},children:t(h.span,{"data-line":"",children:[e(h.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),e(h.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { Button } "}),e(h.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),e(h.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:" 'react-bulma-components'"})]})})})}),"\n",t(h.p,{children:["As one would expect the ",e(h.span,{"data-rehype-pretty-code-figure":"",children:e(h.code,{"data-language":"plaintext","data-theme":"github-dark github-light",children:e(h.span,{"data-line":"",children:e(h.span,{children:"Button"})})})})," component renders a html ",e(h.span,{"data-rehype-pretty-code-figure":"",children:e(h.code,{"data-language":"plaintext","data-theme":"github-dark github-light",children:e(h.span,{"data-line":"",children:e(h.span,{children:"

Hi, I'm Brad.

Writings

Links