diff --git a/website/docs/concepts/function-components/attribute.mdx b/website/docs/concepts/function-components/attribute.mdx
index 96e87c313ee..72451283a36 100644
--- a/website/docs/concepts/function-components/attribute.mdx
+++ b/website/docs/concepts/function-components/attribute.mdx
@@ -11,7 +11,26 @@ Functions with the attribute have to return `Html` and may take a single paramet
 The parameter type needs to be a reference to a `Properties` type (ex. `props: &MyProps`).
 If the function doesn't have any parameters the resulting component doesn't accept any props.
 
-The attribute doesn't replace your original function with a component. You need to provide a name as an input to the attribute which will be the identifier of the component.
+Just mark the component with the attribute (also aliased as `#[fc]`). The component will be named after the function.
+
+```rust
+use yew::{fc, html, Html};
+
+#[fc]
+pub fn ChatContainer() -> Html {
+    html! {
+        // chat container impl
+    }
+}
+
+html! {
+    <ChatContainer />
+};
+```
+
+## Specifying a custom component name
+
+You need to provide a name as an input to the attribute which will be the identifier of the component.
 Assuming you have a function called `chat_container` and you add the attribute `#[function_component(ChatContainer)]` you can use the component like this:
 
 ```rust
@@ -42,8 +61,8 @@ pub struct RenderedAtProps {
     pub time: String,
 }
 
-#[function_component(RenderedAt)]
-pub fn rendered_at(props: &RenderedAtProps) -> Html {
+#[function_component]
+pub fn RenderedAt(props: &RenderedAtProps) -> Html {
     html! {
         <p>
             <b>{ "Rendered at: " }</b>
@@ -59,8 +78,8 @@ pub fn rendered_at(props: &RenderedAtProps) -> Html {
 ```rust
 use yew::{function_component, html, use_state, Callback};
 
-#[function_component(App)]
-fn app() -> Html {
+#[function_component]
+fn App() -> Html {
     let counter = use_state(|| 0);
 
     let onclick = {
@@ -99,8 +118,8 @@ where
     data: T,
 }
 
-#[function_component(MyGenericComponent)]
-pub fn my_generic_component<T>(props: &Props<T>) -> Html
+#[function_component]
+pub fn MyGenericComponent<T>(props: &Props<T>) -> Html
 where
     T: PartialEq + Display,
 {
diff --git a/website/docs/concepts/function-components/introduction.mdx b/website/docs/concepts/function-components/introduction.mdx
index 05d14fcd5af..48983495100 100644
--- a/website/docs/concepts/function-components/introduction.mdx
+++ b/website/docs/concepts/function-components/introduction.mdx
@@ -16,10 +16,10 @@ implement the `Component` trait.
 The easiest way to create a function component is to add the [`#[function_component]`](./../function-components/attribute.mdx) attribute to a function.
 
 ```rust
-use yew::{function_component, html};
+use yew::{fc, html};
 
-#[function_component(HelloWorld)]
-fn hello_world() -> Html {
+#[fc]
+fn HelloWorld() -> Html {
     html! { "Hello world" }
 }
 ```