diff --git a/README.md b/README.md
index 488e2f9..e20ae36 100644
--- a/README.md
+++ b/README.md
@@ -592,3 +592,24 @@ https://github.com/dwyl/phoenix-liveview-chat-example
 
 We think it's _siiiiiiick_!
 More examples to follow soon!
+
+### Petal Components
+
+<img width="545" alt="petal.build" src="https://user-images.githubusercontent.com/194400/193780264-16a4330d-df64-4f04-9c89-2d6b1146ad32.png">
+
+Petal components are a set of reusable functions to help you build a nice UI:
+
+![image](https://user-images.githubusercontent.com/6057298/193790320-a436dc02-d86f-49d9-9bc2-cfc7d76e4e91.png)
+
+
+Follow the instructions steps at https://petal.build/components to install the
+Petal components to your Phoenix project. After that you'll be able to call in your
+templates the components with the syntax `<.component>...</.component>`, for example:
+
+```heex
+<.h2>Title</.h2>
+```
+
+see: 
+- https://petal.build/
+- https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html
diff --git a/lib/app_web.ex b/lib/app_web.ex
index fa22b3f..facc8ac 100644
--- a/lib/app_web.ex
+++ b/lib/app_web.ex
@@ -33,6 +33,8 @@ defmodule AppWeb do
         namespace: AppWeb
 
       # Import convenience functions from controllers
+      import Phoenix.Component
+
       import Phoenix.Controller,
         only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]