Packages
petal_components
0.2.1
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/badge.ex
defmodule PetalComponents.Badge do
use Phoenix.Component
def badge(assigns) do
~H"""
<badge class={badge_classes(assigns)}>
<%= @label %>
</badge>
"""
end
def badge_classes(opts \\ %{}) do
opts = %{
size: opts[:size] || "sm",
color: opts[:color] || "primary"
}
size_css =
case opts[:size] do
"xs" -> "text-xs leading-4 px-2.5 py-1"
"sm" -> "text-sm leading-4 px-2.5 py-1"
"md" -> "text-sm leading-5 px-4 py-2"
"lg" -> "text-base leading-6 px-4 py-2"
"xl" -> "text-base leading-6 px-6 py-3"
end
color_css = get_color_classes(opts)
"""
#{color_css}
#{size_css}
font-medium
rounded-lg
inline-flex items-center justify-center
focus:outline-none
"""
end
def get_color_classes(%{color: "primary"}) do
"text-primary-800 bg-primary-100"
end
def get_color_classes(%{color: "secondary"}) do
"text-secondary-800 bg-secondary-100"
end
def get_color_classes(%{color: "white"}) do
"text-white-800 bg-white-100"
end
def get_color_classes(%{color: "black"}) do
"text-white bg-black"
end
def get_color_classes(%{color: "green"}) do
"text-green-800 bg-green-100"
end
def get_color_classes(%{color: "red"}) do
"text-red-800 bg-red-100"
end
def get_color_classes(%{color: "blue"}) do
"text-blue-800 bg-blue-100"
end
def get_color_classes(%{color: "gray"}) do
"text-gray-800 bg-gray-100"
end
def get_color_classes(%{color: "gray-light"}) do
"text-gray-500 bg-gray-100"
end
def get_color_classes(%{color: "pink"}) do
"text-pink-800 bg-pink-100"
end
def get_color_classes(%{color: "purple"}) do
"text-purple-800 bg-purple-100"
end
def get_color_classes(%{color: "orange"}) do
"text-yellow-600 bg-yellow-100"
end
def get_color_classes(%{color: "yellow"}) do
"text-yellow-800 bg-yellow-100"
end
end