Bulma How it works Components (50)

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

How it works from Flaro

Bulma

Flaro

<section class="has-background-white py-24 is-clipped">
    <div class="container px-8">
        <h2 class="mb-28 title is-size-1 has-text-weight-bold">We make things easy for your business</h2>
        <div class="columns">
            <div class="column is-3">
                <div class="is-flex is-flex-wrap-wrap is-align-items-center mb-7 -m-2">
                    <div class="p-2">
                        <div class="has-text-weight-bold has-background-link-light has-text-dark is-relative" style="width: 56px; height: 56px; border-radius: 50%;">
                            <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">1</span>
                        </div>
                    </div>
                    <div class="p-2" style="flex: 1;">
                        <div class="has-background-grey-lighter" style="width: 100%; height: 1px;"></div>
                    </div>
                </div>
                <h3 class="has-text-weight-semibold has-text-dark">A complete UI kit for building your business</h3>
            </div>
            <div class="column is-3">
                <div class="is-flex is-flex-wrap-wrap is-align-items-center mb-7 -m-2">
                    <div class="p-2">
                        <div class="has-text-weight-bold has-background-link has-text-white is-relative" style="width: 56px; height: 56px; border-radius: 50%;">
                            <img class="is-absolute is-top-0 is-left-0" src="flaro-assets/images/how-it-works/gradient.svg" alt="">
                            <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">2</span>
                        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

How it works from Zeus

Bulma

Zeus

<section class="is-relative section py-20" style="overflow: hidden;">
  <img class="is-absolute is-left-0 is-bottom-0 mb-32 is-hidden-touch" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <div class="container">
    <div class="columns is-multiline is-vcentered">
      <div class="is-relative column is-12 is-6-tablet is-6-desktop mb-6 mb-0-desktop">
        <img class="image mx-auto is-fullwidth has-mw-md-touch is-block" src="zeus-assets/images/z-picture.png" alt="">
      </div>
      <div class="column is-12 is-6-tablet is-6-desktop">
        <div class="has-mw-xl-desktop">
          <h2 class="mb-16 mb-24-desktop title is-2">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="is-relative columns is-multiline pt-5">
            <div class="is-relative column is-6 mb-12 -mt-8-desktop">
              <img class="is-absolute is-top-0 -mt-10 is-left-0 ml-32 is-hidden-mobile" src="zeus-assets/icons/line-little-top.svg" alt="">
              <span class="is-flex is-align-items-center is-justify-content-center mb-6 mb-8-desktop has-background-info has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">1</span>
              <h3 class="mb-4 title is-4">Dolor sit amet</h3>
              <p class="is-size-5 has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="is-relative column is-6 mb-12">
              <span class="is-flex is-align-items-center is-justify-content-center mb-6 mb-8-desktop has-background-danger has-text-white" style="width: 48px; height: 48px; border-radius: 100%;">2</span>
              <h3 class="mb-4 title is-4">Dolor sit amet</h3>
              <p class="is-size-5 has-text-grey-dark">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="is-relative column is-6 mb-12 -mt-8-desktop">
              <img class="is-absolute is-top-0 -mt-16 is-left-0 ml-32 is-hidden-mobile" src="zeus-assets/icons/line-little.svg" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

How it works from Pstls.

Bulma

Pstls.

<section class="section py-24 is-relative has-background-white">
  <div class="column is-4 is-5-desktop is-absolute is-top-0 is-right-0 is-covered" style="background-image: url('pstls-assets/images/how-it-works/colors-right.png'); background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%"></div>
  <div class="container is-relative">
    <div class="columns is-multiline is-vcentered">
      <div class="column is-12-tablet is-5-desktop mb-12 mb-0-desktop">
        <div class="has-mw-md has-mw-sm-desktop mx-auto">
          <h1 class="title is-size-2-mobile is-size-1-tablet">Build and launch without problems</h1>
        </div>
      </div>
      <div class="column is-12-tablet is-7-desktop">
        <div class="has-mw-md has-mw-xl-desktop mx-auto py-12 px-8-mobile px-12-tablet is-relative has-background-black" style="z-index: 1;">
          <div class="mb-14 columns">
            <div class="column is-narrow mb-2 mb-0-desktop">
              <div class="is-inline-flex is-align-items-center is-justify-content-center is-relative" style="width: 52px; height: 52px;">
                <div class="is-absolute is-top-0 is-left-0 has-background-primary" style="width: 100%; height: 100%; transform: rotate(45deg)"></div>
                <h2 class="title is-size-3 has-text-weight-bold is-relative">1</h2>
              </div>
            </div>
            <div class="column pl-6">
              <h2 class="title is-size-4-touch is-size-3-desktop has-text-white">Register account</h2>
              <h5 class="subtitle has-text-weight-medium is-size-5 has-text-white">It’s over, maecenas tincidunt malesuada dolor sit amet malesuada.</h5>
            </div>
          </div>
          <div class="mb-14 columns">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

How it works from Acros

Bulma

Acros

<section class="section py-16 has-background-white-ter">
  <div class="container">
    <div class="columns is-justify-content-space-between mb-0">
      <div class="column is-narrow-widescreen">
        <a href="#">
          <img class="image mx-auto ml-0-tablet is-fullwidth" src="acros-assets/images/how-it-works/black-woman-man.jpg" alt="">
        </a>
      </div>
      <div class="column is-narrow-widescreen">
        <div class="has-mw-xl mx-auto">
          <h2 class="title has-mw-md has-text-grey-darker mb-12">Lorem Ipsum dolor sit amet boulique</h2>
          <div class="columns mb-6 mb-12-tablet">
            <div class="column mb-6 mb-0-tablet">
              <div class="is-relative mb-8 is-inline-block">
                <img src="acros-assets/icons/how-it-works/security.svg" alt="">
                <span class="is-block has-text-weight-semibold has-background-white-bis has-text-grey-darker is-absolute" style="right: -0.7rem; bottom: 0; font-size: 10px; width:24px; height:24px; border-radius: 50%;">
                  <span class="is-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%)">1</span>
                </span>
              </div>
              <h5 class="mb-4 title is-size-5 has-text-grey-darker has-text-weight-medium">Repeat predefined</h5>
              <p class="has-text-grey-darker">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
            <div class="column">
              <div class="is-relative mb-8 is-inline-block">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

How it works from Bendis

Bulma

Bendis

<section class="is-relative section py-24 has-background-primary">
  <img class="is-absolute is-top-0 is-right-0" src="bendis-assets/images/frame-line-light.svg" alt="">
  <div class="container">
    <div class="has-mw-md mb-10">
      <h2 class="title is-size-3 has-leading-3 has-text-white">Lorem ipsum dolor sit amet consectetur</h2>
    </div>
    <div class="is-relative has-background-primary-dark overflow-hidden mb-2" style="min-height: 295px;">
      <div class="is-absolute is-top-0 is-left-0 p-10 is-fullheight is-flex-desk is-align-items-center">
        <svg style="max-height: 100%;" width="83" height="213" viewbox="0 0 83 213" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.15" d="M1.776 47.552H0.776V48.552H1.776V47.552ZM1.776 1.75999V0.759995H0.776V1.75999H1.776ZM81.552 1.75999H82.552V0.759995H81.552V1.75999ZM81.552 212V213H82.552V212H81.552ZM30.288 212H29.288V213H30.288V212ZM30.288 47.552H31.288V46.552H30.288V47.552ZM2.776 47.552V1.75999H0.776V47.552H2.776ZM1.776 2.75999H81.552V0.759995H1.776V2.75999ZM80.552 1.75999V212H82.552V1.75999H80.552ZM81.552 211H30.288V213H81.552V211ZM31.288 212V47.552H29.288V212H31.288ZM30.288 46.552H1.776V48.552H30.288V46.552Z" fill="white"></path>
        </svg>
      </div>
      <div class="py-20 px-8 p-20-tablet has-mw-md has-mw-lg-desktop">
        <h3 class="title is-size-5 has-text-weight-semibold has-leading-4 has-text-white">Making changes simple and easy</h3>
        <p class="subtitle has-leading-6 has-text-white">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
      </div>
      <img class="is-hidden-tablet is-fullwidth image clip-path-left-top" style="height: 294px; object-fit: cover;" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      <img class="is-hidden-mobile is-absolute is-top-0 is-right-0 is-fullheight is-fullwidth has-mw-sm-tablet has-mw-md-desktop has-mw-2xl-widescreen image clip-path-left-top" style="object-fit: cover;" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
    </div>
    <div class="is-relative has-background-primary-dark overflow-hidden mb-2" style="min-height: 295px;">
      <div class="is-absolute is-top-0 is-right-0 p-10 is-fullheight is-flex-desk is-align-items-center">
        <svg style="max-height: 100%;" width="148" height="215" viewbox="0 0 148 215" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.15" d="M2.232 176.544L1.61012 175.761L1.232 176.061V176.544H2.232ZM11.16 169.344L10.5229 168.573L11.7147 170.176L11.16 169.344ZM55.512 131.04L54.838 130.301L54.8316 130.307L55.512 131.04ZM88.92 49.248L88.149 49.8849L88.92 49.248ZM55.224 50.976L54.4273 50.3716L54.424 50.376L55.224 50.976ZM49.176 74.016V75.016H50.176V74.016H49.176ZM1.656 74.016L0.656277 73.9925L0.632194 75.016H1.656V74.016ZM12.024 33.12L11.1718 32.5967L11.1652 32.6077L12.024 33.12ZM38.232 8.92799L37.8039 8.02423L37.7977 8.02722L38.232 8.92799ZM126.072 18.72L125.359 19.4212L125.365 19.4271L126.072 18.72ZM122.616 121.824L123.396 122.45L123.399 122.446L122.616 121.824ZM69.048 173.088L68.438 172.296L66.1099 174.088H69.048V173.088ZM146.808 173.088H147.808V172.088H146.808V173.088ZM146.808 213.12V214.12H147.808V213.12H146.808ZM2.232 213.12H1.232V214.12H2.232V213.12ZM2.85388 177.327C6.11812 174.735 8.49662 172.837 9.98775 171.634C10.7317 171.034 11.2607 170.603 11.5692 170.344C11.7095 170.226 11.8406 170.114 11.9166 170.038C11.9201 170.034 11.9985 169.959 12.066 169.856C12.0855 169.826 12.1316 169.752 12.1692 169.65C12.1918 169.588 12.3023 169.283 12.1546 168.924C11.9601 168.452 11.5303 168.329 11.3264 168.309C11.1449 168.291 11.0048 168.329 10.9633 168.34C10.8598 168.368 10.7832 168.407 10.766 168.416C10.735 168.432 10.7095 168.447 10.6934 168.456C10.6606 168.476 10.6295 168.496 10.6053 168.512L11.7147 170.176C11.7265 170.168 11.7245 170.17 11.7138 170.176C11.7088 170.179 11.6926 170.189 11.6692 170.201C11.6596 170.205 11.5888 170.242 11.4895 170.269C11.4501 170.28 11.3116 170.317 11.1313 170.3C10.9285 170.28 10.4995 170.157 10.3053 169.686C10.158 169.328 10.2683 169.024 10.2904 168.964C10.3274 168.862 10.3726 168.791 10.3907 168.763C10.4307 168.702 10.468 168.66 10.4758 168.652C10.4894 168.636 10.4995 168.626 10.5024 168.623C10.5089 168.617 10.4978 168.628 10.4517 168.668C10.4111 168.704 10.3553 168.751 10.2828 168.812C9.99129 169.057 9.47631 169.478 8.73225 170.078C7.24738 171.275 4.87388 173.169 1.61012 175.761L2.85388 177.327ZM11.7971 170.115C30.6196 154.557 45.4202 141.776 56.1925 131.773L54.8316 130.307C44.0998 140.272 29.3324 153.027 10.5229 168.573L11.7971 170.115ZM56.186 131.779C67.1804 121.749 76.449 111.227 83.9853 100.213L82.3347 99.0833C74.895 109.957 65.7316 120.363 54.838 130.301L56.186 131.779ZM83.9853 100.213C91.5555 89.1486 95.392 78.2991 95.392 67.68H93.392C93.392 77.7969 89.7405 88.2594 82.3347 99.0833L83.9853 100.213ZM95.392 67.68C95.392 59.662 93.5341 53.2633 89.691 48.6111L88.149 49.8849C91.6019 54.0647 93.392 59.9539 93.392 67.68H95.392ZM89.691 48.6111C85.803 43.9047 80.0098 41.624 72.504 41.624V43.624C79.5902 43.624 84.741 45.7593 88.149 49.8849L89.691 48.6111ZM72.504 41.624C64.9112 41.624 58.8499 44.5419 54.4273 50.3716L56.0207 51.5804C60.0461 46.2741 65.5048 43.624 72.504 43.624V41.624ZM54.424 50.376C50.2127 55.991 48.176 63.9159 48.176 74.016H50.176C50.176 64.1481 52.1713 56.713 56.024 51.576L54.424 50.376ZM49.176 73.016H1.656V75.016H49.176V73.016ZM2.65572 74.0395C3.03678 57.8445 6.46459 44.3922 12.8828 33.6323L11.1652 32.6077C4.52741 43.7357 1.04322 57.5475 0.656277 73.9925L2.65572 74.0395ZM12.8762 33.6432C19.5039 22.8496 28.1001 14.9232 38.6663 9.82876L37.7977 8.02722C26.8599 13.3008 17.9841 21.5024 11.1718 32.5967L12.8762 33.6432ZM38.6601 9.83173C49.4581 4.71688 61.406 2.15199 74.52 2.15199V0.151985C61.138 0.151985 48.8939 2.7711 37.8039 8.02425L38.6601 9.83173ZM74.52 2.15199C97.2068 2.15199 114.091 7.96503 125.359 19.4212L126.785 18.0187C115.013 6.05094 97.5292 0.151985 74.52 0.151985V2.15199ZM125.365 19.4271C136.863 30.9255 142.64 45.922 142.64 64.512H144.64C144.64 45.47 138.705 29.9385 126.779 18.0129L125.365 19.4271ZM142.64 64.512C142.64 84.8079 135.723 103.697 121.833 121.202L123.399 122.446C137.541 104.623 144.64 85.3041 144.64 64.512H142.64ZM121.836 121.198C107.879 138.596 90.0843 155.63 68.438 172.296L69.6581 173.88C91.4037 157.138 109.321 139.996 123.396 122.45L121.836 121.198ZM69.048 174.088H146.808V172.088H69.048V174.088ZM145.808 173.088V213.12H147.808V173.088H145.808ZM146.808 212.12H2.232V214.12H146.808V212.12ZM3.232 213.12V176.544H1.232V213.12H3.232Z" fill="white"></path>
        </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

How it works from Metis

Bulma

Metis

<section class="section">
  <div class="container">
    <div class="columns is-multiline is-centered is-vcentered">
      <div class="mb-6 column is-12 is-4-desktop">
        <div>
          <h2 class="title is-spaced">Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.</h2>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.</p>
          <a class="button is-primary" href="#">Learn More</a>
        </div>
      </div>
      <div class="column is-12 is-6-desktop is-offset-1-desktop">
        <ul>
          <li class="mb-6 is-flex">
            <div class="pr-5">
              <span class="is-flex is-align-items-center is-justify-content-center is-64x64 is-size-4 has-text-primary is-rounded has-background-link-light has-text-weight-bold">1</span>
            </div>
            <div class="mt-3">
              <h3 class="title is-size-5 is-spaced mb-3">Key Elements</h3>
              <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            </div>
          </li>
          <li class="mb-6 is-flex">
            <div class="pr-5">
              <span class="is-flex is-align-items-center is-justify-content-center is-64x64 is-size-4 has-text-primary is-rounded has-background-link-light has-text-weight-bold">2</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

How it works from Cronos

Bulma

Cronos

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <div class="has-mw-md-desktop is-relative" style="height: 536px;">
          <img class="is-absolute is-block-widescreen is-hidden-touch is-bottom-0 is-left-0" style="width: 160px; height: 160px; z-index: 1;" src="cronos-assets/elements/green-light-left.svg" alt="">
          <img class="is-absolute is-block-widescreen is-hidden-touch is-top-0 is-right-0" style="width: 160px; height: 160px; z-index: 1; margin-left: -80px;" src="cronos-assets/elements/warning-light-small.svg" alt="">
          <img class="image is-fullwidth is-cover" style="height: 100%" src="https://images.unsplash.com/photo-1542330952-bffc55e812b2?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt="">
        </div>
      </div>
      <div class="column is-12 is-6-desktop mb-10 mb-0-desktop">
        <div class="has-mw-md-desktop">
          <h3 class="mb-14 title is-size-3 is-spaced">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <div class="columns is-multiline">
            <div class="column is-12 is-6-desktop mb-10">
              <span class="mb-6 is-flex has-background-light is-size-6 is-justify-content-center is-align-items-center has-text-weight-bold is-size-4" style="width: 64px; height: 64px;">1</span>
              <h6 class="mb-3 title is-size-4 is-spaced">Lorem ipsum dolor</h6>
              <p class="subtitle">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="column is-12 is-6-desktop mb-10">
              <span class="mb-6 is-flex has-background-light is-size-6 is-justify-content-center is-align-items-center has-text-weight-bold is-size-4" style="width: 64px; height: 64px;">2</span>
              <h6 class="mb-3 title is-size-4 is-spaced">Lorem ipsum dolor</h6>
              <p class="subtitle">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

How it works from Plain

Bulma

Plain

<section class="section">
  <div class="container">
    <div class="is-vcentered columns is-multiline">
      <div class="column is-6 is-5-desktop mb-5">
        <img class="image is-fullwidth" src="bulma-plain-assets/images/green-400-square.png" alt="">
      </div>
      <div class="column is-6 ml-auto">
        <div>
          <h2 class="mb-6 is-size-1 is-size-3-mobile has-text-weight-bold">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="columns is-multiline">
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">1</span>
              <p class="subtitle has-text-grey mt-3 mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">2</span>
              <p class="subtitle has-text-grey mt-3 mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">3</span>
              <p class="subtitle has-text-grey mt-3 mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="column is-6 mb-5">
              <span class="has-text-white mb-2 is-flex has-background-primary is-justify-content-center is-align-items-center" style="width: 48px;height: 48px; border-radius: 50% !important;">4</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Show your workflow and the way you operate with Bulma how it works components. This will help you explain the important steps of the company or department process.

Choose from many variations of Bulma components how it works section. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bulma website template. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Bulma components how it works sections, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Bulma How it works Components

Framework

UI Library

Components

How it works from Flaro

Get the code for 13,400+ components

How it works from Zeus

Get the code for 13,400+ components

How it works from Pstls.

Get the code for 13,400+ components

How it works from Acros

Get the code for 13,400+ components

How it works from Bendis

Get the code for 13,400+ components

How it works from Metis

Get the code for 13,400+ components

How it works from Cronos

Get the code for 13,400+ components

How it works from Plain

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bulma How it works Components

Framework

UI Library

Components

How it works from Flaro

Get the code for 13,400+ components

How it works from Zeus

Get the code for 13,400+ components

How it works from Pstls.

Get the code for 13,400+ components

How it works from Acros

Get the code for 13,400+ components

How it works from Bendis

Get the code for 13,400+ components

How it works from Metis

Get the code for 13,400+ components

How it works from Cronos

Get the code for 13,400+ components

How it works from Plain

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support