Packages
petal_components
4.7.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/command.ex
defmodule PetalComponents.Showcase.Command do
@moduledoc false
use PetalComponents.Showcase,
component: PetalComponents.Command,
title: "Command",
functions: [:command, :command_dialog, :command_item]
example :inline_palette, "Inline palette",
description:
"A palette panel you drop into a page, sidebar or picker. Type to filter; arrow keys move, Enter runs." do
~H"""
<div class="w-full max-w-md mx-auto">
<.command
id="showcase-command"
loop
class="border border-gray-200 shadow-xs dark:border-white/15"
>
<.command_input placeholder="Type a command or search..." />
<.command_list>
<.command_empty>No results found.</.command_empty>
<.command_group heading="Suggestions">
<.command_item keywords={["date", "schedule"]}>
<.icon name="hero-calendar" /> Calendar
</.command_item>
<.command_item keywords={["smile"]}>
<.icon name="hero-face-smile" /> Search emoji
</.command_item>
<.command_item disabled>
<.icon name="hero-calculator" /> Calculator
</.command_item>
</.command_group>
<.command_separator />
<.command_group heading="Settings">
<.command_item keywords={["account", "user"]}>
<.icon name="hero-user" /> Profile
<.command_shortcut>⌘P</.command_shortcut>
</.command_item>
<.command_item keywords={["payment", "card"]}>
<.icon name="hero-credit-card" /> Billing
<.command_shortcut>⌘B</.command_shortcut>
</.command_item>
</.command_group>
</.command_list>
</.command>
</div>
"""
end
example :command_dialog, "The ⌘K dialog",
description:
"The same palette in a native <dialog> - top layer, focus trap and Escape for free. Open it from any element." do
~H"""
<div class="flex flex-col items-center gap-3">
<.button
color="gray"
variant="outline"
phx-click={PetalComponents.Command.open_command("showcase-cmdk")}
>
<.icon name="hero-magnifying-glass" class="w-4 h-4 mr-1" /> Open command palette
</.button>
<.command_dialog id="showcase-cmdk" shortcut="">
<.command_input placeholder="Search components and actions..." />
<.command_list>
<.command_empty>Nothing matches. Try a component name.</.command_empty>
<.command_group heading="Navigation">
<.command_item keywords={["home"]}>
<.icon name="hero-home" /> Overview
</.command_item>
<.command_item keywords={["ui", "components"]}>
<.icon name="hero-squares-2x2" /> Components
</.command_item>
<.command_item keywords={["price", "plans"]}>
<.icon name="hero-credit-card" /> Pricing
</.command_item>
</.command_group>
</.command_list>
</.command_dialog>
</div>
"""
end
end