View Source Shino

A UI kit for Phoenix.

Notes

DON'T USE IT.

This package is still in its early stages, so it may still undergo significant changes, potentially leading to breaking changes.

Installation

  1. add :shino to the deps of mix.exs:
{:shino, <requirement>}
  1. add shino to the deps of package.json:
"shino": "file:../deps/shino"
  1. add Tailwind config of shino to your project's tailwind.config.js:
import mergeOptions from "merge-options"
import { tailwindConfig as shinoUI } from "shino/ui"

export default mergeOptions.apply({ concatArrays: true }, [
  shinoUI,
  {
    content: [
      "../../deps/shino/**/*.*ex",
      // ...
    ],
    // ...
  }
]
  1. add notification hook of shino, if you want to use Shino.Notification:
import { createNotificationHook as createShinoNotificationHook } from "shino/notification"

const liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: {
    "Shino.Notification": createShinoNotificationHook({ maxShownNotifications: 3 }),
    // ...
  },
})

Usage

For more information, see the documentation.

License

Apache License 2.0