Packages
petal_components
4.1.2
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/number_ticker.ex
defmodule PetalComponents.NumberTicker do
@moduledoc """
A number that counts up (or down) to its value when it scrolls into view,
and re-animates whenever the value changes — perfect for stats sections and
live dashboards.
Requires the `PetalNumberTicker` hook from the JS bundle. The final value is
rendered server-side, so the component degrades gracefully without
JavaScript.
"""
use Phoenix.Component
attr :id, :string, required: true
attr :value, :any, required: true, doc: "the target number (integer or float)"
attr :start_value, :any,
default: 0,
doc: "where the first animation counts from"
attr :duration, :integer, default: 1500, doc: "animation length in milliseconds"
attr :decimal_places, :integer,
default: 0,
doc: "decimal places to show while counting"
attr :prefix, :string, default: nil, doc: ~s|e.g. "$"|
attr :suffix, :string, default: nil, doc: ~s|e.g. "+" or "%"|
attr :locale, :string,
default: nil,
doc: ~s|BCP 47 locale for number formatting (e.g. "de-DE"); defaults to the browser locale|
attr :class, :any, default: nil, doc: "extra classes (set font size/weight here)"
attr :rest, :global
@doc """
Renders an animated counter.
<.number_ticker id="stars-count" value={5200} suffix="+" class="text-4xl font-bold" />
In a LiveView, updating the assign re-animates from the previous value to
the new one:
<.number_ticker id="mrr" value={@mrr} prefix="$" decimal_places={2} />
"""
def number_ticker(assigns) do
~H"""
<span
id={@id}
class={["pc-number-ticker", @class]}
phx-hook="PetalNumberTicker"
data-value={to_string(@value)}
data-start-value={to_string(@start_value)}
data-duration={@duration}
data-decimal-places={@decimal_places}
data-prefix={@prefix}
data-suffix={@suffix}
data-locale={@locale}
{@rest}
>
{@prefix}{@value}{@suffix}
</span>
"""
end
end