Installation

Currently Sprout UI is not officialy released on hex.pm yet, but you can install it from GitHub repository.

The package can be installed by adding sprout_ui to your list of dependencies in mix.exs:

defp deps do
  [
    {:sprout_ui, git: "https://github.com/TunkShif/sprout_ui"},
  ]
end

Sprout UI requires additional JavaScript to work, add the following configurations in your assets/app.js:

// import components you're using from `sprout-ui` package
import { createSproutConfig, Collapsible, Accordion, Dialog } from "sprout-ui"

// register imported components here in `createSproutConfig` function
const { initComponents, handleDomChange } = createSproutConfig({
  components: [Collapsible(), Accordion(), Dialog()]
})

// when initializing `liveSocket`, pass the `handleDomChange` function to the `dom` option
// so that it can handle LiveView DOM patching operations properly
let liveSocket = new LiveSocket("/live", Socket, {
  ...,
  dom: {
    onBeforeElUpdated(from, to) {
      handleDomChange(from, to) // !IMPORTANT
    }
  }
})

// finnaly initialize all components
initComponents()

If you’re using package managers like npm, yarn or pnpm, make sure to add sprout-ui js dependency to package.json:

{
  "dependencies": {
    "sprout-ui": "file:../deps/sprout_ui/"
  }
}

Install Tailwind CSS plugin

Sprout UI comes with a tailwind css plugin to make it easier for styling components. You can install it by adding the following config to your assets/tailwind.config.js:

module.exports = {
  plugins: [require("sprout-ui/tailwind")],
};