From e123aec56085f9ab79c6cc692747d2a467a9c6ea Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Tue, 13 Aug 2024 10:54:29 +0800
Subject: [PATCH] feat(docs): adds component prop

---
 demo_markdown/docs/progress_bar/mod.md        |  56 ---------
 demo_markdown/docs/radio/mod.md               |  48 --------
 demo_markdown/docs/skeleton/mod.md            |  18 ---
 demo_markdown/docs/slider/mod.md              |  56 ---------
 demo_markdown/docs/switch/mod.md              |  16 ---
 demo_markdown/docs/tab_list/mod.md            |  45 -------
 demo_markdown/docs/tag/mod.md                 |  34 ------
 demo_markdown/docs/text/mod.md                |  21 ----
 demo_markdown/docs/textarea/mod.md            |  35 ------
 demo_markdown/docs/time_picker/mod.md         |  23 ----
 demo_markdown/docs/toast/mod.md               |  64 ----------
 demo_markdown/docs/upload/mod.md              |  57 ---------
 demo_markdown/src/lib.rs                      |  36 +++---
 .../popover => thaw/src/popover/docs}/mod.md  |  23 ++--
 thaw/src/popover/mod.rs                       |  12 +-
 thaw/src/progress_bar/docs/mod.md             |  56 +++++++++
 thaw/src/progress_bar/progress_bar.rs         |  12 +-
 thaw/src/progress_bar/progress_circle.rs      |  12 +-
 thaw/src/radio/docs/mod.md                    |  42 +++++++
 thaw/src/radio/mod.rs                         |   7 +-
 .../src/scrollbar/docs}/mod.md                |  23 ++--
 thaw/src/scrollbar/mod.rs                     |   8 +-
 thaw/src/skeleton/docs/mod.md                 |  22 ++++
 thaw/src/slider/docs/mod.md                   |  58 +++++++++
 thaw/src/slider/mod.rs                        |  16 ++-
 thaw/src/slider/slider_label.rs               |   4 +-
 .../docs/space => thaw/src/space/docs}/mod.md |  16 +--
 thaw/src/space/mod.rs                         |  12 +-
 .../src/spin_button/docs}/mod.md              |  33 ++++-
 thaw/src/spin_button/mod.rs                   |  33 +++--
 .../spinner => thaw/src/spinner/docs}/mod.md  |   9 +-
 thaw/src/switch/docs/mod.md                   |  17 +++
 thaw/src/switch/mod.rs                        |   4 +-
 thaw/src/tab_list/docs/mod.md                 |  38 ++++++
 thaw/src/tab_list/tab.rs                      |   1 +
 .../docs/table => thaw/src/table/docs}/mod.md |  13 +-
 thaw/src/tag/docs/mod.md                      |  33 +++++
 thaw/src/tag/mod.rs                           |   8 +-
 thaw/src/text/docs/mod.md                     |  22 ++++
 thaw/src/textarea/docs/mod.md                 |  53 ++++++++
 thaw/src/textarea/mod.rs                      |  28 +++--
 thaw/src/time_picker/docs/mod.md              |  22 ++++
 thaw/src/time_picker/mod.rs                   |   4 +-
 thaw/src/toast/docs/mod.md                    | 113 ++++++++++++++++++
 thaw/src/toast/toast.rs                       |   3 +
 thaw/src/toast/toaster_provider.rs            |   1 +
 thaw/src/upload/docs/mod.md                   |  62 ++++++++++
 thaw/src/upload/mod.rs                        |  12 +-
 48 files changed, 763 insertions(+), 578 deletions(-)
 delete mode 100644 demo_markdown/docs/progress_bar/mod.md
 delete mode 100644 demo_markdown/docs/radio/mod.md
 delete mode 100644 demo_markdown/docs/skeleton/mod.md
 delete mode 100644 demo_markdown/docs/slider/mod.md
 delete mode 100644 demo_markdown/docs/switch/mod.md
 delete mode 100644 demo_markdown/docs/tab_list/mod.md
 delete mode 100644 demo_markdown/docs/tag/mod.md
 delete mode 100644 demo_markdown/docs/text/mod.md
 delete mode 100644 demo_markdown/docs/textarea/mod.md
 delete mode 100644 demo_markdown/docs/time_picker/mod.md
 delete mode 100644 demo_markdown/docs/toast/mod.md
 delete mode 100644 demo_markdown/docs/upload/mod.md
 rename {demo_markdown/docs/popover => thaw/src/popover/docs}/mod.md (82%)
 create mode 100644 thaw/src/progress_bar/docs/mod.md
 create mode 100644 thaw/src/radio/docs/mod.md
 rename {demo_markdown/docs/scrollbar => thaw/src/scrollbar/docs}/mod.md (64%)
 create mode 100644 thaw/src/skeleton/docs/mod.md
 create mode 100644 thaw/src/slider/docs/mod.md
 rename {demo_markdown/docs/space => thaw/src/space/docs}/mod.md (68%)
 rename {demo_markdown/docs/spin_button => thaw/src/spin_button/docs}/mod.md (58%)
 rename {demo_markdown/docs/spinner => thaw/src/spinner/docs}/mod.md (58%)
 create mode 100644 thaw/src/switch/docs/mod.md
 create mode 100644 thaw/src/tab_list/docs/mod.md
 rename {demo_markdown/docs/table => thaw/src/table/docs}/mod.md (65%)
 create mode 100644 thaw/src/tag/docs/mod.md
 create mode 100644 thaw/src/text/docs/mod.md
 create mode 100644 thaw/src/textarea/docs/mod.md
 create mode 100644 thaw/src/time_picker/docs/mod.md
 create mode 100644 thaw/src/toast/docs/mod.md
 create mode 100644 thaw/src/upload/docs/mod.md

diff --git a/demo_markdown/docs/progress_bar/mod.md b/demo_markdown/docs/progress_bar/mod.md
deleted file mode 100644
index 13a64a0..0000000
--- a/demo_markdown/docs/progress_bar/mod.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# ProgressBar
-
-```rust demo
-let value = RwSignal::new(0.0);
-
-view! {
-    <Space vertical=true>
-        <ProgressBar value/>
-        <ProgressBar value color=ProgressBarColor::Success/>
-        <ProgressBar value color=ProgressBarColor::Warning/>
-        <ProgressBar value color=ProgressBarColor::Error/>
-        <Space>
-            <Button on_click=move |_| value.update(|v| *v -= 0.1)>"-10%"</Button>
-            <Button on_click=move |_| value.update(|v| *v += 0.1)>"+10%"</Button>
-        </Space>
-    </Space>
-}
-```
-
-### Circle
-
-```rust demo
-let value = RwSignal::new(0.0);
-
-view! {
-    <Space>
-        <ProgressCircle value/>
-        <ProgressCircle value color=ProgressCircleColor::Success/>
-        <ProgressCircle value color=ProgressCircleColor::Warning/>
-        <ProgressCircle value color=ProgressCircleColor::Error/>
-    </Space>
-    <Space>
-        <Button on_click=move |_| value.update(|v| *v -= 10.0)>"-10%"</Button>
-        <Button on_click=move |_| value.update(|v| *v += 10.0)>"+10%"</Button>
-    </Space>
-}
-```
-
-### Progress Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| percentage | `MaybeSignal<f32>` | `Default::default()` | Percentage value. |
-| color | `MaybeSignal<ProgressColor>` | `ProgressColor::Primary` | Progress color. |
-| show_indicator | `MaybeSignal<bool>` | `true` | Whether to display indicators. |
-| indicator_placement | `MaybeSignal<ProgressIndicatorPlacement>` | `ProgressIndicatorPlacement::Outside` | Indicator placement. |
-
-### ProgressCircle Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the progress element. |
-| percentage | `MaybeSignal<f32>` | `Default::default()` | Percentage value. |
-| color | `MaybeSignal<ProgressColor>` | `ProgressColor::Primary` | ProgressCircle color. |
-| size | `MaybeSignal<Stringr>` | `120px` | ProgressCircle size. |
-| children | `Option<Children>` | `None` | ProgressCircle's content. |
diff --git a/demo_markdown/docs/radio/mod.md b/demo_markdown/docs/radio/mod.md
deleted file mode 100644
index 3b0e098..0000000
--- a/demo_markdown/docs/radio/mod.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# Radio
-
-```rust demo
-let value = RwSignal::new(String::new());
-let option_value = RwSignal::new(None);
-
-view! {
-    <Space vertical=true>
-        <RadioGroup value>
-            <Radio value="a" label="Apple"/>
-            <Radio value="o" label="Orange"/>
-        </RadioGroup>
-        <RadioGroup value=option_value>
-            <Radio value="a" label="Apple"/>
-            <Radio value="o" label="Orange"/>
-        </RadioGroup>
-    </Space>
-    <div style="margin-top: 1rem">
-        "value: " {move || format!("{}", value.get())}
-    </div>
-    <div style="margin-top: 1rem">
-        "option_value: " {move || format!("{:?}", option_value.get())}
-    </div>
-}
-```
-
-### Radio Props
-
-| Name     | Type                                | Default              | Description                              |
-| -------- | ----------------------------------- | -------------------- | ---------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the radio element. |
-| value    | `Model<bool>`                       | `false`              | Checked value.                           |
-| children | `Option<Children>`                  | `None`               | Radio's content.                         |
-
-### RadioGroup Props
-
-| Name     | Type                    | Default              | Description                        |
-| -------- | ----------------------- | -------------------- | ---------------------------------- |
-| value    | `Model<Option<String>>` | `Default::default()` | Sets the value of the radio group. |
-| children | `Children`              |                      | RadioGroup's content.              |
-
-### RadioItem Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the radio element. |
-| key | `String` |  | The key of the radio to be used in a radio group. |
-| children | `Option<Children>` | `None` | Radio's content. |
diff --git a/demo_markdown/docs/skeleton/mod.md b/demo_markdown/docs/skeleton/mod.md
deleted file mode 100644
index 0330918..0000000
--- a/demo_markdown/docs/skeleton/mod.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Skeleton
-
-```rust demo
-view! {
-    <Skeleton>
-        <SkeletonItem/>
-    </Skeleton>
-}
-```
-
-### Skeleton Props
-
-| Name   | Type                          | Default | Description       |
-| ------ | ----------------------------- | ------- | ----------------- |
-| repeat | `MaybeSignal<u32>`            | `1`     | Repeat frequency. |
-| text   | `MaybeSignal<bool>`           | `false` | Text skeleton.    |
-| width  | `Option<MaybeSignal<String>>` | `None`  | Skeleton width.   |
-| height | `Option<MaybeSignal<String>>` | `None`  | Skeleton height.  |
diff --git a/demo_markdown/docs/slider/mod.md b/demo_markdown/docs/slider/mod.md
deleted file mode 100644
index d007071..0000000
--- a/demo_markdown/docs/slider/mod.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Slider
-
-```rust demo
-let value = RwSignal::new(0.0);
-
-view! {
-    <Slider value/>
-}
-```
-
-### Step
-
-```rust demo
-let value = RwSignal::new(0.0);
-
-view! {
-    <Slider step=25.0 value/>
-}
-```
-
-## Slider Label
-
-```rust demo
-let value = RwSignal::new(0.0);
-
-view! {
-    <Slider value max=10.0 step=5.0>
-        <SliderLabel value=0.0>
-            "0"
-        </SliderLabel>
-        <SliderLabel value=5.0>
-            "5"
-        </SliderLabel>
-        <SliderLabel value=10.0>
-            "10"
-        </SliderLabel>
-    </Slider>
-}
-```
-
-### Slider Props
-
-| Name     | Type                                | Default              | Description                               |
-| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the slider element. |
-| value    | `MaybeSignal<f64>`                  | `Default::default()` | Value of the slider.                      |
-| max      | `MaybeSignal<f64>`                  | `100`                | Max value of the slider.                  |
-| step     | `MaybeSignal<f64>`                  | `Default::default()` | The step in which value is incremented.   |
-| children | `Option<Children>`                  | `None`               | Slider's content.                         |
-
-### SliderLabel props
-
-| Name     | Type               | Default | Description                          |
-| -------- | ------------------ | ------- | ------------------------------------ |
-| value    | `MaybeSignal<f64>` |         | Value at which label will be placed. |
-| children | `Children`         |         | Content of the lable.                |
diff --git a/demo_markdown/docs/switch/mod.md b/demo_markdown/docs/switch/mod.md
deleted file mode 100644
index c10cda9..0000000
--- a/demo_markdown/docs/switch/mod.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Switch
-
-```rust demo
-let checked = RwSignal::new(false);
-
-view! {
-    <Switch checked />
-}
-```
-
-### Switch Props
-
-| Name  | Type                                | Default              | Description                               |
-| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the switch element. |
-| value | `Model<bool>`                       | `false`              | Switch's value.                           |
diff --git a/demo_markdown/docs/tab_list/mod.md b/demo_markdown/docs/tab_list/mod.md
deleted file mode 100644
index 27dc788..0000000
--- a/demo_markdown/docs/tab_list/mod.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# Tabs
-
-```rust demo
-let selected_value = RwSignal::new(String::new());
-
-view! {
-    <TabList selected_value>
-        <Tab value="apple">
-            "Apple"
-        </Tab>
-        <Tab value="pear">
-            "Pear"
-        </Tab>
-        <Tab value="item1">
-            "Item 1"
-        </Tab>
-        <Tab value="item2">
-            "Item 2"
-        </Tab>
-    </TabList>
-}
-```
-
-### Tabs Props
-
-| Name     | Type                                | Default              | Description                             |
-| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the tabs element. |
-| value    | `Model<String>`                     | `Default::default()` | Tabs value.                             |
-| children | `Children`                          |                      | Tabs content.                           |
-
-### Tab Props
-
-| Name     | Type                                | Default              | Description                            |
-| -------- | ----------------------------------- | -------------------- | -------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the tab element. |
-| key      | `String`                            |                      | The indentifier of the tab.            |
-| label    | `String`                            | `Default::default()` | The label of the tab.                  |
-| children | `Children`                          |                      | Tabs content.                          |
-
-### Tab Slots
-
-| Name     | Default | Description    |
-| -------- | ------- | -------------- |
-| TabLabel | `None`  | label content. |
diff --git a/demo_markdown/docs/tag/mod.md b/demo_markdown/docs/tag/mod.md
deleted file mode 100644
index 997122e..0000000
--- a/demo_markdown/docs/tag/mod.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Tag
-
-```rust demo
-view! {
-    <Tag>"default"</Tag>
-}
-```
-
-### Closable
-
-```rust demo
-// let message = use_message();
-let success = move |_: ev::MouseEvent| {
-    // message.create(
-    //     "tag close".into(),
-    //     MessageVariant::Success,
-    //     Default::default(),
-    // );
-};
-
-view! {
-    <Tag closable=true on_close=success>"Default"</Tag>
-}
-```
-
-### Tag Props
-
-| Name     | Type                                | Default               | Description                            |
-| -------- | ----------------------------------- | --------------------- | -------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()`  | Addtional classes for the tag element. |
-| variant  | `MaybeSignal<TagVariant>`           | `TagVariant::Default` | Tag's variant.                         |
-| closable | `MaybeSignal<bool>`                 | `false`               | Whether the tag shows a close button.  |
-| on_close | `Option<Callback<ev::MouseEvent>>`  | `None`                | Close clicked callback.                |
-| children | `Children`                          |                       | Tag's content.                         |
diff --git a/demo_markdown/docs/text/mod.md b/demo_markdown/docs/text/mod.md
deleted file mode 100644
index 5317bb3..0000000
--- a/demo_markdown/docs/text/mod.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Typography
-
-```rust demo
-view! {
-    <Space>
-        <Text>"text"</Text>
-        <Text tag=TextTag::Code>"code"</Text>
-        <Caption1>"Caption1"</Caption1>
-        <Caption1Strong>"Caption1Strong"</Caption1Strong>
-        <Body1>"Body1"</Body1>
-    </Space>
-}
-```
-
-## Text Props
-
-| Name     | Type                                | Default              | Description                             |
-| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the text element. |
-| code     | `bool`                              | `false`              | Use the code tag and style.             |
-| children | `Children`                          |                      | Text's content.                         |
diff --git a/demo_markdown/docs/textarea/mod.md b/demo_markdown/docs/textarea/mod.md
deleted file mode 100644
index b2a880f..0000000
--- a/demo_markdown/docs/textarea/mod.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Input
-
-```rust demo
-let value = RwSignal::new(String::from("o"));
-
-view! {
-    <Textarea value placeholder="Textarea"/>
-}
-```
-
-### Disabled
-
-```rust demo
-let value = RwSignal::new(String::from("o"));
-
-view! {
-    <Textarea value disabled=true/>
-}
-```
-
-### Resize
-
-```rust demo
-view! {
-    <Space vertical=true>
-        <Textarea placeholder=r#"Textarea with resize set to "none""#/>
-        <Textarea placeholder=r#"Textarea with resize set to "vertical""# resize=TextareaResize::Vertical/>
-        <Textarea placeholder=r#"Textarea with resize set to "horizontal""# resize=TextareaResize::Horizontal/>
-        <Textarea placeholder=r#"Textarea with resize set to "both""# resize=TextareaResize::Both/>
-    </Space>
-}
-```
-
-### Textarea Props
-
diff --git a/demo_markdown/docs/time_picker/mod.md b/demo_markdown/docs/time_picker/mod.md
deleted file mode 100644
index fc36196..0000000
--- a/demo_markdown/docs/time_picker/mod.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Time Picker
-
-```rust demo
-use chrono::prelude::*;
-
-let value = RwSignal::new(Local::now().time());
-let option_value = RwSignal::new(Local::now().time());
-
-view! {
-    <Space vertical=true>
-        <TimePicker value />
-        <TimePicker value=option_value />
-    </Space>
-}
-```
-
-## TimePicker Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the time picker element. |
-| value | `Model<Option<NaiveTime>>` | `Default::default()` | Set the TimePicker value. |
-| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
diff --git a/demo_markdown/docs/toast/mod.md b/demo_markdown/docs/toast/mod.md
deleted file mode 100644
index e1e2fab..0000000
--- a/demo_markdown/docs/toast/mod.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# Toast
-
-```rust demo
-let toaster = ToasterInjection::expect_context();
-
-let on_click = move |_| {
-    toaster.dispatch_toast(view! {
-        <Toast>
-            <ToastTitle>"Email sent"</ToastTitle>
-            <ToastBody>
-                "This is a toast body"
-                <ToastBodySubtitle slot>
-                    "Subtitle"
-                </ToastBodySubtitle>
-            </ToastBody>
-            <ToastFooter>
-                "Footer"
-                // <Link>Action</Link>
-                // <Link>Action</Link>
-            </ToastFooter>
-        </Toast>
-     }.into_any(), Default::default());
-};
-
-view! {
-    <Button on_click=on_click>"Make toast"</Button>
-}
-```
-
-### Toast Positions
-
-```rust demo
-let toaster = ToasterInjection::expect_context();
-
-fn dispatch_toast(toaster: ToasterInjection, position: ToastPosition) {
-    toaster.dispatch_toast(view! {
-        <Toast>
-            <ToastTitle>"Email sent"</ToastTitle>
-            <ToastBody>
-                "This is a toast body"
-                <ToastBodySubtitle slot>
-                    "Subtitle"
-                </ToastBodySubtitle>
-            </ToastBody>
-            <ToastFooter>
-                "Footer"
-                // <Link>Action</Link>
-                // <Link>Action</Link>
-            </ToastFooter>
-        </Toast>
-     }.into_any(), ToastOptions::default().with_position(position));
-};
-
-view! {
-    <Space>
-        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Bottom)>"Bottom"</Button>
-        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomStart)>"BottomStart"</Button>
-        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomEnd)>"BottomEnd"</Button>
-        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Top)>"Top"</Button>
-        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopStart)>"Topstart"</Button>
-        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopEnd)>"TopEnd"</Button>
-    </Space>
-}
-```
diff --git a/demo_markdown/docs/upload/mod.md b/demo_markdown/docs/upload/mod.md
deleted file mode 100644
index 4f87a14..0000000
--- a/demo_markdown/docs/upload/mod.md
+++ /dev/null
@@ -1,57 +0,0 @@
-# Upload
-
-```rust demo
-use send_wrapper::SendWrapper;
-
-// let message = use_message();
-let custom_request = move |file_list: SendWrapper<FileList>| {
-    // message.create(
-    //     format!("Number of uploaded files: {}", file_list.length()),
-    //     MessageVariant::Success,
-    //     Default::default(),
-    // );
-};
-
-view!{
-    <Upload>
-        <Button>
-            "upload"
-        </Button>
-    </Upload>
-}
-```
-
-### Drag to upload
-
-```rust demo
-
-// let message = use_message();
-let custom_request = move |file_list: FileList| {
-    // message.create(
-    //     format!("Number of uploaded files: {}", file_list.length()),
-    //     MessageVariant::Success,
-    //     Default::default(),
-    // );
-};
-
-view! {
-    <Upload custom_request>
-        <UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
-    </Upload>
-}
-```
-
-### Upload Props
-
-| Name           | Type                             | Default              | Description                          |
-| -------------- | -------------------------------- | -------------------- | ------------------------------------ |
-| accept         | `MaybeSignal<String>`            | `Default::default()` | The accept type of upload.           |
-| multiple       | `MaybeSignal<bool>`              | `false`              | Allow multiple files to be selected. |
-| custom_request | `Option<Callback<FileList, ()>>` | `Default::default()` | Customize upload request.            |
-| children       | `Children`                       |                      | Upload's content.                    |
-
-### UploadDragger Props
-
-| Name     | Type       | Default | Description              |
-| -------- | ---------- | ------- | ------------------------ |
-| children | `Children` |         | UploadDragger's content. |
diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs
index c448e2d..696e47d 100644
--- a/demo_markdown/src/lib.rs
+++ b/demo_markdown/src/lib.rs
@@ -52,24 +52,24 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "MessageBarMdPage" => "../../thaw/src/message_bar/docs/mod.md",
         "NavMdPage" => "../../thaw/src/nav/docs/mod.md",
         "PaginationMdPage" => "../../thaw/src/pagination/docs/mod.md",
-        "PopoverMdPage" => "../docs/popover/mod.md",
-        "ProgressBarMdPage" => "../docs/progress_bar/mod.md",
-        "RadioMdPage" => "../docs/radio/mod.md",
-        "ScrollbarMdPage" => "../docs/scrollbar/mod.md",
-        "SkeletonMdPage" => "../docs/skeleton/mod.md",
-        "SliderMdPage" => "../docs/slider/mod.md",
-        "SpaceMdPage" => "../docs/space/mod.md",
-        "SpinButtonMdPage" => "../docs/spin_button/mod.md",
-        "SpinnerMdPage" => "../docs/spinner/mod.md",
-        "SwitchMdPage" => "../docs/switch/mod.md",
-        "TabListMdPage" => "../docs/tab_list/mod.md",
-        "TableMdPage" => "../docs/table/mod.md",
-        "TagMdPage" => "../docs/tag/mod.md",
-        "TextMdPage" => "../docs/text/mod.md",
-        "TextareaMdPage" => "../docs/textarea/mod.md",
-        "TimePickerMdPage" => "../docs/time_picker/mod.md",
-        "ToastMdPage" => "../docs/toast/mod.md",
-        "UploadMdPage" => "../docs/upload/mod.md"
+        "PopoverMdPage" => "../../thaw/src/popover/docs/mod.md",
+        "ProgressBarMdPage" => "../../thaw/src/progress_bar/docs/mod.md",
+        "RadioMdPage" => "../../thaw/src/radio/docs/mod.md",
+        "ScrollbarMdPage" => "../../thaw/src/scrollbar/docs/mod.md",
+        "SkeletonMdPage" => "../../thaw/src/skeleton/docs/mod.md",
+        "SliderMdPage" => "../../thaw/src/slider/docs/mod.md",
+        "SpaceMdPage" => "../../thaw/src/space/docs/mod.md",
+        "SpinButtonMdPage" => "../../thaw/src/spin_button/docs/mod.md",
+        "SpinnerMdPage" => "../../thaw/src/spinner/docs/mod.md",
+        "SwitchMdPage" => "../../thaw/src/switch/docs/mod.md",
+        "TabListMdPage" => "../../thaw/src/tab_list/docs/mod.md",
+        "TableMdPage" => "../../thaw/src/table/docs/mod.md",
+        "TagMdPage" => "../../thaw/src/tag/docs/mod.md",
+        "TextMdPage" => "../../thaw/src/text/docs/mod.md",
+        "TextareaMdPage" => "../../thaw/src/textarea/docs/mod.md",
+        "TimePickerMdPage" => "../../thaw/src/time_picker/docs/mod.md",
+        "ToastMdPage" => "../../thaw/src/toast/docs/mod.md",
+        "UploadMdPage" => "../../thaw/src/upload/docs/mod.md"
     };
 
     let mut fn_list = vec![];
diff --git a/demo_markdown/docs/popover/mod.md b/thaw/src/popover/docs/mod.md
similarity index 82%
rename from demo_markdown/docs/popover/mod.md
rename to thaw/src/popover/docs/mod.md
index bc9564a..e201638 100644
--- a/demo_markdown/docs/popover/mod.md
+++ b/thaw/src/popover/docs/mod.md
@@ -152,15 +152,18 @@ view! {
 
 ### Popover Props
 
-| Name     | Type                                | Default                | Description                   |
-| -------- | ----------------------------------- | ---------------------- | ----------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()`   | Content class of the popover. |
-| position | `PopoverPosition`                   | `PopoverPosition::Top` | Popover position.             |
-| tooltip  | `bool`                              | `false`                | Tooltip.                      |
-| children | `Children`                          |                        | The content inside popover.   |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp<String>` | `Default::default()` |  |
+| position | `PopoverPosition` | `PopoverPosition::Top` | Configures the position of the Popover. |
+| appearance | `MaybeProp<PopoverAppearance>` | `Default::default()` | A popover can appear styled with brand or inverted. When not specified, the default style is used. |
+| trigger_type | `PopoverTriggerType` | `PopoverTriggerType::Hover` | Action that displays the popover. |
+| popover_trigger | slot `PopoverTrigger` |  | The element or component that triggers popover. |
+| children | `Children` |  |  |
 
-### Popover Slots
+### PopoverTrigger Props
 
-| Name           | Default | Description                                     |
-| -------------- | ------- | ----------------------------------------------- |
-| PopoverTrigger |         | The element or component that triggers popover. |
+| Name     | Type                | Default              | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class    | `MaybeProp<String>` | `Default::default()` |             |
+| children | `Children`          |                      |             |
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index cefaf26..edbf740 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -14,14 +14,18 @@ pub struct PopoverTrigger {
 #[component]
 pub fn Popover(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(optional)] trigger_type: PopoverTriggerType,
+    /// Action that displays the popover.
+    #[prop(optional)]
+    trigger_type: PopoverTriggerType,
+    /// The element or component that triggers popover.
     popover_trigger: PopoverTrigger,
     /// Configures the position of the Popover.
     #[prop(optional)]
     position: PopoverPosition,
-    /// A popover can appear styled with brand or inverted. When not specified, the default style is used.
+    /// A popover can appear styled with brand or inverted.
+    /// When not specified, the default style is used.
     #[prop(optional, into)]
-    appearance: Option<MaybeSignal<PopoverAppearance>>,
+    appearance: MaybeProp<PopoverAppearance>,
     children: Children,
 ) -> impl IntoView {
     mount_style("popover", include_str!("./popover.css"));
@@ -131,7 +135,7 @@ pub fn Popover(
                     <div
                         class=class_list![
                             "thaw-config-provider thaw-popover-surface",
-                            appearance.map(|appearance| move || format!("thaw-popover-surface--{}", appearance.get().as_str())),
+                            move || appearance.get().map(|a| format!("thaw-popover-surface--{}", a.as_str())),
                             class
                         ]
                         data-thaw-id=config_provider.id().clone()
diff --git a/thaw/src/progress_bar/docs/mod.md b/thaw/src/progress_bar/docs/mod.md
new file mode 100644
index 0000000..6fe217f
--- /dev/null
+++ b/thaw/src/progress_bar/docs/mod.md
@@ -0,0 +1,56 @@
+# ProgressBar
+
+```rust demo
+let value = RwSignal::new(0.0);
+
+view! {
+    <Space vertical=true>
+        <ProgressBar value/>
+        <ProgressBar value color=ProgressBarColor::Success/>
+        <ProgressBar value color=ProgressBarColor::Warning/>
+        <ProgressBar value color=ProgressBarColor::Error/>
+        <Space>
+            <Button on_click=move |_| value.update(|v| *v -= 0.1)>"-10%"</Button>
+            <Button on_click=move |_| value.update(|v| *v += 0.1)>"+10%"</Button>
+        </Space>
+    </Space>
+}
+```
+
+### Circle
+
+```rust demo
+let value = RwSignal::new(0.0);
+
+view! {
+    <Space>
+        <ProgressCircle value/>
+        <ProgressCircle value color=ProgressCircleColor::Success/>
+        <ProgressCircle value color=ProgressCircleColor::Warning/>
+        <ProgressCircle value color=ProgressCircleColor::Error/>
+    </Space>
+    <Space>
+        <Button on_click=move |_| value.update(|v| *v -= 10.0)>"-10%"</Button>
+        <Button on_click=move |_| value.update(|v| *v += 10.0)>"+10%"</Button>
+    </Space>
+}
+```
+
+### ProgressBar Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp<String>` | `Default::default()` |  |
+| value | `MaybeSignal<f64>` | `Default::default()` | A decimal number between 0 and 1 (or between 0 and max if given), which specifies how much of the task has been completed. |
+| max | `MaybeSignal<f64>` | `1.0` | The maximum value, which indicates the task is complete. The ProgressBar bar will be full when value equals max. |
+| color | `MaybeSignal<ProgressColor>` | `ProgressColor::Brand` | ProgressBar color. |
+
+### ProgressCircle Props
+
+| Name     | Type                               | Default                      | Description           |
+| -------- | ---------------------------------- | ---------------------------- | --------------------- |
+| class    | `MaybeProp<String>`                | `Default::default()`         |                       |
+| value    | `MaybeSignal<f64>`                 | `Default::default()`         | Percentage value.     |
+| color    | `MaybeSignal<ProgressCircleColor>` | `ProgressCircleColor::Brand` | ProgressCircle color. |
+| size     | `MaybeSignal<String>`              | `120px`                      | ProgressCircle size.  |
+| children | `Option<Children>`                 | `None`                       |                       |
diff --git a/thaw/src/progress_bar/progress_bar.rs b/thaw/src/progress_bar/progress_bar.rs
index 1d0d495..9e4a4e9 100644
--- a/thaw/src/progress_bar/progress_bar.rs
+++ b/thaw/src/progress_bar/progress_bar.rs
@@ -4,11 +4,17 @@ use thaw_utils::{class_list, mount_style};
 #[component]
 pub fn ProgressBar(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(into, optional)] value: MaybeSignal<f64>,
+    /// A decimal number between 0 and 1 (or between 0 and max if given),
+    /// which specifies how much of the task has been completed.
+    #[prop(into, optional)]
+    value: MaybeSignal<f64>,
     /// The maximum value, which indicates the task is complete.
     /// The ProgressBar bar will be full when value equals max.
-    #[prop(default = 1.0.into(), optional)] max: MaybeSignal<f64>,
-    #[prop(into, optional)] color: MaybeSignal<ProgressBarColor>,
+    #[prop(default = 1.0.into(), optional)]
+    max: MaybeSignal<f64>,
+    /// ProgressBar color.
+    #[prop(into, optional)]
+    color: MaybeSignal<ProgressBarColor>,
 ) -> impl IntoView {
     mount_style("progress-bar", include_str!("./progress-bar.css"));
 
diff --git a/thaw/src/progress_bar/progress_circle.rs b/thaw/src/progress_bar/progress_circle.rs
index 20731a8..a41787c 100644
--- a/thaw/src/progress_bar/progress_circle.rs
+++ b/thaw/src/progress_bar/progress_circle.rs
@@ -4,9 +4,15 @@ use thaw_utils::{class_list, mount_style};
 #[component]
 pub fn ProgressCircle(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(into, optional)] value: MaybeSignal<f64>,
-    #[prop(into, optional)] color: MaybeSignal<ProgressCircleColor>,
-    #[prop(into, default = "120px".into())] size: MaybeSignal<String>,
+    /// Percentage value.
+    #[prop(into, optional)]
+    value: MaybeSignal<f64>,
+    /// ProgressCircle color.
+    #[prop(into, optional)]
+    color: MaybeSignal<ProgressCircleColor>,
+    /// ProgressCircle size.
+    #[prop(into, default = "120px".into())]
+    size: MaybeSignal<String>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     mount_style("progress-circle", include_str!("./progress-circle.css"));
diff --git a/thaw/src/radio/docs/mod.md b/thaw/src/radio/docs/mod.md
new file mode 100644
index 0000000..4c57cbb
--- /dev/null
+++ b/thaw/src/radio/docs/mod.md
@@ -0,0 +1,42 @@
+# Radio
+
+```rust demo
+let value = RwSignal::new(String::new());
+let option_value = RwSignal::new(None);
+
+view! {
+    <Space vertical=true>
+        <RadioGroup value>
+            <Radio value="a" label="Apple"/>
+            <Radio value="o" label="Orange"/>
+        </RadioGroup>
+        <RadioGroup value=option_value>
+            <Radio value="a" label="Apple"/>
+            <Radio value="o" label="Orange"/>
+        </RadioGroup>
+    </Space>
+    <div style="margin-top: 1rem">
+        "value: " {move || format!("{}", value.get())}
+    </div>
+    <div style="margin-top: 1rem">
+        "option_value: " {move || format!("{:?}", option_value.get())}
+    </div>
+}
+```
+
+### Radio Props
+
+| Name  | Type                | Default              | Description                                         |
+| ----- | ------------------- | -------------------- | --------------------------------------------------- |
+| class | `MaybeProp<String>` | `Default::default()` |                                                     |
+| value | `String`            | `Default::default()` | The value of the radio to be used in a radio group. |
+| label | `MaybeProp<String>` | `None`               | The Radio's label.                                  |
+
+### RadioGroup Props
+
+| Name     | Type                  | Default              | Description                            |
+| -------- | --------------------- | -------------------- | -------------------------------------- |
+| class    | `MaybeProp<String>`   | `Default::default()` |                                        |
+| value    | `OptionModel<String>` | `Default::default()` | The selected Radio item in this group. |
+| name     | `Option<String>`      | `None`               | The name of this radio group.          |
+| children | `Children`            |                      |                                        |
diff --git a/thaw/src/radio/mod.rs b/thaw/src/radio/mod.rs
index 90cc32e..c9354d4 100644
--- a/thaw/src/radio/mod.rs
+++ b/thaw/src/radio/mod.rs
@@ -9,9 +9,12 @@ use thaw_utils::{class_list, mount_style};
 #[component]
 pub fn Radio(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(optional, into)] value: String,
+    /// The value of the radio to be used in a radio group.
+    #[prop(optional, into)]
+    value: String,
     /// The Radio's label.
-    #[prop(optional, into)] label: MaybeProp<String>,
+    #[prop(optional, into)]
+    label: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("radio", include_str!("./radio.css"));
 
diff --git a/demo_markdown/docs/scrollbar/mod.md b/thaw/src/scrollbar/docs/mod.md
similarity index 64%
rename from demo_markdown/docs/scrollbar/mod.md
rename to thaw/src/scrollbar/docs/mod.md
index 441b2a5..fbe0f9f 100644
--- a/demo_markdown/docs/scrollbar/mod.md
+++ b/thaw/src/scrollbar/docs/mod.md
@@ -24,11 +24,18 @@ view! {
 
 ### Scrollbar Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the scrollbar element. |
-| style | `Option<MaybeSignal<String>>` | `Default::default()` | Scrollbar's style. |
-| content_class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the layout element. |
-| content_style | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Style of scrollable content node. |
-| size | `u8` | `8` | Size of scrollbar. |
-| children | `Children` |  | Scrollbar's content. |
+| Name          | Type                                     | Default              | Description                |
+| ------------- | ---------------------------------------- | -------------------- | -------------------------- |
+| class         | `MaybeProp<String>`                      | `Default::default()` |                            |
+| style         | `MaybeProp<String>`                      | `Default::default()` |                            |
+| content_class | `MaybeProp<String>`                      | `Default::default()` | Class name of content div. |
+| content_style | `MaybeProp<String>`                      | `Default::default()` | Style of content div.      |
+| size          | `u8`                                     | `8`                  | Size of scrollbar.         |
+| comp_ref      | ref `Option<ComponentRef<ScrollbarRef>>` | `None`               |                            |
+| children      | `Children`                               |                      |                            |
+
+### ScrollbarRef Props
+
+| Name                             | Type                                            | Description     |
+| -------------------------------- | ----------------------------------------------- | --------------- |
+| scroll_to_with_scroll_to_options | `Fn(&self, options: &web_sys::ScrollToOptions)` | Scroll content. |
diff --git a/thaw/src/scrollbar/mod.rs b/thaw/src/scrollbar/mod.rs
index 0478fe0..5852329 100644
--- a/thaw/src/scrollbar/mod.rs
+++ b/thaw/src/scrollbar/mod.rs
@@ -4,9 +4,12 @@ use thaw_utils::{class_list, mount_style, ComponentRef};
 #[component]
 pub fn Scrollbar(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(optional, into)] style: Option<MaybeSignal<String>>,
+    #[prop(optional, into)] style: MaybeProp<String>,
+    /// Class name of content div.
     #[prop(optional, into)] content_class: MaybeProp<String>,
+    /// Style of content div.
     #[prop(optional, into)] content_style: MaybeProp<String>,
+    /// Size of scrollbar.
     #[prop(default = 8)] size: u8,
     #[prop(optional)] comp_ref: Option<ComponentRef<ScrollbarRef>>,
     children: Children,
@@ -287,7 +290,7 @@ pub fn Scrollbar(
         <div
             class=class_list!["thaw-scrollbar", class]
             style=move || {
-                format!("--thaw-scrollbar-size: {}px;{}", size, style.as_ref().map(|s| s.get()).unwrap_or_default())
+                format!("--thaw-scrollbar-size: {}px;{}", size, style.get().unwrap_or_default())
             }
 
             on:mouseenter=on_mouseenter
@@ -352,6 +355,7 @@ impl ScrollbarRef {
         self.container_scroll_top.get_untracked()
     }
 
+    /// Scroll content.
     pub fn scroll_to_with_scroll_to_options(&self, options: &web_sys::ScrollToOptions) {
         if let Some(el) = self.container_ref.get_untracked() {
             el.scroll_to_with_scroll_to_options(options);
diff --git a/thaw/src/skeleton/docs/mod.md b/thaw/src/skeleton/docs/mod.md
new file mode 100644
index 0000000..a80a566
--- /dev/null
+++ b/thaw/src/skeleton/docs/mod.md
@@ -0,0 +1,22 @@
+# Skeleton
+
+```rust demo
+view! {
+    <Skeleton>
+        <SkeletonItem/>
+    </Skeleton>
+}
+```
+
+### Skeleton Props
+
+| Name     | Type                | Default              | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class    | `MaybeProp<String>` | `Default::default()` |             |
+| children | `Children`          |                      |             |
+
+### SkeletonItem Props
+
+| Name  | Type                | Default              | Description |
+| ----- | ------------------- | -------------------- | ----------- |
+| class | `MaybeProp<String>` | `Default::default()` |             |
diff --git a/thaw/src/slider/docs/mod.md b/thaw/src/slider/docs/mod.md
new file mode 100644
index 0000000..735c69d
--- /dev/null
+++ b/thaw/src/slider/docs/mod.md
@@ -0,0 +1,58 @@
+# Slider
+
+```rust demo
+let value = RwSignal::new(0.0);
+
+view! {
+    <Slider value/>
+}
+```
+
+### Step
+
+```rust demo
+let value = RwSignal::new(0.0);
+
+view! {
+    <Slider step=25.0 value/>
+}
+```
+
+## Slider Label
+
+```rust demo
+let value = RwSignal::new(0.0);
+
+view! {
+    <Slider value max=10.0 step=5.0>
+        <SliderLabel value=0.0>
+            "0"
+        </SliderLabel>
+        <SliderLabel value=5.0>
+            "5"
+        </SliderLabel>
+        <SliderLabel value=10.0>
+            "10"
+        </SliderLabel>
+    </Slider>
+}
+```
+
+### Slider Props
+
+| Name     | Type                | Default              | Description                                 |
+| -------- | ------------------- | -------------------- | ------------------------------------------- |
+| class    | `MaybeProp<String>` | `Default::default()` |                                             |
+| value    | `MaybeSignal<f64>`  | `0`                  | The current value of the controlled Slider. |
+| min      | `MaybeSignal<f64>`  | `0`                  | Min value of the slider.                    |
+| max      | `MaybeSignal<f64>`  | `100`                | Max value of the slider.                    |
+| step     | `MaybeSignal<f64>`  | `0`                  | The step in which value is incremented.     |
+| children | `Option<Children>`  | `None`               |                                             |
+
+### SliderLabel props
+
+| Name     | Type                | Default              | Description                          |
+| -------- | ------------------- | -------------------- | ------------------------------------ |
+| class    | `MaybeProp<String>` | `Default::default()` |                                      |
+| value    | `MaybeSignal<f64>`  |                      | Value at which label will be placed. |
+| children | `Children`          |                      |                                      |
diff --git a/thaw/src/slider/mod.rs b/thaw/src/slider/mod.rs
index e697dcc..7b6825d 100644
--- a/thaw/src/slider/mod.rs
+++ b/thaw/src/slider/mod.rs
@@ -8,11 +8,19 @@ use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn Slider(
-    #[prop(optional, into)] value: Model<f64>,
-    #[prop(default = 0f64.into(), into)] min: MaybeSignal<f64>,
-    #[prop(default = 100f64.into(), into)] max: MaybeSignal<f64>,
-    #[prop(optional, into)] step: MaybeProp<f64>,
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// The current value of the controlled Slider.
+    #[prop(optional, into)]
+    value: Model<f64>,
+    /// Min value of the slider.
+    #[prop(default = 0f64.into(), into)]
+    min: MaybeSignal<f64>,
+    /// Max value of the slider.
+    #[prop(default = 100f64.into(), into)]
+    max: MaybeSignal<f64>,
+    /// The step in which value is incremented.
+    #[prop(optional, into)]
+    step: MaybeProp<f64>,
     #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     mount_style("slider", include_str!("./slider.css"));
diff --git a/thaw/src/slider/slider_label.rs b/thaw/src/slider/slider_label.rs
index e5c919a..256db5a 100644
--- a/thaw/src/slider/slider_label.rs
+++ b/thaw/src/slider/slider_label.rs
@@ -5,7 +5,9 @@ use thaw_utils::{class_list, mount_style};
 #[component]
 pub fn SliderLabel(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(into)] value: MaybeSignal<f64>,
+    /// Value at which label will be placed.
+    #[prop(into)]
+    value: MaybeSignal<f64>,
     children: Children,
 ) -> impl IntoView {
     mount_style("slider-label", include_str!("./slider_label.css"));
diff --git a/demo_markdown/docs/space/mod.md b/thaw/src/space/docs/mod.md
similarity index 68%
rename from demo_markdown/docs/space/mod.md
rename to thaw/src/space/docs/mod.md
index 84b0756..0fe719b 100644
--- a/demo_markdown/docs/space/mod.md
+++ b/thaw/src/space/docs/mod.md
@@ -89,11 +89,11 @@ view! {
 
 ### Space Props
 
-| Name     | Type                                | Default              | Description                              |
-| -------- | ----------------------------------- | -------------------- | ---------------------------------------- |
-| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the space element. |
-| vertical | `bool`                              | `false`              | Whether to lay out vertically.           |
-| gap      | `SpaceGap`                          | `SpaceGap::Medium`   | Space's gap.                             |
-| align    | `OptionalMaybeSignal<SpaceAlign>`   | `None`               | Vertical arrangement.                    |
-| justify  | `OptionalMaybeSignal<SpaceJustify>` | `None`               | Horizontal arrangement.                  |
-| children | `Children`                          |                      | Space's content.                         |
+| Name     | Type                      | Default              | Description                    |
+| -------- | ------------------------- | -------------------- | ------------------------------ |
+| class    | `MaybeProp<String>`       | `Default::default()` |                                |
+| vertical | `bool`                    | `false`              | Whether to lay out vertically. |
+| gap      | `SpaceGap`                | `SpaceGap::Medium`   | Space's gap.                   |
+| align    | `MaybeProp<SpaceAlign>`   | `None`               | Vertical arrangement.          |
+| justify  | `MaybeProp<SpaceJustify>` | `None`               | Horizontal arrangement.        |
+| children | `ChildrenFragment`        |                      |                                |
diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs
index fb6c1e0..71242f3 100644
--- a/thaw/src/space/mod.rs
+++ b/thaw/src/space/mod.rs
@@ -14,11 +14,15 @@ pub enum SpaceGap {
 
 #[component]
 pub fn Space(
-    #[prop(optional)] gap: SpaceGap,
-    #[prop(optional)] vertical: bool,
-    #[prop(optional, into)] align: MaybeProp<SpaceAlign>,
-    #[prop(optional, into)] justify: MaybeProp<SpaceJustify>,
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// Space's gap.
+    #[prop(optional)] gap: SpaceGap,
+    /// Whether to lay out vertically.
+    #[prop(optional)] vertical: bool,
+    ///  Vertical arrangement.
+    #[prop(optional, into)] align: MaybeProp<SpaceAlign>,
+    /// Horizontal arrangement.
+    #[prop(optional, into)] justify: MaybeProp<SpaceJustify>,
     children: ChildrenFragment,
 ) -> impl IntoView {
     mount_style("space", include_str!("./space.css"));
diff --git a/demo_markdown/docs/spin_button/mod.md b/thaw/src/spin_button/docs/mod.md
similarity index 58%
rename from demo_markdown/docs/spin_button/mod.md
rename to thaw/src/spin_button/docs/mod.md
index a8cae4b..66d3148 100644
--- a/demo_markdown/docs/spin_button/mod.md
+++ b/thaw/src/spin_button/docs/mod.md
@@ -42,11 +42,11 @@ let format = move |v: f64| {
     let dot_pos = v.chars().position(|c| c == '.').unwrap_or_else(|| v.chars().count());
     let mut int: String = v.chars().take(dot_pos).collect();
 
-    let sign: String = if v.chars().take(1).collect::<String>() == String::from("-") { 
+    let sign: String = if v.chars().take(1).collect::<String>() == String::from("-") {
         int = int.chars().skip(1).collect();
         String::from("-")
-    } else { 
-        String::from("") 
+    } else {
+        String::from("")
     };
 
     let dec: String = v.chars().skip(dot_pos + 1).take(2).collect();
@@ -66,7 +66,7 @@ let parser = move |v: String| {
     let comma_pos = v.chars().position(|c| c == ',').unwrap_or_else(|| v.chars().count());
     let int_part = v.chars().take(comma_pos).filter(|a| a.is_digit(10)).collect::<String>();
     let dec_part = v.chars().skip(comma_pos + 1).take(2).filter(|a| a.is_digit(10)).collect::<String>();
-    
+
     format!("{:0<1}.{:0<2}", int_part, dec_part).parse::<f64>().ok()
 };
 
@@ -74,4 +74,27 @@ view! {
     <SpinButton value parser format step_page=1.0 />
     <p>"Underlying value: "{ value }</p>
 }
-```
\ No newline at end of file
+```
+
+### SpinButton Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp<String>` | `Default::default()` |  |
+| value | `Model<T>` | `T::default()` | Current value of the control. |
+| placeholder | `MaybeProp<String>` | `Default::default()` | Placeholder of input number. |
+| step_page | `MaybeSignal<T>` |  | Large difference between two values. This should be greater than step and is used when users hit the Page Up or Page Down keys. |
+| min | `MaybeSignal<T>` | `T::min_value()` | The minimum number that the input value can take. |
+| max | `MaybeSignal<T>` | `T::max_value()` | The maximum number that the input value can take. |
+| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
+| parser | `OptionalProp<BoxOneCallback<String, Option<T>>>` | `None` | Modifies the user input before assigning it to the value. |
+| format | `OptionalProp<BoxOneCallback<T, String>>` | `None` | Formats the value to be shown to the user. |
+
+#### T impl
+
+```rust
+where
+    T: Send + Sync,
+    T: Add<Output = T> + Sub<Output = T> + PartialOrd + Bounded,
+    T: Default + Clone + FromStr + ToString + 'static,
+```
diff --git a/thaw/src/spin_button/mod.rs b/thaw/src/spin_button/mod.rs
index 8ab9a34..44446fc 100644
--- a/thaw/src/spin_button/mod.rs
+++ b/thaw/src/spin_button/mod.rs
@@ -9,13 +9,31 @@ use thaw_utils::{
 #[component]
 pub fn SpinButton<T>(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(optional, into)] value: Model<T>,
-    #[prop(into)] step_page: MaybeSignal<T>,
-    #[prop(default = T::min_value().into(), into)] min: MaybeSignal<T>,
-    #[prop(default = T::max_value().into(), into)] max: MaybeSignal<T>,
-    #[prop(optional, into)] disabled: MaybeSignal<bool>,
-    #[prop(optional, into)] parser: OptionalProp<BoxOneCallback<String, Option<T>>>,
-    #[prop(optional, into)] format: OptionalProp<BoxOneCallback<T, String>>,
+    /// Current value of the control.
+    #[prop(optional, into)]
+    value: Model<T>,
+    /// Large difference between two values. This should be greater
+    /// than step and is used when users hit the Page Up or Page Down keys.
+    #[prop(into)]
+    step_page: MaybeSignal<T>,
+    /// The minimum number that the input value can take.
+    #[prop(default = T::min_value().into(), into)]
+    min: MaybeSignal<T>,
+    /// The maximum number that the input value can take.
+    #[prop(default = T::max_value().into(), into)]
+    max: MaybeSignal<T>,
+    /// Placeholder of input number.
+    #[prop(optional, into)]
+    placeholder: MaybeProp<String>,
+    /// Whether the input is disabled.
+    #[prop(optional, into)]
+    disabled: MaybeSignal<bool>,
+    /// Modifies the user input before assigning it to the value.
+    #[prop(optional, into)]
+    parser: OptionalProp<BoxOneCallback<String, Option<T>>>,
+    /// Formats the value to be shown to the user.
+    #[prop(optional, into)]
+    format: OptionalProp<BoxOneCallback<T, String>>,
 ) -> impl IntoView
 where
     T: Send + Sync,
@@ -69,6 +87,7 @@ where
                 aria-valuenow=move || value.get().to_string()
                 type="text"
                 disabled=move || disabled.get()
+                placeholder=move || placeholder.get()
                 value=initialization_value
                 prop:value=move || {
                     let value = value.get();
diff --git a/demo_markdown/docs/spinner/mod.md b/thaw/src/spinner/docs/mod.md
similarity index 58%
rename from demo_markdown/docs/spinner/mod.md
rename to thaw/src/spinner/docs/mod.md
index 3e9c507..8176057 100644
--- a/demo_markdown/docs/spinner/mod.md
+++ b/thaw/src/spinner/docs/mod.md
@@ -25,7 +25,8 @@ view! {
 
 ### Spinner Props
 
-| Name  | Type                                | Default               | Description                                 |
-| ----- | ----------------------------------- | --------------------- | ------------------------------------------- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()`  | Additional classes for the spinner element. |
-| size  | `MaybeSignal<SpinnerSize>`          | `SpinnerSize::Medium` | Spinner size.                               |
+| Name  | Type                       | Default               | Description                        |
+| ----- | -------------------------- | --------------------- | ---------------------------------- |
+| class | `MaybeProp<String>`        | `Default::default()`  |                                    |
+| label | `MaybeProp<String>`        | `Default::default()`  | An optional label for the Spinner. |
+| size  | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | The size of the spinner.           |
diff --git a/thaw/src/switch/docs/mod.md b/thaw/src/switch/docs/mod.md
new file mode 100644
index 0000000..cd035c3
--- /dev/null
+++ b/thaw/src/switch/docs/mod.md
@@ -0,0 +1,17 @@
+# Switch
+
+```rust demo
+let checked = RwSignal::new(false);
+
+view! {
+    <Switch checked />
+}
+```
+
+### Switch Props
+
+| Name    | Type                | Default              | Description                                         |
+| ------- | ------------------- | -------------------- | --------------------------------------------------- |
+| class   | `MaybeProp<String>` | `Default::default()` |                                                     |
+| checked | `Model<bool>`       | `false`              | Defines the controlled checked state of the Switch. |
+| label   | `MaybeProp<String>` | `Default::default()` | The Switch's label.                                 |
diff --git a/thaw/src/switch/mod.rs b/thaw/src/switch/mod.rs
index 5b57c90..dc52834 100644
--- a/thaw/src/switch/mod.rs
+++ b/thaw/src/switch/mod.rs
@@ -3,8 +3,10 @@ use thaw_utils::{class_list, mount_style, Model};
 
 #[component]
 pub fn Switch(
-    #[prop(optional, into)] checked: Model<bool>,
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// Defines the controlled checked state of the Switch.
+    #[prop(optional, into)] checked: Model<bool>,
+    /// The Switch's label.
     #[prop(optional, into)] label: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("switch", include_str!("./switch.css"));
diff --git a/thaw/src/tab_list/docs/mod.md b/thaw/src/tab_list/docs/mod.md
new file mode 100644
index 0000000..f6b97ef
--- /dev/null
+++ b/thaw/src/tab_list/docs/mod.md
@@ -0,0 +1,38 @@
+# Tabs
+
+```rust demo
+let selected_value = RwSignal::new(String::new());
+
+view! {
+    <TabList selected_value>
+        <Tab value="apple">
+            "Apple"
+        </Tab>
+        <Tab value="pear">
+            "Pear"
+        </Tab>
+        <Tab value="item1">
+            "Item 1"
+        </Tab>
+        <Tab value="item2">
+            "Item 2"
+        </Tab>
+    </TabList>
+}
+```
+
+### Tabs Props
+
+| Name           | Type                | Default              | Description                              |
+| -------------- | ------------------- | -------------------- | ---------------------------------------- |
+| class          | `MaybeProp<String>` | `Default::default()` |                                          |
+| selected_value | `Model<String>`     | `Default::default()` | The value of the currently selected tab. |
+| children       | `Children`          |                      |                                          |
+
+### Tab Props
+
+| Name     | Type                | Default              | Description                 |
+| -------- | ------------------- | -------------------- | --------------------------- |
+| class    | `MaybeProp<String>` | `Default::default()` |                             |
+| value    | `String`            |                      | The indentifier of the tab. |
+| children | `Children`          |                      |                             |
diff --git a/thaw/src/tab_list/tab.rs b/thaw/src/tab_list/tab.rs
index 206f61d..3eba81e 100644
--- a/thaw/src/tab_list/tab.rs
+++ b/thaw/src/tab_list/tab.rs
@@ -6,6 +6,7 @@ use thaw_utils::{class_list, mount_style};
 #[component]
 pub fn Tab(
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// The indentifier of the tab.
     #[prop(into)] value: String,
     children: Children,
 ) -> impl IntoView {
diff --git a/demo_markdown/docs/table/mod.md b/thaw/src/table/docs/mod.md
similarity index 65%
rename from demo_markdown/docs/table/mod.md
rename to thaw/src/table/docs/mod.md
index 5112844..ab6845f 100644
--- a/demo_markdown/docs/table/mod.md
+++ b/thaw/src/table/docs/mod.md
@@ -38,12 +38,9 @@ view! {
 }
 ```
 
-### Table Props
+### Table & TableHeader & TableHeaderCell & TableBody & TableRow & TableCell & TableCellLayout Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the table element. |
-| style | `MaybeSignal<String>` | `Default::default()` | Table's style. |
-| single_row | `MaybeSignal<bool>` | `true` | Whether columns are not divided. If the prop is true, table cell has no border-right. |
-| single_column | `MaybeSignal<bool>` | `false` | Whether rows are not divided. If the prop is true, table cell has no border-bottom. |
-| children | `Children` |  | Table's content. |
+| Name     | Type                | Default              | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class    | `MaybeProp<String>` | `Default::default()` |             |
+| children | `Children`          |                      |             |
diff --git a/thaw/src/tag/docs/mod.md b/thaw/src/tag/docs/mod.md
new file mode 100644
index 0000000..1c2194c
--- /dev/null
+++ b/thaw/src/tag/docs/mod.md
@@ -0,0 +1,33 @@
+# Tag
+
+```rust demo
+view! {
+    <Tag>"default"</Tag>
+}
+```
+
+### Closable
+
+```rust demo
+// let message = use_message();
+let success = move |_: ev::MouseEvent| {
+    // message.create(
+    //     "tag close".into(),
+    //     MessageVariant::Success,
+    //     Default::default(),
+    // );
+};
+
+view! {
+    <Tag closable=true on_close=success>"Default"</Tag>
+}
+```
+
+### Tag Props
+
+| Name     | Type                                     | Default              | Description                           |
+| -------- | ---------------------------------------- | -------------------- | ------------------------------------- |
+| class    | `MaybeProp<String>`                      | `Default::default()` |                                       |
+| closable | `MaybeSignal<bool>`                      | `false`              | Whether the tag shows a close button. |
+| on_close | `Option<ArcOneCallback<ev::MouseEvent>>` | `None`               | Close clicked callback.               |
+| children | `Children`                               |                      |                                       |
diff --git a/thaw/src/tag/mod.rs b/thaw/src/tag/mod.rs
index fd9491d..41be517 100644
--- a/thaw/src/tag/mod.rs
+++ b/thaw/src/tag/mod.rs
@@ -4,8 +4,12 @@ use thaw_utils::{class_list, mount_style, ArcOneCallback};
 #[component]
 pub fn Tag(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(optional, into)] closable: MaybeSignal<bool>,
-    #[prop(optional, into)] on_close: Option<ArcOneCallback<ev::MouseEvent>>,
+    /// Whether the tag shows a close button.
+    #[prop(optional, into)]
+    closable: MaybeSignal<bool>,
+    /// Close clicked callback.
+    #[prop(optional, into)]
+    on_close: Option<ArcOneCallback<ev::MouseEvent>>,
     children: Children,
 ) -> impl IntoView {
     mount_style("tag", include_str!("./tag.css"));
diff --git a/thaw/src/text/docs/mod.md b/thaw/src/text/docs/mod.md
new file mode 100644
index 0000000..19ae88f
--- /dev/null
+++ b/thaw/src/text/docs/mod.md
@@ -0,0 +1,22 @@
+# Typography
+
+```rust demo
+view! {
+    <Space>
+        <Text>"text"</Text>
+        <Text tag=TextTag::Code>"code"</Text>
+        <Caption1>"Caption1"</Caption1>
+        <Caption1Strong>"Caption1Strong"</Caption1Strong>
+        <Body1>"Body1"</Body1>
+    </Space>
+}
+```
+
+## Text & Caption1 & Caption1Strong & Body1 & Props
+
+| Name     | Type                | Default              | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class    | `MaybeProp<String>` | `Default::default()` |             |
+| style    | `MaybeProp<String>` | `Default::default()` |             |
+| tag      | `TextTag`           | `TextTag::Span`      |             |
+| children | `Children`          |                      |             |
diff --git a/thaw/src/textarea/docs/mod.md b/thaw/src/textarea/docs/mod.md
new file mode 100644
index 0000000..833a618
--- /dev/null
+++ b/thaw/src/textarea/docs/mod.md
@@ -0,0 +1,53 @@
+# Input
+
+```rust demo
+let value = RwSignal::new(String::from("o"));
+
+view! {
+    <Textarea value placeholder="Textarea"/>
+}
+```
+
+### Disabled
+
+```rust demo
+let value = RwSignal::new(String::from("o"));
+
+view! {
+    <Textarea value disabled=true/>
+}
+```
+
+### Resize
+
+```rust demo
+view! {
+    <Space vertical=true>
+        <Textarea placeholder=r#"Textarea with resize set to "none""#/>
+        <Textarea placeholder=r#"Textarea with resize set to "vertical""# resize=TextareaResize::Vertical/>
+        <Textarea placeholder=r#"Textarea with resize set to "horizontal""# resize=TextareaResize::Horizontal/>
+        <Textarea placeholder=r#"Textarea with resize set to "both""# resize=TextareaResize::Both/>
+    </Space>
+}
+```
+
+### Textarea Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeProp<String>` | `Default::default()` |  |
+| value | `Model<String>` | `Default::default()` | The value of the Textarea. |
+| allow_value | `Option<BoxOneCallback<String, bool>>` | `None` | Check the incoming value, if it returns false, input will not be accepted. |
+| placeholder | `MaybeProp<String>` | `Default::default()` | Placeholder text for the input. |
+| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
+| on_focus | `Option<BoxOneCallback<ev::FocusEvent>>` | `None` | Callback triggered when the input is focussed on. |
+| on_blur | `Option<BoxOneCallback<ev::FocusEvent>>` | `None` | Callback triggered when the input is blurred. |
+| resize | `MaybeSignal<TextareaResize>` | `TextareaResize::None` | Which direction the Textarea is allowed to be resized. |
+| comp_ref | ref `ComponentRef<TextareaRef>` | `Default::default()` |  |
+
+### TextareaRef Props
+
+| Name  | Type        | Description              |
+| ----- | ----------- | ------------------------ |
+| focus | `Fn(&self)` | Focus the input element. |
+| blur  | `Fn(&self)` | Blur the input element.  |
diff --git a/thaw/src/textarea/mod.rs b/thaw/src/textarea/mod.rs
index 7faa127..1577c97 100644
--- a/thaw/src/textarea/mod.rs
+++ b/thaw/src/textarea/mod.rs
@@ -3,17 +3,29 @@ use thaw_utils::{class_list, mount_style, BoxOneCallback, ComponentRef, Model};
 
 #[component]
 pub fn Textarea(
-    #[prop(optional, into)] value: Model<String>,
-    #[prop(optional, into)] allow_value: Option<BoxOneCallback<String, bool>>,
-    #[prop(optional, into)] placeholder: MaybeProp<String>,
-    #[prop(optional, into)] on_focus: Option<BoxOneCallback<ev::FocusEvent>>,
-    #[prop(optional, into)] on_blur: Option<BoxOneCallback<ev::FocusEvent>>,
-    #[prop(optional, into)] disabled: MaybeSignal<bool>,
+    #[prop(optional, into)] class: MaybeProp<String>,
+    /// The value of the Textarea.
+    #[prop(optional, into)]
+    value: Model<String>,
+    /// Check the incoming value, if it returns false, input will not be accepted.
+    #[prop(optional, into)]
+    allow_value: Option<BoxOneCallback<String, bool>>,
+    /// Placeholder text for the input.
+    #[prop(optional, into)]
+    placeholder: MaybeProp<String>,
+    /// Callback triggered when the input is focussed on.
+    #[prop(optional, into)]
+    on_focus: Option<BoxOneCallback<ev::FocusEvent>>,
+    /// Callback triggered when the input is blurred.
+    #[prop(optional, into)]
+    on_blur: Option<BoxOneCallback<ev::FocusEvent>>,
+    /// Whether the input is disabled.
+    #[prop(optional, into)]
+    disabled: MaybeSignal<bool>,
     /// Which direction the Textarea is allowed to be resized.
     #[prop(optional, into)]
     resize: MaybeSignal<TextareaResize>,
     #[prop(optional)] comp_ref: ComponentRef<TextareaRef>,
-    #[prop(optional, into)] class: MaybeProp<String>,
     // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("textarea", include_str!("./textarea.css"));
@@ -92,12 +104,14 @@ pub struct TextareaRef {
 }
 
 impl TextareaRef {
+    /// Focus the input element.
     pub fn focus(&self) {
         if let Some(textarea_el) = self.textarea_ref.get_untracked() {
             _ = textarea_el.focus();
         }
     }
 
+    /// Blur the input element.
     pub fn blur(&self) {
         if let Some(textarea_el) = self.textarea_ref.get_untracked() {
             _ = textarea_el.blur();
diff --git a/thaw/src/time_picker/docs/mod.md b/thaw/src/time_picker/docs/mod.md
new file mode 100644
index 0000000..0cf19f9
--- /dev/null
+++ b/thaw/src/time_picker/docs/mod.md
@@ -0,0 +1,22 @@
+# Time Picker
+
+```rust demo
+use chrono::prelude::*;
+
+let value = RwSignal::new(Local::now().time());
+let option_value = RwSignal::new(Local::now().time());
+
+view! {
+    <Space vertical=true>
+        <TimePicker value />
+        <TimePicker value=option_value />
+    </Space>
+}
+```
+
+## TimePicker Props
+
+| Name  | Type                     | Default              | Description               |
+| ----- | ------------------------ | -------------------- | ------------------------- |
+| class | `MaybeProp<String>`      | `Default::default()` |                           |
+| value | `OptionModel<NaiveTime>` | `Default::default()` | Set the TimePicker value. |
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index 06c4cb3..bd673bc 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -9,8 +9,10 @@ use thaw_utils::{class_list, mount_style, ArcOneCallback, ComponentRef, OptionMo
 
 #[component]
 pub fn TimePicker(
-    #[prop(optional, into)] value: OptionModel<NaiveTime>,
     #[prop(optional, into)] class: MaybeProp<String>,
+    /// Set the TimePicker value.
+    #[prop(optional, into)]
+    value: OptionModel<NaiveTime>,
     // #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
 ) -> impl IntoView {
     mount_style("time-picker", include_str!("./time-picker.css"));
diff --git a/thaw/src/toast/docs/mod.md b/thaw/src/toast/docs/mod.md
new file mode 100644
index 0000000..37bbb04
--- /dev/null
+++ b/thaw/src/toast/docs/mod.md
@@ -0,0 +1,113 @@
+# Toast
+
+```rust demo
+let toaster = ToasterInjection::expect_context();
+
+let on_click = move |_| {
+    toaster.dispatch_toast(view! {
+        <Toast>
+            <ToastTitle>"Email sent"</ToastTitle>
+            <ToastBody>
+                "This is a toast body"
+                <ToastBodySubtitle slot>
+                    "Subtitle"
+                </ToastBodySubtitle>
+            </ToastBody>
+            <ToastFooter>
+                "Footer"
+                // <Link>Action</Link>
+                // <Link>Action</Link>
+            </ToastFooter>
+        </Toast>
+     }.into_any(), Default::default());
+};
+
+view! {
+    <Button on_click=on_click>"Make toast"</Button>
+}
+```
+
+### Toast Positions
+
+```rust demo
+let toaster = ToasterInjection::expect_context();
+
+fn dispatch_toast(toaster: ToasterInjection, position: ToastPosition) {
+    toaster.dispatch_toast(view! {
+        <Toast>
+            <ToastTitle>"Email sent"</ToastTitle>
+            <ToastBody>
+                "This is a toast body"
+                <ToastBodySubtitle slot>
+                    "Subtitle"
+                </ToastBodySubtitle>
+            </ToastBody>
+            <ToastFooter>
+                "Footer"
+                // <Link>Action</Link>
+                // <Link>Action</Link>
+            </ToastFooter>
+        </Toast>
+     }.into_any(), ToastOptions::default().with_position(position));
+};
+
+view! {
+    <Space>
+        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Bottom)>"Bottom"</Button>
+        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomStart)>"BottomStart"</Button>
+        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::BottomEnd)>"BottomEnd"</Button>
+        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::Top)>"Top"</Button>
+        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopStart)>"Topstart"</Button>
+        <Button on_click=move |_| dispatch_toast(toaster, ToastPosition::TopEnd)>"TopEnd"</Button>
+    </Space>
+}
+```
+
+### ToasterProvider Props
+
+| Name     | Type            | Default                    | Description                           |
+| -------- | --------------- | -------------------------- | ------------------------------------- |
+| position | `ToastPosition` | `ToastPosition::BottomEnd` | The position the toast should render. |
+| children | `Children`      |                            |                                       |
+
+### ToastOptions Props
+
+| Name          | Type                                    | Description                           |
+| ------------- | --------------------------------------- | ------------------------------------- |
+| with_position | `Fn(mut self, position: ToastPosition)` | The position the toast should render. |
+| with_timeout  | `Fn(mut self, timeout: Duration)`       | Auto dismiss timeout in milliseconds. |
+| with_intent   | `Fn(mut self, intent: ToastIntent)`     | Intent.                               |
+
+### Toast & ToastFooter Props
+
+| Name     | Type                | Default              | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class    | `MaybeProp<String>` | `Default::default()` |             |
+| children | `Children`          |                      |             |
+
+### ToastTitle Props
+
+| Name               | Type                            | Default | Description |
+| ------------------ | ------------------------------- | ------- | ----------- |
+| toast_title_media  | slot `Option<ToastTitleMedia>`  | `None`  |             |
+| toast_title_action | slot `Option<ToastTitleAction>` | `None`  |             |
+| children           | `Children`                      |         |             |
+
+### ToastTitleMedia & ToastTitleAction Props
+
+| Name     | Type       | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` |         |             |
+
+### ToastBody Props
+
+| Name                | Type                             | Default | Description |
+| ------------------- | -------------------------------- | ------- | ----------- |
+| toast_body_subtitle | slot `Option<ToastBodySubtitle>` | `None`  |             |
+| children            | `Children`                       |         |             |
+
+### ToastBodySubtitle Props
+
+| Name     | Type       | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` |         |             |
diff --git a/thaw/src/toast/toast.rs b/thaw/src/toast/toast.rs
index 3a2a64f..6199378 100644
--- a/thaw/src/toast/toast.rs
+++ b/thaw/src/toast/toast.rs
@@ -66,16 +66,19 @@ impl Default for ToastOptions {
 }
 
 impl ToastOptions {
+    /// The position the toast should render.
     pub fn with_position(mut self, position: ToastPosition) -> Self {
         self.position = Some(position);
         self
     }
 
+    /// Auto dismiss timeout in milliseconds.
     pub fn with_timeout(mut self, timeout: Duration) -> Self {
         self.timeout = Some(timeout);
         self
     }
 
+    /// Intent.
     pub fn with_intent(mut self, intent: ToastIntent) -> Self {
         self.intent = Some(intent);
         self
diff --git a/thaw/src/toast/toaster_provider.rs b/thaw/src/toast/toaster_provider.rs
index 92ac91b..0504ef1 100644
--- a/thaw/src/toast/toaster_provider.rs
+++ b/thaw/src/toast/toaster_provider.rs
@@ -3,6 +3,7 @@ use leptos::{context::Provider, prelude::*};
 
 #[component]
 pub fn ToasterProvider(
+    /// The position the toast should render.
     #[prop(optional)] position: ToastPosition,
     children: Children,
 ) -> impl IntoView {
diff --git a/thaw/src/upload/docs/mod.md b/thaw/src/upload/docs/mod.md
new file mode 100644
index 0000000..1df4f59
--- /dev/null
+++ b/thaw/src/upload/docs/mod.md
@@ -0,0 +1,62 @@
+# Upload
+
+```rust demo
+use send_wrapper::SendWrapper;
+
+// let message = use_message();
+let custom_request = move |file_list: SendWrapper<FileList>| {
+    // message.create(
+    //     format!("Number of uploaded files: {}", file_list.length()),
+    //     MessageVariant::Success,
+    //     Default::default(),
+    // );
+};
+
+view!{
+    <Upload>
+        <Button>
+            "upload"
+        </Button>
+    </Upload>
+}
+```
+
+### Drag to upload
+
+```rust demo
+let toaster = ToasterInjection::expect_context();
+
+let custom_request = move |file_list: FileList| {
+    let len = file_list.length();
+    toaster.dispatch_toast(view! {
+        <Toast>
+            <ToastBody>
+                {format!("Number of uploaded files: {len}")}
+            </ToastBody>
+        </Toast>
+    }.into_any(), Default::default());
+};
+
+view! {
+    <Upload custom_request>
+        <UploadDragger>"Click or drag a file to this area to upload"</UploadDragger>
+    </Upload>
+}
+```
+
+### Upload Props
+
+| Name           | Type                               | Default              | Description                          |
+| -------------- | ---------------------------------- | -------------------- | ------------------------------------ |
+| class          | `MaybeProp<String>`                | `Default::default()` |                                      |
+| accept         | `MaybeSignal<String>`              | `Default::default()` | The accept type of upload.           |
+| multiple       | `MaybeSignal<bool>`                | `false`              | Allow multiple files to be selected. |
+| custom_request | `Option<ArcOneCallback<FileList>>` | `None`               | Customize upload request.            |
+| children       | `Children`                         |                      |                                      |
+
+### UploadDragger Props
+
+| Name     | Type                | Default              | Description |
+| -------- | ------------------- | -------------------- | ----------- |
+| class    | `MaybeProp<String>` | `Default::default()` |             |
+| children | `Children`          |                      |             |
diff --git a/thaw/src/upload/mod.rs b/thaw/src/upload/mod.rs
index e25f2f6..d7aaa9e 100644
--- a/thaw/src/upload/mod.rs
+++ b/thaw/src/upload/mod.rs
@@ -9,9 +9,15 @@ use thaw_utils::{add_event_listener, class_list, mount_style, ArcOneCallback};
 #[component]
 pub fn Upload(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(optional, into)] accept: MaybeSignal<String>,
-    #[prop(optional, into)] multiple: MaybeSignal<bool>,
-    #[prop(optional, into)] custom_request: Option<ArcOneCallback<FileList>>,
+    /// The accept type of upload.
+    #[prop(optional, into)]
+    accept: MaybeSignal<String>,
+    /// Allow multiple files to be selected.
+    #[prop(optional, into)]
+    multiple: MaybeSignal<bool>,
+    /// Customize upload request.
+    #[prop(optional, into)]
+    custom_request: Option<ArcOneCallback<FileList>>,
     children: Children,
 ) -> impl IntoView {
     mount_style("upload", include_str!("./upload.css"));