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. Feliz.Bulma: Feliz.Bulma is a Bulma wrapper for Feliz.
  2. Fulma: Fulma provides a wrapper around Bulma for fable-react.

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 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!"
]

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!"
]