Packages
petal_components
4.8.1
4.8.1
4.8.0
4.7.0
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/showcase/aurora.ex
defmodule PetalComponents.Showcase.Aurora do
@moduledoc false
use PetalComponents.Showcase, component: PetalComponents.Aurora, title: "Aurora"
example :basic_aurora, "Basic Aurora",
description:
"A soft, drifting glow behind your content. The wrapper sizes to fit - no colors means the default palette." do
~H"""
<.aurora id="showcase-aurora-basic" class="w-full max-w-xl mx-auto rounded-2xl">
<div class="flex flex-col items-center px-8 py-20 text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
Ship your Phoenix app this weekend
</h2>
<p class="max-w-md mt-3 text-gray-600 dark:text-gray-300">
Auth, billing, orgs and a component library that looks like you hired a designer.
</p>
<.button label="Get started" class="mt-6" />
</div>
</.aurora>
"""
end
example :custom_colors, "Custom Colors",
description:
"Pass any palette as colors (three to six CSS colors) and the gradient is built for you." do
~H"""
<div class="grid w-full max-w-2xl gap-4 mx-auto sm:grid-cols-3">
<.aurora
id="showcase-aurora-sunset"
colors={["#f97316", "#f43f5e", "#fbbf24", "#fb7185"]}
class="border border-gray-200 rounded-xl dark:border-gray-800"
>
<div class="flex items-end px-4 h-32">
<span class="pb-3 font-mono text-xs text-gray-500 dark:text-gray-400">sunset</span>
</div>
</.aurora>
<.aurora
id="showcase-aurora-emerald"
colors={["#10b981", "#5eead4", "#a7f3d0", "#34d399"]}
class="border border-gray-200 rounded-xl dark:border-gray-800"
>
<div class="flex items-end px-4 h-32">
<span class="pb-3 font-mono text-xs text-gray-500 dark:text-gray-400">emerald</span>
</div>
</.aurora>
<.aurora
id="showcase-aurora-violet"
colors={["#8b5cf6", "#f0abfc", "#c4b5fd", "#a78bfa"]}
class="border border-gray-200 rounded-xl dark:border-gray-800"
>
<div class="flex items-end px-4 h-32">
<span class="pb-3 font-mono text-xs text-gray-500 dark:text-gray-400">violet</span>
</div>
</.aurora>
</div>
"""
end
example :aurora_with_content, "Aurora with Content",
description: "Slow the drift with speed and drop a full call-to-action straight inside." do
~H"""
<.aurora
id="showcase-aurora-content"
colors={["#22d3ee", "#06b6d4", "#0891b2", "#0e7490"]}
speed="80s"
class="w-full max-w-xl mx-auto rounded-2xl"
>
<div class="flex flex-col items-center px-8 py-16 text-center">
<h2 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">Start selling today</h2>
<p class="max-w-md mb-6 text-gray-600 dark:text-gray-300">
Everything wired up out of the box, so you spend the weekend on the part that's yours.
</p>
<.button label="Get started" color="primary" />
</div>
</.aurora>
"""
end
example :aurora_card, "Aurora Card",
description:
"Set it behind cards for feature highlights. A lower opacity keeps the copy readable." do
~H"""
<.aurora
id="showcase-aurora-card"
colors={["#6366f1", "#4f46e5", "#4338ca", "#3730a3"]}
opacity="0.35"
class="w-full max-w-md mx-auto rounded-xl"
>
<.card class="relative z-10 bg-transparent border-0 shadow-none dark:bg-transparent">
<.card_content category="Feature" heading="Fast development">
<p class="text-gray-700 dark:text-white/80">
Build interfaces in record time with a component library and design system that agree.
</p>
</.card_content>
</.card>
</.aurora>
"""
end
example :testimonial_aurora, "Testimonial with Aurora",
description:
"Push the mask out with mask_position and mask_coverage to flood more of the container - a testimonial that pulls the eye without shouting." do
~H"""
<.aurora
id="showcase-aurora-testimonial"
colors={["#c084fc", "#a855f7", "#9333ea", "#7e22ce"]}
opacity="0.35"
mask_position="center top"
mask_coverage="0%, 100%"
class="w-full max-w-2xl mx-auto rounded-xl"
>
<div class="flex flex-col items-center px-8 py-16 text-center">
<p class="max-w-2xl mb-8 text-xl text-gray-900 dark:text-white">
"The aurora took our landing page from fine to the thing people mention on calls. Two attributes and it was done."
</p>
<div class="font-bold text-gray-900 dark:text-white">Jordan Lee</div>
<div class="text-purple-700 dark:text-purple-300">Founder, Northwind</div>
</div>
</.aurora>
"""
end
end