Installation

1. Add the dependency

lantern_ui ships from Hex. Add it to mix.exs and run mix deps.get.

{:lantern_ui, "~> 0.8"}

2. Load the assets

Serve lantern_ui.css, lantern_ui_theme.css and the hooks bundle (plus its zag/ and chunks/ directories — Zag widgets import them lazily) from priv/static.

plug Plug.Static, at: "/", from: {:lantern_ui, "priv/static"},
  only: ~w(lantern_ui.css lantern_ui_theme.css lantern_ui_hooks.js zag chunks)

# root layout
<link rel="stylesheet" href="/lantern_ui_theme.css" />
<link rel="stylesheet" href="/lantern_ui.css" />

// app.js
import LanternUIHooks from "/lantern_ui_hooks.js"
new LiveSocket("/live", Socket, { hooks: { ...LanternUIHooks } })

3. Import components and mount the theme

Import what you use, and mount <.theme /> once in the layout to enable dark mode and presets.

use LanternUI                      # imports every component
# or: import LanternUI.Components.Button

<LanternUI.Components.Theme.theme preset="shadcn" />