diff --git a/docs_src/docs/widgets/attributes.md b/docs_src/docs/widgets/attributes.md
new file mode 100644
index 0000000..2ac009a
--- /dev/null
+++ b/docs_src/docs/widgets/attributes.md
@@ -0,0 +1,26 @@
+# Attributes
+
+## Attributes of widgets
+
+All widgets have some attributes that can be used to customize the widget. The attributes are:
+
+### load_css
+
+This attribute is used to load the CSS of the widget. It is a boolean value. If it is `True`, the CSS of the widget will be loaded. If it is `False`, the CSS of the widget will not be loaded. The default value is `False`. If you need to add the CSS of the widget, you can add it manually. `FormWidget(load_css=True)` will load the CSS of the `FormWidget` widget.
+
+### forms_type
+
+This attribute is used to set the type of the form. It is a string value. The default value is `loginform`. Currently, we are working on `loginform`, `registrationform`, `contactform`, `searchform`, `subscribeform` and `commentform`. More will come soon. `FormWidget(forms_type="loginform")` will set the type of the form to `loginform`.
+
+### action
+
+This attribute is used to set the action of the form. It is a string value. The default value is `#`. `FormWidget(action="/login")` will set the action of the form to `/login`. If you need to set the action of the form to the current page, you can set it to `""` or `#`.
+
+### method
+
+This attribute is used to set the method of the form. It is a string value. The default value is `POST`. `FormWidget(method="GET")` will set the method of the form to `GET`.
+
+### add_element
+
+This attribute is used to add more elements to the form. You can use it `FormWidget().add_element(element)` to add an element to the form. `FormWidget().add_element(Input(type="text", name="username"))` will add an input element to the form.
+
diff --git a/docs_src/docs/widgets/introduction.md b/docs_src/docs/widgets/introduction.md
new file mode 100644
index 0000000..14fa309
--- /dev/null
+++ b/docs_src/docs/widgets/introduction.md
@@ -0,0 +1,34 @@
+# Widgets Introduction
+
+## What is a widget?
+
+A widget is a set of components that can be used to build a user interface (UI) smoothly and very quickly. Widgets are build for making development process easier and faster. Widgets are also used to make the UI more beautiful and attractive with a single line of code.
+
+## How to use a widget?
+
+To use a widget, you need to import it from the `fronty.html.widgets` module. For example, if you need to make a login form, you can use the `FormWidget` widget. You can simply call the `FormWidget` class and add it to your page.
+
+```py linenums="1" title="main.py" hl_lines="16"
+from fronty.html.widgets import FormWidget
+from fronty.html import *
+
+from flask import Flask
+
+app = Flask(__name__)
+
+@app.route("/")
+def login():
+   return Html(
+        Head(
+            Meta(charset="utf-8"),
+            Title("Test case"),
+        ),
+        Body(
+            FormWidget(load_css=True)
+        )
+    ).render()
+
+
+if __name__ == "__main__":
+    app.run(debug=True)
+```
diff --git a/docs_src/mkdocs.yml b/docs_src/mkdocs.yml
index bbaafb7..36070bf 100644
--- a/docs_src/mkdocs.yml
+++ b/docs_src/mkdocs.yml
@@ -82,6 +82,9 @@ nav:
           - Introduction: components/js/introduction.md
   - Customization: 
       - HTML Customization: customization/customized-html.md
+  - Widgets:
+      - Introduction: widgets/introduction.md
+      - Attributes: widgets/attributes.md
   - Projects:
       - Starter Project: projects/starter-project.md
       - Bootstrap Integration: projects/bootstrap-integration.md