Skip to content

SAFE-Compatible UI Components

A set of SAFE-ready wrappers around existing React and JS UI Components.

How can I contribute my library to this list?

Required

  • Adding a README with installation instructions
  • Adding femto metadata to the projects

Nice to have

  • Adding documentation with sample code on the various use cases
  • Adding live documentation website with sample code

React bindings

Fable.React

Fable bindings and helpers for React and React Native. Get it!

Feliz

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness. Get it!

UI Frameworks

Feliz.MaterialUI

Feliz-style Fable bindings for Material-UI. Get it!

Feliz.Reactstrap

Fable binding for reactstrap. Get it!

Fable.MaterialUI

Fable bindings for Material-UI. Get it!

Feliz.Bulma

Bulma UI wrapper for amazing Feliz DSL. Get it!

Fulma

Fulma provides a wrapper around Bulma 0.9.0, an open source CSS framework, for fable-react. Get it!

Fable.AntD

Fable bindings for Ant Design React components. Get it!

Fable.FontAwesome.Free

Bindings for the Free icons of Font Awesome, should be used with Fable.FontAwesome. Get it!

Fable.FluentUI

FluentUI (React) to Fable bindings. Get it!

Fable.ReactGridSystem

React Grid System to Fable bindings. Get it!

UI Controls

Feliz.Popover

Feliz-style Fable bindings for react-popover. Get it!

Feliz.SelectSearch

A binding for react-select-search that implements a searchable and customizable dropdown for Feliz applications. Get it!

Feliz.Kawaii

Feliz-style Fable bindings for react-kawaii which contains lovely SVG components. Get it!

Feliz.SweetAlert

Feliz-style Fable bindings for sweetalert2 and sweetalert2-react-content with Feliz style api for use within React applications. Implemented as both normal functions and Elmish commands, for maximum flexibility. Get it!

Elmish.SweetAlert

SweetAlert integration for Fable, made with love to work in Elmish apps. Get it!

Elmish.Toastr

Toastr integration with Fable, implemented as Elmish commands. Get it!

Elmish.AnimatedTree

A fork and binding of react-animated-tree, adapted to properly work within Elmish applications. Get it!

Feliz.ReactHamburger

Feliz-style Fable bindings for hamburger-react. Get it!

Feliz.ReactAwesomeSlider

Feliz-style Fable bindings for react-awesome-slider. Get it!

Feliz.ReactSelect

Feliz-style Fable bindings for react-select. Get it!

Fable.React.Flatpickr

Fable binding for react-flatpickr that is ready to use within Elmish applications. Get it!

Feliz.Tippy

Feliz-style Fable bindings for tippyjs-react. Get it!

Feliz.ReactSpeedometer

Feliz-style Fable bindings for react-d3-speedometer. Get it!

Fable.ReactKanban

React Kanban bindings for Fable React. Get it!

Fable.React.DrawingCanvas

This is a Fable React wrapper for canvas that allows you to declare a drawing. Get it!

Fable.GroupingPanel

An F# computation expression that groups Fable UI data into one or more collapsable panels. Get it!

Data Visualisation

Feliz.AgGrid

Feliz-style Fable bindings for ag-grid. Get it!

Fable.ReactAgGrid

Fable bindings for ag-grid. Get it!

Feliz.Reactflow

Feliz-style Fable bindings for react flow. Get it!

Maps

Fable.ReactGoogleMaps

Feliz-style Fable bindings for react-google-maps. Get it!

Feliz.PigeonMaps

Feliz-style bindings for pigeon-maps, React maps without external dependencies. This binding includes it's own custom PigeonMaps.marker component to build map markers manually. Get it!

Charting

Feliz.AgChart

Feliz-style bindings for ag-charts. Get it!

Feliz.Plotly

Fable bindings for plotly.js and react-plotly.js with Feliz style api for use within React applications. Lets you build visualizations in an easy, discoverable, and safe fashion. Get it!

Feliz.Recharts

Feliz-style bindings for recharts, a composable charting library built on React components. The binding translates the original API of recharts in a one-to-one fashion but makes it type-safe and easily discoverable. Get it!

Feliz.RoughViz

Feliz-style Fable bindings for roughViz visualisation library. It is a fun project when your data visualisations don't need to be formal. This binding is actually made to work with original rough-viz library than renders to the DOM rather than an existing third-party React library which makes it a nice example to learn from. Get it!

State management

Feliz.Recoil

Fable bindings in Feliz style for Facebook's experimental state management library recoil. Get it!

Testing

Fable.Jester

Fable bindings for jest and friends for delightful Fable testing. Get it!

Fable.Mocha

Fable library for testing. Inspired by the popular Expecto library for F# and adopts the testList, testCase and testCaseAsync primitives for defining tests. Get it!

Fable.ReactTestingLibrary

Fable bindings for react-testing-library and user-event. Get it!

Animation

Fun.ReactSpring

Fable bindings for react spring. Get it!