Skip to content

How do I add Bulma to a SAFE project?

Bulma is a free open-source UI framework based on flexbox that helps you create modern and responsive layouts.

When using Feliz (the standard for a SAFE app), follow the instructions below. When using Fable.React, use the Fulma wrapper for Bulma.

1. Add the Feliz.Bulma NuGet package to the client project

dotnet paket add Feliz.Bulma -p Client

2. Add the Bulma stylesheet to index.html

 ...
 <head>
     ...
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 </head>
 ...

3. Start using Feliz.Bulma components in your F# files.

open Feliz.Bulma

Bulma.button.button [
   str "Click me!"
]