Skip to content

How do I add Bulma to a SAFE project?

Bulma is a free open-source UI framework based on flex-box that helps you create modern and responsive layouts. When it comes to using Bulma as your front-end library on a SAFE Stack web application, you have two options.

  1. Fulma: Fulma provides a wrapper around Bulma for fable-react.
  2. Feliz.Bulma: Feliz.Bulma is a Bulma wrapper for Feliz.

By adding either of these to your SAFE project alongside the Bulma stylesheet or the Bulma NPM package, you can take full advantage of Bulma.

Using Fulma

  1. Add the Fulma NuGet package to the solution.
  2. Start using Fulma components in your F# files.
    open Fulma
    
    Button.button [] [
       str "Click me!"
    ]
    

Using Feliz.Bulma

  1. Add the Feliz.Bulma Nuget package to the solution.
  2. Start using Feliz.Bulma components in your F# files.
    open Feliz.Bulma
    
    Bulma.button.button [
       str "Click me!"
    ]