### Install cargo-leptos

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Install the cargo-leptos tool if you don't have it.

```bash
cargo install cargo-leptos --locked
```

--------------------------------

### Using Loading Bar with Provider and Injection

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/loading_bar/docs/mod.md

This example demonstrates how to use the Loading Bar component. Wrap your component in LoadingBarProvider and use LoadingBarInjection::expect_context to access the API for starting, finishing, or showing errors.

```rust
let loading_bar = LoadingBarInjection::expect_context();
let start = move |_| {
    loading_bar.start();
};
let finish = move |_| {
    loading_bar.finish();
};
let error = move |_| {
    loading_bar.error();
};

view! {
    <Space>
        <Button on_click=start>"start"</Button>
        <Button on_click=finish>"finish"</Button>
        <Button on_click=error>"error"</Button>
    </Space>
}
```

--------------------------------

### Basic Combobox Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/combobox/docs/mod.md

Demonstrates the basic setup of a Combobox with a placeholder and options. One option is disabled.

```rust
let selected_options = RwSignal::new(None::<String>);

view! {
    <Combobox selected_options placeholder="Select an animal">
        <ComboboxOption value="cat" text="Cat" disabled=true/>
        <ComboboxOption value="dog" text="Dog" />
    </Combobox>
}
```

--------------------------------

### Inline Drawer Examples

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/drawer/docs/mod.md

Illustrates the usage of inline drawers, which are integrated within the layout rather than overlaying it. This example shows left, right, and bottom positioned inline drawers.

```rust
let open_left = RwSignal::new(false);
let open_right = RwSignal::new(false);
let open_buttom = RwSignal::new(false);

view! {
    <div style="display: flex; flex-direction: column; overflow: hidden; height: 400px; background-color: #0078ff88;">
        <div style="display: flex; overflow: hidden; height: 400px;">
            <InlineDrawer open=open_left>
                <DrawerHeader>
                <DrawerHeaderTitle>
                    <DrawerHeaderTitleAction slot>
                        <Button
                            appearance=ButtonAppearance::Subtle
                            on_click=move |_| open_left.set(false)
                        >
                            "x"
                        </Button>
                    </DrawerHeaderTitleAction>
                    "Inline Drawer"
                </DrawerHeaderTitle>
                </DrawerHeader>
                <DrawerBody>
                    <p>"Drawer content"</p>
                </DrawerBody>
            </InlineDrawer>
            <div style="flex: 1">
                <Button on_click=move |_| open_left.set(true)>"Open left"</Button>
                <Button on_click=move |_| open_right.set(true)>"Open right"</Button>
                <Button on_click=move |_| open_buttom.set(true)>"Open buttom"</Button>
            </div>
            <InlineDrawer open=open_right position=DrawerPosition::Right>
                <DrawerHeader>
                <DrawerHeaderTitle>
                    <DrawerHeaderTitleAction slot>
                        <Button
                            appearance=ButtonAppearance::Subtle
                            on_click=move |_| open_right.set(false)
                        >
                            "x"
                        </Button>
                    </DrawerHeaderTitleAction>
                    "Inline Drawer"
                </DrawerHeaderTitle>
                </DrawerHeader>
                <DrawerBody>
                    <p>"Drawer content"</p>
                </DrawerBody>
            </InlineDrawer>
        </div>
        <InlineDrawer open=open_buttom position=DrawerPosition::Bottom>
            <DrawerHeader>
            <DrawerHeaderTitle>
                <DrawerHeaderTitleAction slot>
                    <Button
                        appearance=ButtonAppearance::Subtle
                        on_click=move |_| open_buttom.set(false)
                    >
                        "x"
                    </Button>
                </DrawerHeaderTitleAction>
                "Inline Drawer"
            </DrawerHeaderTitle>
            </DrawerHeader>
            <DrawerBody>
                <p>"Drawer content"</p>
            </DrawerBody>
        </InlineDrawer>
    </div>
```

--------------------------------

### Install cargo-generate

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Install the cargo-generate binary, which may be a dependency for project scaffolding.

```bash
cargo install cargo-generate
```

--------------------------------

### Basic OverlayDrawer Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/drawer/docs/mod.md

Demonstrates how to open and close an OverlayDrawer using a button. The drawer contains a header with a close button and a body with scrollable content.

```rust
let open = RwSignal::new(false);

view! {
    <Button on_click=move |_| open.set(true)>"Open"</Button>
    <OverlayDrawer open> 
        <DrawerHeader>
          <DrawerHeaderTitle>
            <DrawerHeaderTitleAction slot>
                 <Button
                    appearance=ButtonAppearance::Subtle
                    on_click=move |_| open.set(false)
                >
                    "x"
                </Button>
            </DrawerHeaderTitleAction>
            "Default Drawer"
          </DrawerHeaderTitle>
        </DrawerHeader>
        <DrawerBody>
          <p style="line-height: 40px">r#"This being said, the world is moving in the direction opposite to Clarke's predictions. In 2001: A Space Odyssey, in the year of 2001, which has already passed, human beings have built magnificent cities in space, and established permanent colonies on the moon, and huge nuclear-powered spacecraft have sailed to Saturn. However, today, in 2018, the walk on the moon has become a distant memory.And the farthest reach of our manned space flights is just as long as the two-hour mileage of a high-speed train passing through my city. At the same time, information technology is developing at an unimaginable speed. With the entire world covered by the Internet, people have gradually lost their interest in space, as they find themselves increasingly comfortable in the space created by IT. Instead of an exploration of the real space, which is full of real difficulties, people now just prefer to experience virtual space through VR. Just like someone said, "You promised me an ocean of stars, but you actually gave me Facebook.""#</p>
        </DrawerBody>
    </OverlayDrawer>
}
```

--------------------------------

### Menu Placement Examples

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/menu/docs/mod.md

Use the `position` prop to control where the menu appears relative to its trigger. This example showcases all available `MenuPosition` variants.

```rust
use leptos_meta::Style;

let on_select = move |value: &str| leptos::logging::warn!("{}", value);

view! {
    <Style>
        ".demo-menu .thaw-button { width: 100% } .demo-menu .thaw-menu-trigger { display: block }"
    </Style>
    <Grid x_gap=8 y_gap=8 cols=3 class="demo-menu">
        <GridItem>
            <Menu on_select position=MenuPosition::TopStart>
                <MenuTrigger slot>
                    <Button>"Top Start"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::Top>
                <MenuTrigger slot>
                    <Button>"Top"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::TopEnd>
                <MenuTrigger slot>
                    <Button>"Top End"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::LeftStart>
                <MenuTrigger slot>
                    <Button>"Left Start"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem offset=1>
            <Menu on_select position=MenuPosition::RightStart>
                <MenuTrigger slot>
                    <Button>"Right Start"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::Left>
                <MenuTrigger slot>
                    <Button>"Left"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem offset=1>
            <Menu on_select position=MenuPosition::Right>
                <MenuTrigger slot>
                    <Button>"Right"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::LeftEnd>
                <MenuTrigger slot>
                    <Button>"Left End"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem offset=1>
            <Menu on_select position=MenuPosition::RightEnd>
                <MenuTrigger slot>
                    <Button>"Right End"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::BottomStart>
                <MenuTrigger slot>
                    <Button>"Bottom Start"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::Bottom>
                <MenuTrigger slot>
                    <Button>"Bottom"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
        <GridItem>
            <Menu on_select position=MenuPosition::BottomEnd>
                <MenuTrigger slot>
                    <Button>"Bottom End"</Button>
                </MenuTrigger>
                <MenuItem value="content">"Content"</MenuItem>
            </Menu>
        </GridItem>
    </Grid>
}
```

--------------------------------

### Install Rust Nightly Toolchain

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Ensure you have the Rust nightly toolchain installed, which is often required by Leptos.

```bash
rustup toolchain install nightly --allow-downgrade
```

--------------------------------

### Run Leptos Project in Watch Mode

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Start the development server with live reloading for Leptos applications.

```bash
cargo leptos watch
```

--------------------------------

### Basic Thaw App Setup with ConfigProvider

Source: https://github.com/thaw-ui/thaw/blob/main/demo_markdown/docs/_guide/installation.md

A minimal Leptos application demonstrating the required ConfigProvider and a basic Thaw Button component. The ConfigProvider must wrap all Thaw components.

```rust
use leptos::prelude::*;
use thaw::*;

fn main() {
    mount_to_body(App);
}

#[component]
pub fn App() -> impl IntoView {
    view! {
        // The ConfigProvider component is required for Thaw,
        // please place it at the root of the Thaw component.
        <ConfigProvider>
            <Button appearance=ButtonAppearance::Primary>
                "Primary"
            </Button>
        </ConfigProvider>
    }
}
```

--------------------------------

### Basic Popover Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/popover/docs/mod.md

A simple Popover that appears on hover. It can also be configured to trigger on click.

```rust
view! {
    <Space>
        <Popover>
            <PopoverTrigger slot>
                <Button>"Hover"</Button>
            </PopoverTrigger>
            "Content"
        </Popover>
        <Popover trigger_type=PopoverTriggerType::Click>
            <PopoverTrigger slot>
                <Button>"Click"</Button>
            </PopoverTrigger>
            "Content"
        </Popover>
    </Space>
}
```

--------------------------------

### Basic Tag Picker Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/tag_picker/docs/mod.md

Demonstrates the fundamental setup of the TagPicker component, including managing selected options and rendering available choices.

```rust
let selected_options = RwSignal::new(vec![]);
let options = vec!["Cat", "Dog"];

view! {
    <TagPicker selected_options>
        <TagPickerControl slot>
            <TagPickerGroup>
                {move || {
                    selected_options.get().into_iter().map(|option| view!{
                        <Tag value=option.clone()>
                            {option}
                        </Tag>
                    }).collect_view()
                }}
            </TagPickerGroup>
            <TagPickerInput />
        </TagPickerControl>
        {
            move || {
                selected_options.with(|selected_options| {
                    options.iter().filter_map(|option| {
                        if selected_options.iter().any(|o| o == option) {
                            return None
                        } else {
                            Some(view! {
                                <TagPickerOption value=option.clone() text=option.clone() />
                            })
                        }
                    }).collect_view()
                })
            }
        }
    </TagPicker>
```

--------------------------------

### Imperative Handle Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/button/docs/mod.md

Demonstrates how to use the component reference to imperatively control the Button component.

```APIDOC
## Imperative handle

```rust demo
let count = RwSignal::new(0);
let on_click = move |_| *count.write() += 1;

let button_ref = ComponentRef::<ButtonRef>::new();

let click = move |_| {
    button_ref.get_untracked().unwrap().click()
};

let focus = move |_| {
    button_ref.get_untracked().unwrap().focus()
};

view! {
    <Space>
        <Button on_click=click>"Click"</Button>
        <Button on_click=focus>"Focus"</Button>
        <Button comp_ref=button_ref on_click>{count}</Button>
    </Space>
}
```
```

--------------------------------

### Tooltip Default Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/tooltip/docs/mod.md

A standard implementation of the Tooltip component with a Button as its child.

```rust
view! {
    <Tooltip content="Example tooltip">
        <Button>
            "Example"
        </Button>
    </Tooltip>
}
```

--------------------------------

### Dialog Component Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/dialog/docs/mod.md

Example of how to use the Dialog component with its various sub-components.

```APIDOC
## Dialog Component

### Description

Displays a modal dialog to the user, containing a title, content, and actions.

### Props

#### `open` (Model<bool>)

Controls the open state of the dialog. This is a two-way binding.

#### `mask_closeable` (Signal<bool>)

Default: `true`

Determines if the dialog should close when the mask (background overlay) is clicked.

#### `close_on_esc` (bool)

Default: `true`

Determines if the dialog should close when the Escape key is pressed.

### DialogSurface Component

### Description

Represents the surface of the dialog, typically containing the body.

### Props

No specific props beyond standard component props.

### DialogBody Component

### Description

Contains the main content of the dialog, such as title, text, and actions.

### Props

No specific props beyond standard component props.

### DialogTitle Component

### Description

Displays the title of the dialog.

### Props

No specific props beyond standard component props.

### DialogContent Component

### Description

Displays the main content area of the dialog.

### Props

No specific props beyond standard component props.

### DialogActions Component

### Description

Contains action buttons for the dialog, such as confirm or cancel.

### Props

No specific props beyond standard component props.

### Example Usage

```rust
let open = RwSignal::new(false);

view! {
    <Button on_click=move |_| open.set(true)>"Open Dialog"</Button>
    <Dialog open>
        <DialogSurface>
            <DialogBody>
                <DialogTitle>"Dialog title"</DialogTitle>
                <DialogContent>
                    "Dialog body"
                </DialogContent>
                <DialogActions>
                    <Button appearance=ButtonAppearance::Primary>"Do Something"</Button>
                </DialogActions>
            </DialogBody>
        </DialogSurface>
    </Dialog>
}
```
```

--------------------------------

### Basic TagPicker Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/tag_picker/docs/mod.md

Demonstrates the basic setup of the TagPicker component with predefined land and water options. Selected options are displayed as tags, and available options are filtered out.

```rust
use leptos::either::Either;
let selected_options = RwSignal::new(vec![]);
let land = vec!["Cat", "Dog", "Ferret", "Hamster"];
let water = vec!["Fish", "Jellyfish", "Octopus", "Seal"];

view! {
    <TagPicker selected_options>
        <TagPickerControl slot>
            <TagPickerGroup>
                {move || {
                    selected_options.get().into_iter().map(|option| view!{
                        <Tag value=option.clone()> 
                            {option}
                        </Tag>
                    }).collect_view()
                }}
            </TagPickerGroup>
            <TagPickerInput />
        </TagPickerControl>
        {move || {
            selected_options.with(|selected_options| {
                let land_view = land.iter().filter_map(|option| {
                    if selected_options.iter().any(|o| o == option) {
                        return None
                    } else {
                        Some(view! {
                            <TagPickerOption value=option.clone() text=option.clone() />
                        })
                    }
                }).collect_view();
                if land_view.is_empty() {
                    Either::Left(())
                } else {
                    Either::Right(view! {
                        <TagPickerOptionGroup label="Land">
                            {land_view}
                        </TagPickerOptionGroup>
                    })
                }
            })
        }}
        {move || {
            selected_options.with(|selected_options| {
                let water_view = water.iter().filter_map(|option| {
                    if selected_options.iter().any(|o| o == option) {
                        return None
                    } else {
                        Some(view! {
                            <TagPickerOption value=option.clone() text=option.clone() />
                        })
                    }
                }).collect_view();
                if water_view.is_empty() {
                    Either::Left(())
                } else {
                    Either::Right(view! {
                        <TagPickerOptionGroup label="Sea">
                            {water_view}
                        </TagPickerOptionGroup>
                    })
                }
            })
        }}
    </TagPicker>
}
```

--------------------------------

### Button with Icon

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/button/docs/mod.md

Shows how to add icons to buttons and dynamically change them on click. Includes examples for static icons and clearing icons.

```rust
let icon = RwSignal::new(Some(icondata::AiCloseOutlined));

let on_click = move |_| {
    icon.update(|icon| {
        *icon = match icon {
            Some(data) => {
                if *data == icondata::AiCloseOutlined {
                    icondata::AiCheckOutlined
                } else {
                    icondata::AiCloseOutlined
                }
            }
            None => icondata::AiCloseOutlined
        }.into();
    });
};

view! {
    <Space vertical=true>
        <Space>
            <Button icon on_click>
                "Change icon"
            </Button>
            <Button icon on_click=move |_| icon.set(None)>
                "Clear icon"
            </Button>
        </Space>
        <Space>
            <Button icon=icondata::AiCloseOutlined>
                "Error Color Icon"
            </Button>
            <Button icon=icondata::AiCloseOutlined>
            </Button>
        </Space>
    </Space>
}
```

--------------------------------

### Basic Accordion Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/accordion/docs/mod.md

Demonstrates the default behavior of the Accordion component with two items. Each item can be expanded or collapsed independently, but only one can be open at a time.

```rust
view! {
    <Accordion>
        <AccordionItem value="leptos">
            <AccordionHeader slot>
                "Leptos"
            </AccordionHeader>
            "Build fast web applications with Rust."
        </AccordionItem>
        <AccordionItem  value="thaw">
            <AccordionHeader slot>
                "Thaw"
            </AccordionHeader>
            "An easy to use leptos component library"
        </AccordionItem>
    </Accordion>
}
```

--------------------------------

### Default MessageBar Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/message_bar/docs/mod.md

A basic MessageBar with a title, body text, and action buttons. Includes a close button within a MessageBarContainerAction slot.

```rust
view! {
    <MessageBar>
        <MessageBarBody>
            <MessageBarTitle>"Descriptive title"</MessageBarTitle>
            "Message providing information to the user with actionable insights."
        </MessageBarBody>
        <MessageBarActions>
            <Button>"Action"</Button>
            <Button>"Action"</Button>
            <MessageBarContainerAction slot>
                <Button
                    appearance=ButtonAppearance::Transparent
                    icon=icondata::AiCloseOutlined
                />
            </MessageBarContainerAction>
        </MessageBarActions>
    </MessageBar>
}
```

--------------------------------

### Popover Placement Options

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/popover/docs/mod.md

Illustrates various positioning options for the Popover, including top, left, right, and bottom alignments, with different start/end configurations. Some examples are set to trigger on click.

```rust
use leptos_meta::Style;

view! {
    <Style>
        ".demo-popover .thaw-button { width: 100% } .demo-popover .thaw-popover-trigger { display: block }"
    </Style>
    <Grid x_gap=8 y_gap=8 cols=3 class="demo-popover">
        <GridItem>
            <Popover position=PopoverPosition::TopStart>
                <PopoverTrigger slot>
                    <Button>"Top Start"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::Top>
                <PopoverTrigger slot>
                    <Button>"Top"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::TopEnd>
                <PopoverTrigger slot>
                    <Button>"Top End"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::LeftStart trigger_type=PopoverTriggerType::Click>
                <PopoverTrigger slot>
                    <Button>"Left Start"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem offset=1>
            <Popover position=PopoverPosition::RightStart>
                <PopoverTrigger slot>
                    <Button>"Right Start"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::Left trigger_type=PopoverTriggerType::Click>
                <PopoverTrigger slot>
                    <Button>"Left"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem offset=1>
            <Popover position=PopoverPosition::Right>
                <PopoverTrigger slot>
                    <Button>"Right"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::LeftEnd>
                <PopoverTrigger slot>
                    <Button>"Left End"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem offset=1>
            <Popover position=PopoverPosition::RightEnd>
                <PopoverTrigger slot>
                    <Button>"Right End"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::BottomStart>
                <PopoverTrigger slot>
                    <Button>"Bottom Start"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::Bottom>
                <PopoverTrigger slot>
                    <Button>"Bottom"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
        <GridItem>
            <Popover position=PopoverPosition::BottomEnd>
                <PopoverTrigger slot>
                    <Button>"Bottom End"</Button>
                </PopoverTrigger>
                "Content"
            </Popover>
        </GridItem>
    </Grid>
}
```

--------------------------------

### NavDrawer with Categories and Items

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/nav/docs/mod.md

Example of using NavDrawer to create a navigation menu with nested categories and items. It demonstrates how to manage the 'multiple' prop for category expansion.

```rust
let is_multiple = RwSignal::new(true);
let is_multiple_label = Memo::new(move |_| {
    if is_multiple.get() {
        "Multiple".to_string()
    } else {
        "Single".to_string()
    }
});

view! {
    <Flex>
        <NavDrawer multiple=is_multiple>
            <NavCategory value="area">
                <NavCategoryItem slot icon=icondata::AiAreaChartOutlined>
                    "Area Chart"
                </NavCategoryItem>
                <NavSubItem value="target">
                    "Target"
                </NavSubItem>
                <NavSubItem value="above">
                    "Above"
                </NavSubItem>
                <NavSubItem value="below">
                    "Below"
                </NavSubItem>
            </NavCategory>
            <NavCategory value="pie">
                <NavCategoryItem slot icon=icondata::AiPieChartOutlined>
                    "Pie Chart"
                </NavCategoryItem>
                <NavSubItem value="pie-target">
                    "Pie Target"
                </NavSubItem>
                <NavSubItem value="pin-above">
                    "Pin Above"
                </NavSubItem>
                <NavSubItem value="pin-below">
                    "Pin Below"
                </NavSubItem>
            </NavCategory>
            <NavItem
                icon=icondata::AiGithubOutlined
                value="github"
                href="https://github.com/thaw-ui/thaw"
                attr:target="_blank"
            >
                "Github"
            </NavItem>
            <NavItem icon=icondata::AiChromeOutlined value="chrome">
                "Chrome"
            </NavItem>
        </NavDrawer>
        <div>
            <Switch checked=is_multiple label=is_multiple_label/>
        </div>
    </Flex>
}
```

--------------------------------

### Grid Item Offset

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/grid/docs/mod.md

Demonstrates how to offset a grid item from the left edge using the 'offset' prop. This example shows an item starting two columns in.

```rust
use leptos_meta::Style;

view! {
    <Grid cols=4>
        <GridItem offset=2>"123"</GridItem>
        <GridItem>"456"</GridItem>
    </Grid>
    <Style>
        ".thaw-grid-item {
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
        .thaw-grid-item:nth-child(odd) {
            background-color: #0078ff88;
        }
        .thaw-grid-item:nth-child(even) {
            background-color: #0078ffaa;
        }"
    </Style>
}
```

--------------------------------

### Basic Theme Switching with ConfigProvider

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/config_provider/docs/mod.md

Demonstrates how to use ConfigProvider to manage and switch between light and dark themes for child components. Requires `RwSignal` for reactive theme updates.

```rust
let theme = RwSignal::new(Theme::light());

view! {
    <ConfigProvider theme>
        <Card>
            <Space>
                <Button on_click=move |_| theme.set(Theme::light())>"Light"</Button>
                <Button on_click=move |_| theme.set(Theme::dark())>"Dark"</Button>
            </Space>
        </Card>
    </ConfigProvider>
}
```

--------------------------------

### Install Dart Sass

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Install Dart Sass globally via npm, which is used for CSS preprocessing.

```bash
npm install -g sass
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/thaw-ui/thaw/blob/main/examples/ssr_axum/README.md

Change the current directory to the newly created Leptos Axum project.

```bash
cd ssr_axum
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Change the current directory to your newly created Leptos project.

```bash
cd island
```

--------------------------------

### Basic Switch Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/switch/docs/mod.md

Demonstrates how to create and render a basic Switch component. Requires `RwSignal` for state management.

```rust
let checked = RwSignal::new(false);

view! {
    <Switch checked />
}
```

--------------------------------

### Basic Image Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/image/docs/mod.md

Demonstrates how to display an image with a specified source and width, and a placeholder image with dimensions.

```rust
view! {
    <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
    <Image width="200px" height="200px"/>
}
```

--------------------------------

### Create New Leptos Axum Project

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Generate a new Leptos project using the Axum starter template from GitHub.

```bash
cargo leptos new --git https://github.com/leptos-rs/start-axum-0.7
```

--------------------------------

### Basic Textarea Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/textarea/docs/mod.md

Demonstrates the basic usage of the Textarea component with a placeholder. Requires a `RwSignal` for value management.

```rust
let value = RwSignal::new(String::from("o"));

view! {
    <Textarea value placeholder="Textarea"/>
}
```

--------------------------------

### Add WASM Target for Rust

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Add the WebAssembly target to your Rust installation to enable compilation to WASM.

```bash
rustup target add wasm32-unknown-unknown
```

--------------------------------

### Basic Date Picker Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/date_picker/docs/mod.md

Demonstrates how to initialize and use the Date Picker with a required signal for the current date and an optional signal for a date.

```rust
use chrono::prelude::*;
let value = RwSignal::new(Local::now().date_naive());
let option_value = RwSignal::new(Some(Local::now().date_naive()));

view! {
    <Space vertical=true>
        <DatePicker value/>
        <DatePicker value=option_value/>
    </Space>
}
```

--------------------------------

### Dismissible Tag with Callback

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/tag/docs/mod.md

Example of a dismissible Tag that triggers a toast notification when dismissed. Requires ToasterInjection context.

```rust
let toaster = ToasterInjection::expect_context();

let on_dismiss = move |_| {
    toaster.dispatch_toast(move || view! {
        <Toast>
            <ToastTitle>"Tag"</ToastTitle>
            <ToastBody>
                "Tag dismiss"
            </ToastBody>
        </Toast>
     }, Default::default());
};

view! {
    <Tag dismissible=true on_dismiss=on_dismiss>"Default"</Tag>
}
```

--------------------------------

### Collapsible Accordion Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/accordion/docs/mod.md

Configures the Accordion to allow all panels to be collapsed simultaneously. This is useful when no panel needs to be open by default.

```rust
view! {
    <Accordion collapsible=true>
        <AccordionItem value="leptos">
            <AccordionHeader slot>
                "Leptos"
            </AccordionHeader>
            "Build fast web applications with Rust."
        </AccordionItem>
        <AccordionItem  value="thaw">
            <AccordionHeader slot>
                "Thaw"
            </AccordionHeader>
            "An easy to use leptos component library"
        </AccordionItem>
    </Accordion>
}
```

--------------------------------

### Basic Select Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/select/docs/mod.md

Demonstrates the basic rendering of a Select component with options.

```rust
view! {
    <Select>
        <option>"Red"</option>
        <option>"Green"</option>
        <option>"Blue"</option>
    </Select>
}
```

--------------------------------

### Persona Text Alignment

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/persona/docs/mod.md

Shows how to control the text alignment within the Persona component, supporting 'start' (default) and 'center'.

```rust
view! {
    <Flex justify=FlexJustify::SpaceAround>
        <Persona
            name="Thaw UI"
            text_alignment=PersonaTextAlignment::Start
        >
            <PersonaSecondaryText slot>
                "UI"
            </PersonaSecondaryText>
            <PersonaTertiaryText slot>
                "Card"
            </PersonaTertiaryText>
            <PersonaQuaternaryText slot>
                "Header"
            </PersonaQuaternaryText>
        </Persona>
        <Persona
            name="Thaw UI"
            text_alignment=PersonaTextAlignment::Center
        >
            <PersonaSecondaryText slot>
                "UI"
            </PersonaSecondaryText>
            <PersonaTertiaryText slot>
                "Card"
            </PersonaTertiaryText>
            <PersonaQuaternaryText slot>
                "Header"
            </PersonaQuaternaryText>
        </Persona>
    </Flex>
}
```

--------------------------------

### Basic Dialog Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/dialog/docs/mod.md

Demonstrates how to open and display a basic dialog. The `open` prop controls the visibility, and it can be toggled using a button.

```rust
let open = RwSignal::new(false);

view! {
    <Button on_click=move |_| open.set(true)>"Open Dialog"</Button>
    <Dialog open> 
        <DialogSurface>
            <DialogBody>
                <DialogTitle>"Dialog title"</DialogTitle>
                <DialogContent>
                    "Dialog body"
                </DialogContent>
                <DialogActions>
                    <Button appearance=ButtonAppearance::Primary>"Do Something"</Button>
                </DialogActions>
            </DialogBody>
        </DialogSurface>
    </Dialog>
}
```

--------------------------------

### Dismiss Toast

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/toast/docs/mod.md

Dismiss a specific toast using its unique ID. The example toggles between showing and hiding a toast based on its mounted status.

```rust
let toaster = ToasterInjection::expect_context();
let id = uuid::Uuid::new_v4();


let mounted = RwSignal::new(false);

let on_status_change = move |status| {
    mounted.set(status == ToastStatus::Mounted);
};

let dispatch = move |_| {
    toaster.dispatch_toast(move || view! {
        <Toast>
            <ToastTitle>"Email sent"</ToastTitle>
            <ToastBody>
                "This is a toast body"
                <ToastBodySubtitle slot>
                    "Subtitle"
                </ToastBodySubtitle>
            </ToastBody>
        </Toast>
     },ToastOptions::default().with_id(id).with_on_status_change(on_status_change))
};

let dismiss = move |_| {
    toaster.dismiss_toast(id);
};

view! {
    {move || {if !mounted.get() {
        view!{<Button on_click=dispatch>"Show toast"</Button>}
    } else {
        view!{<Button on_click=dismiss>"Hide toast"</Button>}
    }
}}}

```

--------------------------------

### Table with Resizable Columns

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/table/docs/mod.md

Shows how to enable column resizing and set minimum/maximum widths for table headers.

```rust
view! {
    <Table>
        <TableHeader>
            <TableRow>
                <TableHeaderCell resizable=true min_width=100.0 max_width=300.0>"Tag"</TableHeaderCell>
                <TableHeaderCell resizable=true>"Count"</TableHeaderCell>
                <TableHeaderCell>"Date"</TableHeaderCell>
            </TableRow>
        </TableHeader>
        <TableBody>
            <TableRow>
                <TableCell>
                    <TableCellLayout truncate=true>
                        "Renders content with overflow: hidden and text-overflow: ellipsis"
                    </TableCellLayout>
                </TableCell>
                <TableCell>
                    <TableCellLayout truncate=true>
                        "Renders content with overflow: hidden and text-overflow: ellipsis"
                    </TableCellLayout>
                </TableCell>
                <TableCell>
                    <TableCellLayout>
                        "2023-10-08"
                    </TableCellLayout>
                </TableCell>
            </TableRow>
            <TableRow>
                <TableCell>"span"</TableCell>
                <TableCell>"2"</TableCell>
                <TableCell>"2023-10-08"</TableCell>
            </TableRow>
        </TableBody>
    </Table>
}
```

--------------------------------

### Slider with Step Functionality

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/slider/docs/mod.md

Shows how to configure the Slider to increment or decrement its value in specified steps. Includes examples with and without visible stops.

```rust
let value = RwSignal::new(0.0);

view! {
    <Flex vertical=true inline=true>
        <Slider step=25.0 value />
        <Slider step=25.0 value show_stops=false />
    </Flex>
}
```

--------------------------------

### Multiple Expanded Accordion Example

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/accordion/docs/mod.md

Enables the Accordion to display multiple panels open at the same time. Note that on initial render, all panels will be collapsed.

```rust
view! {
    <Accordion multiple=true>
        <AccordionItem value="leptos">
            <AccordionHeader slot>
                "Leptos"
            </AccordionHeader>
            "Build fast web applications with Rust."
        </AccordionItem>
        <AccordionItem  value="thaw">
            <AccordionHeader slot>
                "Thaw"
            </AccordionHeader>
            "An easy to use leptos component library"
        </AccordionItem>
    </Accordion>
}
```

--------------------------------

### Disabled Slider States

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/slider/docs/mod.md

Provides examples of a disabled Slider, which prevents user interaction. Includes a basic disabled slider and one with custom labels.

```rust
let value = RwSignal::new(0.0);

view! {
    <Flex vertical=true inline=true>
        <Slider value disabled=true />
        <Slider value max=10.0 step=5.0 disabled=true>
            <SliderLabel value=0.0>
                "0"
            </SliderLabel>
            <SliderLabel value=5.0>
                "5"
            </SliderLabel>
            <SliderLabel value=10.0>
                "10"
            </SliderLabel>
        </Slider>
    </Flex>
}
```

--------------------------------

### Build Leptos Project for Release

Source: https://github.com/thaw-ui/thaw/blob/main/examples/island/README.md

Compile your Leptos project for production deployment. This generates server binaries and static site assets.

```bash
cargo leptos build --release
```

--------------------------------

### Basic Grid Layout

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/grid/docs/mod.md

Demonstrates a basic grid with default and two-column layouts. Ensure CSS is applied for item styling.

```rust
use leptos_meta::Style;

view! {
    <Space vertical=true>
        <Grid>
            <GridItem>"123"</GridItem>
            <GridItem>"456"</GridItem>
            <GridItem>"789"</GridItem>
        </Grid>

        <Grid cols=2>
            <GridItem>"123"</GridItem>
            <GridItem>"456"</GridItem>
            <GridItem>"789"</GridItem>
        </Grid>
    </Space>
    <Style>
        ".thaw-grid-item {
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
        .thaw-grid-item:nth-child(odd) {
            background-color: #0078ff88;
        }
        .thaw-grid-item:nth-child(even) {
            background-color: #0078ffaa;
        }"
    </Style>
}
```

--------------------------------

### Basic and Password Input Fields

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/input/docs/mod.md

Demonstrates creating a basic text input and a password input field. The password input uses `InputType::Password` and includes a placeholder.

```rust
let value = RwSignal::new(String::from("o"));

view! {
    <Space vertical=true>
        <Input value/>
        <Input value input_type=InputType::Password placeholder="Password"/>
    </Space>
}
```

--------------------------------

### Space Component Alignment

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/space/docs/mod.md

Shows how to align child elements within the Space component vertically when `vertical=true`. Supports `Start`, `Center`, and `End` alignments.

```rust
view! {
    <Space vertical=true>
        <Space align=SpaceAlign::Start>
            <Button attr:style="height: 60px">"Start"</Button>
            <Button attr:style="height: 40px">"Start"</Button>
            <Button>"Start"</Button>
        </Space>
        <Space align=SpaceAlign::Center>
            <Button attr:style="height: 60px">"Center"</Button>
            <Button attr:style="height: 40px">"Center"</Button>
            <Button>"Center"</Button>
        </Space>
        <Space align=SpaceAlign::End>
            <Button attr:style="height: 60px">"End"</Button>
            <Button attr:style="height: 40px">"End"</Button>
            <Button>"End"</Button>
        </Space>
    </Space>
}
```

--------------------------------

### Icon Component Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/icon/docs/mod.md

Demonstrates basic usage of the Icon component with different icons.

```APIDOC
## Icon Component

### Description
Displays an icon. This component is used to render various icons from the `icondata` crate.

### Props

#### `class`
- **Type**: `MaybeProp<String>`
- **Default**: `Default::default()`
- **Description**: HTML class attribute.

#### `style`
- **Type**: `Option<Signal<String>>`
- **Default**: `Default::default()`
- **Description**: HTML style attribute.

#### `icon`
- **Type**: `icondata_core::Icon`
- **Description**: The icon to show. Accepts an icon definition from `icondata`.

#### `width`
- **Type**: `MaybeProp<String>`
- **Default**: `1em`
- **Description**: The width of the icon.

#### `height`
- **Type**: `MaybeProp<String>`
- **Default**: `1em`
- **Description**: The height of the icon.

#### `on_click`
- **Type**: `Option<BoxOneCallback<ev::MouseEvent>>`
- **Default**: `None`
- **Description**: Callback when clicking on the icon.

### Example
```rust
view! {
    <Space>
        <Icon icon=icondata::AiCloseOutlined/>
        <Icon icon=icondata::AiCheckOutlined/>
    </Space>
}
```
```

--------------------------------

### Tooltip Component Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/tooltip/docs/mod.md

Basic usage of the Tooltip component, demonstrating how to provide content and a child element. It also shows an example of an invalid usage with multiple children.

```APIDOC
## Tooltip Component Usage

### Description
Demonstrates the correct and incorrect ways to use the Tooltip component. A Tooltip can only contain a single child element.

### Code Examples

```rust
// Correct usage
view!{
    <Tooltip content="Example tooltip">
        <button>"Click"</button>
    </Tooltip>
    <Tooltip content="Example tooltip">
        <Button>"Click"</Button>
    </Tooltip>
}

// Incorrect usage (multiple children)
view!{
    <Tooltip content="Example tooltip">
        <button>"Click"</button>
        <button>"Click"</button>
    </Tooltip>
}
```
```

--------------------------------

### RangeSlider with Custom Slider Labels

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/slider/docs/range-slider.md

Illustrates how to use `SliderLabel` components to mark specific values on the RangeSlider. This example sets custom labels for 0, 5, and 10.

```rust
let value = RwSignal::new((0.0, 1.0));

view! {
    <RangeSlider value max=10.0 step=5.0 style="width: 400px" >
        <SliderLabel value=0.0>
            "0"
        </SliderLabel>
        <SliderLabel value=5.0>
            "5"
        </SliderLabel>
        <SliderLabel value=10.0>
            "10"
        </SliderLabel>
    </RangeSlider>
}
```

--------------------------------

### Basic Pagination Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/pagination/docs/mod.md

Demonstrates how to use the Pagination component with a reactive page signal and a total page count.

```rust
let page = RwSignal::new(1);

view! {
    <Space vertical=true>
        <div>"Page: " {move || page.get()}</div>
        <Pagination page page_count=10 />
    </Space>
}
```

--------------------------------

### Simple Anchor Navigation

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/anchor/docs/mod.md

A straightforward example of the Anchor component for creating a simple list of navigation links. Suitable for pages with a flat structure or when only top-level links are needed.

```rust
view! {
    <Anchor>
        <AnchorLink title="Anchor" href="#anchor"/>
        <AnchorLink title="Anchor Props" href="#anchor-props"/>
        <AnchorLink title="AnchorLink Props" href="#anchorlink-props"/>
    </Anchor>
}
```

--------------------------------

### Basic Image Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/image/docs/mod.md

Demonstrates how to use the Image component with a source URL and width.

```APIDOC
## Image Component

### Description
Displays an image with specified source and dimensions.

### Usage
```rust
view! {
    <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
    <Image width="200px" height="200px"/>
}
```
```

--------------------------------

### Basic InfoLabel Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/info_label/docs/mod.md

Demonstrates the basic structure of an InfoLabel with provided information and label text.

```rust
view! {
    <InfoLabel>
        <InfoLabelInfo slot>
            "This is example information for an InfoLabel. "
        </InfoLabelInfo>
        "Example label"
    </InfoLabel>
}
```

--------------------------------

### Basic AutoComplete Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/auto_complete/docs/mod.md

Demonstrates the basic implementation of the AutoComplete component with a custom option list.

```APIDOC
## Basic AutoComplete Usage

### Description
This example shows how to use the `AutoComplete` component with a dynamic list of options. The options are generated based on user input, specifically looking for an email pattern.

### Code
```rust
let value = RwSignal::new(String::new());
let options = Memo::<Vec<_>>::new(move |_| {
    let prefix = value
        .get()
        .split_once('@')
        .map_or(value.get(), |v| v.0.to_string());
    vec!["@gmail.com", "@163.com"]
        .into_iter()
        .map(|suffix| (format!("{prefix}{suffix}"), format!("{prefix}{suffix}")))
        .collect()
});

view! {
    <AutoComplete value placeholder="Email">
        <For
            each=move || options.get()
            key=|option| option.0.clone()
            let:option
        >
            <AutoCompleteOption value=option.0>
                {option.1}
            </AutoCompleteOption>
        </For>
    </AutoComplete>
}
```
```

--------------------------------

### Flex Justification Options

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/flex/docs/mod.md

Shows different justification methods (`SpaceBetween`, `SpaceAround`, `SpaceEvenly`, `Start`, `Center`, `End`) for flex items within a vertical Flex container.

```rust
view! {
    <Flex vertical=true>
        <Flex justify=FlexJustify::SpaceBetween>
            <Button>"SpaceBetween"</Button>
            <Button>"SpaceBetween"</Button>
            <Button>"SpaceBetween"</Button>
        </Flex>
        <Flex justify=FlexJustify::SpaceAround>
            <Button>"SpaceAround"</Button>
            <Button>"SpaceAround"</Button>
            <Button>"SpaceAround"</Button>
        </Flex>
        <Flex justify=FlexJustify::SpaceEvenly>
            <Button>"SpaceEvenly"</Button>
            <Button>"SpaceEvenly"</Button>
            <Button>"SpaceEvenly"</Button>
        </Flex>
        <Flex justify=FlexJustify::Start>
            <Button>"Start"</Button>
            <Button>"Start"</Button>
            <Button>"Start"</Button>
        </Flex>
        <Flex justify=FlexJustify::Center>
            <Button>"Center"</Button>
            <Button>"Center"</Button>
            <Button>"Center"</Button>
        </Flex>
        <Flex justify=FlexJustify::End>
            <Button>"End"</Button>
            <Button>"End"</Button>
            <Button>"End"</Button>
        </Flex>
    </Flex>
}
```

--------------------------------

### Basic Label Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/label/docs/mod.md

Demonstrates the basic usage of the Label component with default styling.

```rust
view! {
    <Label>"This is a label"</Label>
}
```

--------------------------------

### Basic Color Picker Usage

Source: https://github.com/thaw-ui/thaw/blob/main/thaw/src/color_picker/docs/mod.md

Demonstrates the basic integration of the ColorPicker component. It requires a `RwSignal` for its value, initialized with an RGB color.

```rust
use palette::Srgb;

let value = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0)));

view! {
    <ColorPicker value/>
}
```