### Import and Use Installed Button Component

Source: https://context7.com/dioxuslabs/components/llms.txt

Example of importing a component (e.g., Button) after it has been installed using the `dx components add` command.

```rust
// After installation, import from your own module
mod components;

use components::button::Button;

fn App() -> Element {
    rsx! {
        Button { variant: "default", "Click me" }
    }
}
```

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

### Install Dioxus CLI and Components

Source: https://context7.com/dioxuslabs/components/llms.txt

Commands to install the Dioxus CLI and add individual components to your project. Components are installed into `src/components` and theme CSS into `assets`.

```sh
# Install the Dioxus CLI
cargo install dioxus-cli

# Add individual components
dx components add button
dx components add accordion
dx components add dialog
dx components add toast
dx components add virtual-list

# The CLI creates:
#   src/components/button/mod.rs
#   src/components/button/style.css
#   assets/dx-components-theme.css   (on first install)
```

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

### Install Dioxus CLI

Source: https://github.com/dioxuslabs/components/blob/main/README.md

Install the Dioxus CLI to manage Dioxus projects and components.

```bash
cargo install dioxus-cli
```

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

### Install Dioxus Components

Source: https://context7.com/dioxuslabs/components/llms.txt

Add dioxus-primitives to your Cargo.toml or install the Dioxus CLI to add styled components directly to your project.

```toml
# Cargo.toml
[dependencies]
dioxus-primitives = "0.0.1"
dioxus = "0.7.0"
```

```sh
# Or add styled components directly to your project via the Dioxus CLI
cargo install dioxus-cli
dx components add button
dx components add accordion
dx components add dialog
# ... etc.
```

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

### Show AlertDialog Example

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/alert_dialog/docs.md

Demonstrates how to use the AlertDialog primitive to display a modal dialog for user confirmation. It manages the open state using a signal and provides slots for title, description, and action buttons.

```rust
let open = use_signal(|| false);
rsx! {
    button {
        onclick: move |_| open.set(true),
        type: "button",
        "Show Alert Dialog"
    }
    AlertDialogRoot { open: Some(open), on_open_change: move |v| open.set(v),
        AlertDialogContent {
            // You may pass class/style for custom appearance
            AlertDialogTitle { "Title" }
            AlertDialogDescription { "Description" }
            AlertDialogActions {
                AlertDialogCancel { "Cancel" }
                AlertDialogAction { "Confirm" }
            }
        }
    }
}
```

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

### Run CSS Linting

Source: https://github.com/dioxuslabs/components/blob/main/README.md

Check CSS files for style consistency and potential errors within the preview crate. Ensure you are in the preview directory and have installed npm dependencies.

```bash
cd preview
npm install
npx stylelint "src/**/*.css"
```

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

### Basic Badge Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/badge/docs.md

Illustrates the fundamental structure of the Badge component. Use this as a starting point for creating badges.

```rust
Badge {
    {children}
}
```

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

### Item Component Structure Example

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/item/docs.md

Demonstrates the basic structure of an Item component within an ItemGroup, including optional header, media, content, actions, and footer. Shows available variants for Item, ItemMedia, and sizes.

```rust
ItemGroup {
    Item {
        // Available variants: Default, Outline, Muted
        variant: ItemVariant::Outline,

        // Available sizes: Default, Sm
        size: ItemSize::Default,

        ItemHeader {
            "Optional header"
        }

        ItemMedia {
            // Media variants: Default, Icon, Image
            variant: ItemMediaVariant::Image,
            img { src: "/path/to/image.png", alt: "Description" }
        }

        ItemContent {
            ItemTitle { "Item title" }
            ItemDescription { "Detailed description that can span multiple lines." }
        }

        ItemActions {
            button { "Primary action" }
        }

        ItemFooter {
            "Optional footer"
        }
    }

    ItemSeparator {}

    Item {
        // ... next item in the group
    }
}
```

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

### Basic Select Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/select/docs.md

Illustrates the fundamental structure of the Select component, including its trigger, list, groups, and options. This example shows how to define a single selectable option.

```rust
Select::<String> {
    // The currently selected value(s) in the dropdown.
    value: "option1",
    // Callback function triggered when the selected value changes.
    on_value_change: |value: String| {
        // Handle the change in selected value.
    },
    // The select trigger is the button that opens the dropdown.
    SelectTrigger {
        // The (optional) select value displays the currently selected text value.
        SelectValue {}
    }
    // All groups must be wrapped in the select list.
    SelectList {
        // An group within the select dropdown which may contain multiple items.
        SelectGroup {
            // The label for the group
            SelectGroupLabel {
                "Other"
            }
            // Each select option represents an individual option in the dropdown. The type must match the type of the select.
            SelectOption::<String> {
                // The value of the item, which will be passed to the on_value_change callback when selected.
                value: "option1",
                // Select item indicator is only rendered if the item is selected.
                SelectItemIndicator {
                    "✔️"
                }
            }
        }
    }
}
```

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

### Basic Card Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/card/docs.md

Demonstrates the fundamental structure of the Card component, including its header, content, and footer sections. Use this as a starting point for creating cards.

```rust
Card {
    CardHeader {
        CardTitle { "Card Title" }
        CardDescription { "Card description goes here." }
        CardAction {
            Button { "Action" }
        }
    }
    CardContent {
        p { "Main content of the card." }
    }
    CardFooter {
        Button { "Submit" }
    }
}
```

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

### Run Playwright End-to-End Tests

Source: https://github.com/dioxuslabs/components/blob/main/README.md

Execute end-to-end tests using Playwright to verify component behavior in a simulated browser environment. Ensure you are in the playwright directory and have installed npm dependencies.

```bash
cd playwright
npm install
npx playwright test
```

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

### Serve Preview Application (Desktop)

Source: https://github.com/dioxuslabs/components/blob/main/README.md

Build and serve the preview application for desktop using the Dioxus CLI.

```bash
dx serve -p preview --desktop
```

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

### Serve Preview Application (Web)

Source: https://github.com/dioxuslabs/components/blob/main/README.md

Build and serve the preview application for the web using the Dioxus CLI.

```bash
dx serve -p preview --web
```

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

### Run Dioxus Preview Server

Source: https://context7.com/dioxuslabs/components/llms.txt

Commands to run the interactive component gallery for desktop or web preview.

```sh
# Run the interactive component gallery (desktop)
dx serve -p preview --desktop

# Run the interactive component gallery (web)
dx serve -p preview --web
```

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

### Range Slider Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/slider/docs.md

This snippet demonstrates a two-thumb range selector using `RangeSlider`. It allows selection of a start and end value within a range.

```rust
RangeSlider {
    default_value: 20.0..80.0,
    on_value_change: |value: std::ops::Range<f64>| {
        // value.start and value.end give the two endpoints
    },
    SliderTrack {
        SliderRange {}
        SliderThumb { index: 0 }
        SliderThumb { index: 1 }
    }
}
```

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

### Basic Toolbar Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/toolbar/docs.md

Demonstrates the fundamental structure of a Toolbar, including a title, a button, and a separator. Use this as a base for creating custom toolbars.

```rust
Toolbar {
    aria_label: "Toolbar Title",
    ToolbarButton {
        index: 0,
        on_click: |_: ()| {
            // This callback is triggered when the button is clicked.
        },
        {children}
    }
    ToolbarSeparator {
        horizontal: true,
        decorative: false,
    }
}
```

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

### ContentSide and ContentAlign Enums for Overlays

Source: https://context7.com/dioxuslabs/components/llms.txt

Enums used by overlay components like TooltipContent and PopoverContent to declare content position relative to a trigger. Example shows a popover appearing above and aligned to the right edge.

```rust
use dioxus_primitives::{ContentAlign, ContentSide};

// ContentSide variants: Top, Right, Bottom, Left
// ContentAlign variants: Start, Center, End

// Example: popover appearing above, aligned to the right edge of the trigger
use dioxus::prelude::*;
use dioxus_primitives::popover::{PopoverContent, PopoverRoot, PopoverTrigger};

rsx! {
    PopoverRoot { open: true,
        PopoverTrigger { "Help" }
        PopoverContent {
            side: ContentSide::Top,
            align: ContentAlign::End,
            "Keyboard shortcut: Ctrl+H"
        }
    }
}
```

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

### Implementing Portals in Dioxus

Source: https://github.com/dioxuslabs/components/blob/main/complaints.md

Shows how to use `PortalIn` and `PortalOut` to render component content in a different part of the DOM while maintaining its original scope and context.

```rust
#[component]
pub fn App() -> Element {
    let portal = use_portal();

    rsx! {
        div {
            // ... nested stuff
            PortalIn {
                portal,

                // Children of PortalIn becomes children of PortalOut.
                div {
                    h1 { "Alert Dialog!" }
                    p { "alert!!" }
                }
            }
        }

        div {
            // ... other nested stuff
            PortalOut { portal }
        }
    }
}
```

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

### Create a User Profile Popover with PopoverRoot

Source: https://context7.com/dioxuslabs/components/llms.txt

Utilize PopoverRoot, PopoverTrigger, and PopoverContent to display user information in a non-modal floating panel. Configure positioning with `side` and `align`.

```rust
use dioxus::prelude::*;
use dioxus_primitives::popover::{PopoverContent, PopoverRoot, PopoverTrigger};
use dioxus_primitives::ContentSide;

#[component]
fn UserCard() -> Element {
    let mut open = use_signal(|| false);

    rsx! {
        PopoverRoot {
            open: open(),
            on_open_change: move |v| open.set(v),
            is_modal: false,

            PopoverTrigger { "View profile" }

            PopoverContent {
                side: ContentSide::Bottom,
                padding: "1rem",
                h4 { margin: 0, "Jane Doe" }
                p { "jane@example.com" }
                button { onclick: move |_| open.set(false), "Close" }
            }
        }
    }
}
```

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

### Run Unit Tests for Dioxus Primitives

Source: https://github.com/dioxuslabs/components/blob/main/README.md

Execute unit tests for the dioxus-primitives crate to ensure core component logic is sound.

```bash
cargo test -p dioxus-primitives
```

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

### Implement a Delete Confirmation Dialog with DialogRoot

Source: https://context7.com/dioxuslabs/components/llms.txt

Use DialogRoot, DialogContent, DialogTitle, and DialogDescription to create a modal dialog for confirming user actions. The dialog manages its open state and traps focus.

```rust
use dioxus::prelude::*;
use dioxus_primitives::dialog::{DialogContent, DialogDescription, DialogRoot, DialogTitle};

#[component]
fn DeleteConfirmDialog() -> Element {
    let mut open = use_signal(|| false);

    rsx! {
        button { onclick: move |_| open.set(true), "Delete account" }

        DialogRoot {
            open: open(),
            on_open_change: move |v| open.set(v),
            DialogContent {
                DialogTitle { "Delete your account?" }
                DialogDescription {
                    "This action is permanent and cannot be undone."
                }
                div {
                    button {
                        onclick: move |_| open.set(false),
                        "Cancel"
                    }
                    button {
                        onclick: move |_| {
                            // perform deletion...
                            open.set(false);
                        },
                        "Confirm Delete"
                    }
                }
            }
        }
    }
}
```

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

### Basic Color Picker Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/color_picker/docs.md

Demonstrates the basic structure of the ColorPicker component, including its required `color` and `on_color_change` props. The `on_color_change` callback receives the selected color in HSV format.

```rust
ColorPicker {
    // The currently selected color in the color picker.
    color,
    on_color_change: move |c: Hsv<encoding::Srgb, f64>| {
        // This callback is triggered when a color is selected in the popover.
        // The HSV parameter contains the selected color.
    },

    // Optional label on the trigger button.
    label: "Pick",
}
```

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

### Basic VirtualList Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/virtual_list/docs.md

Demonstrates the basic structure of the VirtualList component. Specify the total number of items, the buffer size for rows above and below the viewport, and a render callback function that receives the absolute index of the item to render.

```rust
VirtualList {
    // Total number of items.
    count: 2000usize,
    // Render buffer (approximate row count) above and below viewport.
    buffer: 8usize,
    // Row renderer callback receives the absolute index.
    render_item: move |idx: usize| rsx! {
        article { key: "{idx}", "{rows[idx].title}" }
    },
}
```

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

### Run Dioxus Tests and Linting

Source: https://context7.com/dioxuslabs/components/llms.txt

Commands for running unit tests for dioxus-primitives, CSS linting, and Playwright end-to-end tests.

```sh
# Run unit tests for dioxus-primitives
cargo test -p dioxus-primitives

# Run CSS linting
cd preview && npm install && npx stylelint "src/**/*.css"

# Run Playwright end-to-end tests
cd playwright && npm install && npx playwright test
```

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

### Menubar Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/menubar/docs.md

Illustrates the basic structure of the Menubar component, including MenubarMenu, MenubarTrigger, MenubarContent, and MenubarItem. Use this to understand how to nest menu elements.

```rust
Menubar {
    // The Menubar component wraps the entire menu bar and contains the individual menus in the order of their index.
    MenubarMenu {
        // The MenubarMenu contains the individual menus that can be opened.
        index: 0,
        // The menubar trigger is the element that will display the menu when activated.
        MenubarTrigger {
            // The content of the trigger button
            {children}
        }
        // The menubar content contains all the items that will be displayed in the menu when it is opened.
        MenubarContent {
            // Each menubar item represents an individual items in the menu.
            MenubarItem {
                // The value of the item which will be passed to the on_select callback when the item is selected.
                value: "",
                on_select: |value: String| {
                    // This callback is triggered when the item is selected.
                    // The value parameter contains the value of the selected item.
                },
            }
        }
    }
}
```

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

### Add Tooltip for Contextual Help with Tooltip

Source: https://context7.com/dioxuslabs/components/llms.txt

Implement Tooltip, TooltipTrigger, and TooltipContent to provide contextual help text on hover or focus. The trigger links to the content via `aria-describedby`.

```rust
use dioxus::prelude::*;
use dioxus_primitives::{
    tooltip::{Tooltip, TooltipContent, TooltipTrigger},
    ContentSide,
};

#[component]
fn SaveButton() -> Element {
    rsx! {
        Tooltip {
            TooltipTrigger {
                button { "💾 Save" }
            }
            TooltipContent {
                side: ContentSide::Top,
                "Saves your work (Ctrl+S)"
            }
        }
    }
}
```

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

### SheetClose with Custom Element (`as` prop)

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/sheet/docs.md

Shows how to use the `as` prop on `SheetClose` to render a custom element while retaining the sheet closing functionality. The default behavior renders a button.

```rust
// Default: renders as <button>
SheetClose { "Close" }
```

```rust
// Custom element: attributes include the preset onclick handler
SheetClose {
    as: |attributes| rsx! {
        a { href: "#", ..attributes, "Go back" }
    }
}
```

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

### Basic Dialog Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/dialog/docs.md

Use the Dialog component to wrap all dialog elements. The 'open' prop controls visibility, and DialogTitle/DialogDescription set the content.

```rust
Dialog {
    open: open(),
    DialogTitle {
        "Item information"
    }
    DialogDescription {
        "Here is some additional information about the item."
    }
}
```

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

### Custom Color Picker Popover

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/color_picker/docs.md

Shows how to create a custom popover UI for the ColorPicker by composing `ColorPickerRoot`, `ColorPickerTrigger`, and `ColorPickerPopover`. This allows for complete control over the popover's appearance and content.

```rust
ColorPickerRoot {
    color,
    on_color_change: move |c: Hsv<encoding::Srgb, f64>| {
        // ...
    },

    ColorPickerTrigger {
        label: "Pick",
    }

    ColorPickerPopover {
        div {
            "Custom color picker content"
        }
    }
}
```

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

### Basic Toggle Component Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/toggle/docs.md

Illustrates the basic structure of the Toggle component. Use this to create a toggle button with custom content.

```rust
Toggle {
    // The contents of the toggle button.
    "Bold",
}
```

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

### Configure Toast Notifications with Options

Source: https://context7.com/dioxuslabs/components/llms.txt

Utilize the ToastProvider and use_toast hook for a notification system. Configure toast duration, permanence, and severity using ToastOptions. Toasts auto-dismiss unless marked as permanent.

```rust
use dioxus::prelude::*
use dioxus_primitives::toast::{ToastOptions, ToastProvider, use_toast};
use std::time::Duration;

fn App() -> Element {
    rsx! {
        ToastProvider {
            default_duration: Some(Duration::from_secs(4)),
            max_toasts: 5usize,
            Dashboard {}
        }
    }
}

#[component]
fn Dashboard() -> Element {
    let toast = use_toast();

    rsx! {
        button {
            onclick: move |_| toast.success(
                "File saved".to_string(),
                ToastOptions::new().description("changes.txt was saved"),
            ),
            "Save"
        }
        button {
            onclick: move |_| toast.error(
                "Upload failed".to_string(),
                ToastOptions::new()
                    .description("Check your connection and retry.")
                    .permanent(true),
            ),
            "Upload"
        }
        button {
            onclick: move |_| toast.info(
                "New message".to_string(),
                ToastOptions::new()
                    .description("Alice sent you a message")
                    .duration(Duration::from_secs(10)),
            ),
            "Check messages"
        }
    }
}
```

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

### Verbose Default Signal Prop Setting

Source: https://github.com/dioxuslabs/components/blob/main/complaints.md

Demonstrates the verbose way to set default values for `Signal` and `ReadSignal` props, contrasting it with the desired, more concise syntax.

```rust
#[derive(Props, Clone, PartialEq)]
pub struct SomeProps {

    // This sets bool to be false
    #[props(default)] 
    value: ReadSignal<bool>,

    // This is what I'd like, except it wants a ReadSignal
    #[props(default = true)] 
    value: ReadSignal<bool>,

    // Instead you have to do this:
    #[props(default = ReadSignal::new(Signal::new(true)))]
    value: ReadSignal<bool>,

    // Same for a regular signal:
    #[props(default = Signal::new(true)))]
    value: Signal<bool>,
}
```

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

### Basic Skeleton Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/skeleton/docs.md

Use the Skeleton component to display a placeholder. It accepts global attributes, commonly used with `style` for sizing.

```rust
Skeleton {
    // Accepts all GlobalAttributes, commonly used with style for sizing
    style: "width: 15rem; height: 1rem;",
}
```

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

### Basic Label Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/label/docs.md

Demonstrates how to use the Label component with an associated form element. The `html_for` attribute on the Label must match the `id` attribute of the form element it labels.

```rust
Label {
    html_for: "id", // The ID of the form control this label is associated with
}
button {
    id: "id", // The ID of the labeled element
}
```

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

### Basic Sheet Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/sheet/docs.md

Demonstrates the fundamental structure of a Sheet component, including its header, content, and footer. The `open` prop controls visibility, and `SheetContent` defines the slide-in direction.

```rust
Sheet {
    open: open(),
    SheetContent {
        side: SheetSide::Right,
        SheetHeader {
            SheetTitle {
                "Edit Profile"
            }
            SheetDescription {
                "Make changes to your profile here."
            }
        }
        SheetFooter {
            SheetClose {
                "Close"
            }
        }
    }
}
```

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

### Calendar Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/calendar/docs.md

Illustrates the basic structure and customizable properties of the Calendar component, including date selection and view change callbacks.

```rust
Calendar {
    // The currently selected date in the calendar (if any).
    selected_date,
    on_date_change: |date: Option<CalendarDate>| {
        // This callback is triggered when a date is selected in the calendar.
        // The date parameter contains the selected date.
    },
    // The current view date of the calendar, which determines the month and year displayed.
    view_date,
    on_view_change: |date: CalendarDate| {
        // This callback is triggered when the view date changes.
        // The date parameter contains the new view date.
    },
    // The calendar view will get rendered once for each month in the multi-month view.
    CalendarView {
        // The calendar header should contain the navigation controls and the title for the calendar.
        CalendarHeader {
            // The calendar navigation handles switching between months and years within the calendar view.
            CalendarNavigation {
                // The previous month button allows users to navigate to the previous month.
                PreviousMonthButton {}
                // The title displays the current month and year of the calendar view.
                CalendarTitle {}
                // The next month button allows users to navigate to the next month.
                NextMonthButton {}
            }
        }
        // The calendar grid displays the days of the month in a grid layout.
        CalendarGrid {}
    }
}
```

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

### Basic Collapsible Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/collapsible/docs.md

Illustrates the fundamental structure of the Collapsible component, showing how to nest Trigger and Content elements within the main Collapsible wrapper.

```rust
// The collapsible component must wrap all collapsible items.
Collapsible {
    // The trigger is used to expand or collapse the item.
    CollapsibleTrigger {}
    // The content that is shown when the item is expanded.
    CollapsibleContent {}
}
```

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

### Sidebar Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/sidebar/docs.md

Illustrates the basic structure and available props for the Sidebar component, including its provider, header, content, footer, and rail.

```rust
SidebarProvider {
    Sidebar {
        side: SidebarSide::Left,
        variant: SidebarVariant::Sidebar,
        collapsible: SidebarCollapsible::Offcanvas,

        SidebarHeader {
            SidebarTrigger {}
        }

        SidebarContent {
            SidebarGroup {
                SidebarGroupLabel { "..." }
                SidebarGroupAction { "..." }
                SidebarGroupContent {
                    SidebarMenu {
                        SidebarMenuItem {
                            SidebarMenuButton {
                                is_active: true,
                                tooltip: rsx!("..."),
                                Icon {}
                                span { "..." }
                            }
                            SidebarMenuAction { show_on_hover: true, Icon {} }
                            SidebarMenuBadge { "+..." }
                        }
                        SidebarMenuItem {
                            SidebarMenuSub {
                                SidebarMenuSubItem {
                                    SidebarMenuSubButton { "..." }
                                }
                            }
                        }
                    }
                }
            }
        }

        SidebarFooter {
            SidebarMenu { /* ... */ }
        }
    }

    SidebarRail {}

    SidebarInset { /* ... */ }
}
```

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

### Popover Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/popover/docs.md

Demonstrates the basic structure of the Popover component, including the root, trigger, and content elements. Specifies positioning and alignment options for the content.

```rust
PopoverRoot {
    PopoverTrigger {
        "Show Popover"
    }
    PopoverContent {
        side: ContentSide::Top,
        align: ContentAlign::Center,
        {children}
    }
}
```

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

### Conditional Rendering with `asChild` Prop

Source: https://github.com/dioxuslabs/components/blob/main/complaints.md

Demonstrates a pattern similar to Radix's `asChild` prop for conditionally rendering children or replacing the element with a user-provided one, noting the limitation of not being able to add attributes to the children directly.

```rust
rsx! {

    if as_child {
        p {
            aria_something: "abc",
            {children}
        }
    } else {
        {children} // Can't add `aria_something`
    }
}
```

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

### Implement a Select Component with Options

Source: https://context7.com/dioxuslabs/components/llms.txt

Use the Select component for creating keyboard-navigable and searchable dropdowns. Ensure the generic type `T` implements `Clone`, `PartialEq`, and `ToString`. The `SelectMulti` variant supports multi-selection.

```rust
use dioxus::prelude::*
use dioxus_primitives::select::{
    Select,
    SelectGroup,
    SelectGroupLabel,
    SelectItemIndicator,
    SelectList,
    SelectOption,
    SelectTrigger,
    SelectValue,
};

#[component]
fn CountrySelect() -> Element {
    let mut country = use_signal(|| Option::<String>::None);

    rsx! {
        Select::<String> {
            value: country(),
            on_value_change: move |v: String| country.set(Some(v)),

            SelectTrigger { aria_label: "Country", width: "16rem",
                SelectValue { placeholder: "Pick a country…" }
            }
            SelectList { aria_label: "Countries",
                SelectGroup {
                    SelectGroupLabel { "Europe" }
                    SelectOption::<String> { index: 0usize, value: "de", "Germany"
                        SelectItemIndicator { "✔" }
                    }
                    SelectOption::<String> { index: 1usize, value: "fr", "France"
                        SelectItemIndicator { "✔" }
                    }
                }
                SelectGroup {
                    SelectGroupLabel { "Americas" }
                    SelectOption::<String> { index: 2usize, value: "us", "United States"
                        SelectItemIndicator { "✔" }
                    }
                }
            }
        }

        if let Some(c) = country() {
            p { "Selected: {c}" }
        }
    }
}
```

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

### Pagination Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/pagination/docs.md

Demonstrates the basic structure of the Pagination component, including its content, item, previous, link, ellipsis, and next elements. Use `is_active` on `PaginationLink` to mark the current page. `PaginationPrevious` and `PaginationNext` hide labels on smaller screens.

```rust
Pagination {
    PaginationContent {
        PaginationItem {
            PaginationPrevious { href: "#" }

            PaginationLink { href: "#", is_active: true, "2" }

            PaginationEllipsis {}

            PaginationNext { href: "#" }
        }
    }
}
```

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

### Basic ScrollArea Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/scroll_area/docs.md

Demonstrates the basic structure of the ScrollArea component. Specify the scroll direction and place child elements within the content area.

```rust
ScrollArea {
    scroll_direction: ScrollDirection::Vertical,
    // The content of the scrollable area
    {children}
}
```

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

### Separator Component Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/separator/docs.md

Demonstrates the basic usage of the Separator component, allowing configuration for horizontal or vertical orientation and accessibility.

```rust
Separator {
    // The orientation of the separator line. true for horizontal, false for vertical.
    horizontal: true,
    // The decorative property controls if the separator is decorative and should not be visible to screen readers.
    decorative: false,
}
```

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

### Accordion Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/accordion/docs.md

Illustrates the basic structure of the Accordion component, including the wrapper, items, triggers, and content panels. Each item requires an index for proper placement.

```rust
Accordion {
    AccordionItem {
        index: 0,
        AccordionTrigger {}
        AccordionContent {}
    }
}
```

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

### Basic Slider Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/slider/docs.md

This snippet shows the basic structure of a single-thumb slider. Configure its value, orientation, and provide a callback for value changes.

```rust
Slider {
    // The current value of the slider, which should be updated as the user interacts with the slider.
    value: 0.0,
    // The orientation of the slider, true for horizontal and false for vertical.
    horizontal: true,
    // Callback function triggered when the slider value changes.
    on_value_change: |value: f64| {
        // Handle the change in slider value.
    },
    // The track represents the visual track along which the handle moves.
    SliderTrack {
        // The slider range represents the filled portion of the track
        SliderRange {
            // The content of the range
            {children}
        }
        // The slider thumb represents the draggable handle that the user moves along the track.
        SliderThumb {
            // The content of the thumb button
            {children}
        }
    }
}
```

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

### Extending Props with `#[props(extends = ...)]`

Source: https://github.com/dioxuslabs/components/blob/main/complaints.md

Illustrates how to use the `#[props(extends = ...)]` attribute to inherit and pass through attributes from another component's props.

```rust
pub fn MyComp1(#[props(extends = MyComp2)] comp2_attr: Vec<Attribute>) -> Element {
    rsx! {
        MyComp2 {
            ..comp2_attr
        }
    }
}
```

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

### Displaying a Toast Notification

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/toast/docs.md

This snippet shows how to use the ToastProvider to display an error toast with a title, description, and custom duration. Ensure ToastProvider is set up to consume toast contexts.

```rust
ToastProvider {
    button {
        onclick: |event: MouseEvent| {
            let toast_api = consume_toast();
            toast_api
                .error(
                    "Critical Error".to_string(),
                    ToastOptions::new()
                        .description("Some info you need")
                        .duration(Duration::from_secs(60))
                        .permanent(false),
                );
        },
        "Show Toast"
    }
}
```

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

### Dropdown Menu Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/dropdown_menu/docs.md

Defines the basic structure of a dropdown menu, including the trigger and content sections. Use this as a template for creating dropdown menus.

```rust
DropdownMenu {
    DropdownMenuTrigger {
        {children}
    }
    DropdownMenuContent {
        DropdownMenuItem {
            index: 0,
            value: "",
            on_select: |value: String| {
            },
        }
    }
}
```

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

### Basic Input Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/input/docs.md

Defines the basic structure of the Input component, including global HTML attributes and children. This serves as a foundational element for creating input fields.

```rust
input {
    // Global html attributes
    class: "dx-input",
    // Children
    {children}
}
```

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

### Define a Context Menu

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/context_menu/docs.md

The context menu component must wrap all context menu items. The trigger element displays the menu on right-click, and the content holds the selectable items.

```rust
ContextMenu {
    ContextMenuTrigger {
        {children}
    }
    ContextMenuContent {
        ContextMenuItem {
            index: 0,
            value: "",
            on_select: |value: String| {
            },
        }
    }
}
```

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

### Button Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/button/docs.md

Defines the basic structure of the button component, including global HTML attributes and how to pass children.

```rust
button {
    // Global html attributes
    class: "dx-button",
    "data-style": "outline",
    // Children
    {children}
}
```

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

### Create a Volume Slider

Source: https://context7.com/dioxuslabs/components/llms.txt

The Slider component manages a single f64 value and is controlled by a draggable thumb. Configure min, max, and step for precise control. Arrow keys adjust the value by one step.

```rust
use dioxus::prelude::*;
use dioxus_primitives::slider::{RangeSlider, Slider, SliderRange, SliderThumb, SliderTrack};

#[component]
fn VolumeSlider() -> Element {
    let mut volume = use_signal(|| 50.0_f64);

    rsx! {
        p { "Volume: {volume():.0}%" }
        Slider {
            label: "Volume",
            value: volume(),
            min: 0.0,
            max: 100.0,
            step: 1.0,
            on_value_change: move |v| volume.set(v),
            SliderTrack {
                SliderRange {}
                SliderThumb {}
            }
        }
    }
}
```

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

### Tooltip Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/tooltip/docs.md

Defines the basic structure of the Tooltip component, including the trigger and content elements. Configure the side and alignment of the tooltip content.

```rust
Tooltip {
    TooltipTrigger {
        {children}
    }
    TooltipContent {
        side: ContentSide::Top,
        align: ContentAlign::Center,
        {children}
    }
}
```

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

### Add Button Component

Source: https://github.com/dioxuslabs/components/blob/main/README.md

Add the Button component to your Dioxus project using the Dioxus CLI. This may also prompt to add CSS theme files.

```bash
dx components add button
```

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

### Implement a Price Range Filter

Source: https://context7.com/dioxuslabs/components/llms.txt

Use RangeSlider for managing two values, defining a range with two thumbs. Supports min, max, and step configuration. Shift+Arrow keys move the thumbs by 10x the step value.

```rust
use dioxus::prelude::*;
use dioxus_primitives::slider::{RangeSlider, Slider, SliderRange, SliderThumb, SliderTrack};

#[component]
fn PriceFilter() -> Element {
    let mut price_range = use_signal(|| 20.0_f64..80.0_f64);

    rsx! {
        p { "Price: ${price_range().start:.0} – ${price_range().end:.0}" }
        RangeSlider {
            label: "Price range",
            default_value: 20.0..80.0,
            min: 0.0,
            max: 200.0,
            step: 5.0,
            on_value_change: move |r| price_range.set(r),
            SliderTrack {
                SliderRange {}
                SliderThumb { index: 0 }
                SliderThumb { index: 1 }
            }
        }
    }
}
```

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

### Navbar Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/navbar/docs.md

Illustrates the hierarchical structure of the Navbar component, including NavbarNav, NavbarTrigger, NavbarContent, and NavbarItem. Use this structure to build navigation bars with collapsible menus.

```rust
Navbar {
    // The NavbarNav contains the individual menus that can be opened.
    NavbarNav {
        // The index of the menu, used to determine the order in which menus are displayed.
        index: 0,
        // The menubar trigger is the element that will display the menu when activated.
        NavbarTrigger {
            // The content of the trigger button
            {children}
        }
        // The menubar content contains all the items that will be displayed in the menu when it is opened.
        NavbarContent {
            // Each menubar item represents an individual items in the menu.
            NavbarItem {
                // The value of the item which will be passed to the on_select callback when the item is selected.
                value: "",
                on_select: |value: String| {
                    // This callback is triggered when the item is selected.
                    // The value parameter contains the value of the selected item.
                },
            }
        }
    }
}
```

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

### Implement a Notification Switch

Source: https://context7.com/dioxuslabs/components/llms.txt

Use the Switch component for binary toggles. It includes a hidden checkbox for form submission and is toggled by the Space key. The SwitchThumb visually indicates the state change.

```rust
use dioxus::prelude::*;
use dioxus_primitives::switch::{Switch, SwitchThumb};

#[component]
fn NotificationSwitch() -> Element {
    let mut enabled = use_signal(|| false);

    rsx! {
        div {
            label { r#for: "notif-switch", "Email notifications" }
            Switch {
                id: "notif-switch",
                checked: enabled(),
                on_checked_change: move |v| enabled.set(v),
                aria_label: "Toggle email notifications",
                SwitchThumb {}
            }
        }
    }
}
```

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

### ToggleGroup Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/toggle_group/docs.md

Illustrates the basic structure of the ToggleGroup component, including its orientation and individual ToggleItems. Use this to understand how to nest toggle items within the group.

```rust
ToggleGroup {
    horizontal: true,
    ToggleItem {
        index: 0,
        {children}
    }
}
```

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

### Date Picker Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/date_picker/docs.md

This snippet illustrates the nested structure of the DatePicker component, including its input, popover trigger, content, and calendar elements. It shows how to configure placeholder formatters and the alignment of the popover content.

```rust
DatePicker {
    // The currently selected date in the date picker (if any).
    selected_date,
    on_value_change: move |v: Option<Date>| {
        // This callback is triggered when a date is selected in the
        // calendar or the user entered it from the keyboard.
        // The date parameter contains the selected date.
    },

    // The DatePickerPopover is the root popover component that wraps the input and calendar.
    DatePickerPopover {
        // Allows the user to enter a date using the keyboard.
        // The input field includes a button to display the calendar.
        DatePickerInput {
            // Optional placeholder formatters for the input fields
            on_format_day_placeholder: || "D",
            on_format_month_placeholder: || "M",
            on_format_year_placeholder: || "Y",

            // The DatePickerPopoverTrigger contains the button that triggers the popover
            // to display the Calendar when clicked.
            DatePickerPopoverTrigger {}

            // The DatePickerPopoverContent contains the Calendar that will be displayed when
            // the user clicks on the trigger.
            DatePickerPopoverContent {
                // The alignment of the DatePickerPopoverContent relative to the DatePickerPopoverTrigger.
                // Can be one of Start, Center, or End.
                align: ContentAlign::Center,

                // The DatePickerCalendar component wraps the Calendar with its navigation components
                DatePickerCalendar {
                    // The calendar view will get rendered once for each month in the multi-month view.
                    CalendarView {
                        CalendarHeader {
                            CalendarNavigation {
                                CalendarPreviousMonthButton {}
                                CalendarSelectMonth {}
                                CalendarSelectYear {}
                                CalendarNextMonthButton {}
                            }
                        }
                        CalendarGrid {}
                    }
                }
            }
        }
    }
}
```

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

### Textarea Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/textarea/docs.md

Defines the basic structure of the Textarea component, including global HTML attributes and placeholder for children.

```rust
textarea {
    // Global html attributes
    class: "dx-textarea",
    "data-style": "default",
    // Children
    {children}
}
```

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

### Avatar Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/avatar/docs.md

Defines the basic structure of the Avatar component, including image source, alt text, and fallback content. The on_state_change callback can be used to monitor the avatar's loading status.

```rust
Avatar {
    on_state_change: |state: AvatarState| {
        // This callback is triggered when the avatar's state changes. The state can be used to determine if the image is loading, loaded, or failed to load.
    },
    // The avatar image component is used to display the user's profile picture.
    AvatarImage {
        // The source URL of the image to be displayed.
        src: "",
        // The alt text for the image, used for accessibility.
        alt: "",
    }
    // The avatar fallback component is used to display an icon or text when the image fails to load.
    AvatarFallback {
        // The content to display when the image fails to load.
        // This can be an icon or text representing the user.
        {children}
    }
}
```

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

### VirtualList Component for Large Lists

Source: https://context7.com/dioxuslabs/components/llms.txt

Renders only visible rows of a large list with a buffer. Provides `aria-setsize` and `aria-posinset` for screen readers. Requires `dioxus` and `dioxus_primitives` crates.

```rust
use dioxus::prelude::*;
use dioxus_primitives::virtual_list::VirtualList;

#[component]
fn LogViewer(entries: Vec<String>) -> Element {
    let count = entries.len();

    rsx! {
        div { style: "height: 600px; overflow: hidden;",
            VirtualList {
                count,
                buffer: 10usize,
                // Provide an estimate for smoother initial scrollbar sizing
                estimate_size: |_| 32,
                render_item: move |idx: usize| {
                    let line = entries[idx].clone();
                    rsx! {
                        div {
                            key: "{idx}",
                            style: "padding: 4px 8px; font-family: monospace;",
                            "data-index": idx,
                            "{idx}: {line}"
                        }
                    }
                },
            }
        }
    }
}
```

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

### Basic AspectRatio Usage

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/aspect_ratio/docs.md

Use the AspectRatio component to set a specific ratio for its children. The ratio is defined as width divided by height.

```rust
AspectRatio {
    // The aspect ratio to maintain (width / height)
    ratio: 4. / 3.,
    // The children of the AspectRatio component will be rendered within it.
    {children}
}
```

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

### Create a Tri-State Checkbox with Checkbox

Source: https://context7.com/dioxuslabs/components/llms.txt

Use Checkbox and CheckboxIndicator to create a tri-state checkbox (Checked, Unchecked, Indeterminate) with integrated form handling. CheckboxIndicator renders children only when the state is Checked or Indeterminate.

```rust
use dioxus::prelude::*;
use dioxus_primitives::checkbox::{Checkbox, CheckboxIndicator, CheckboxState};

#[component]
fn TermsCheckbox() -> Element {
    let mut state = use_signal(|| CheckboxState::Unchecked);

    rsx! {
        label {
            Checkbox {
                checked: state(),
                name: "terms",
                on_checked_change: move |s| state.set(s),
                CheckboxIndicator { "✓" }
            }
            " I agree to the terms of service"
        }
        p { "Current state: {state():?}" }
    }
}
```

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

### Basic Switch Component Structure

Source: https://github.com/dioxuslabs/components/blob/main/preview/src/components/switch/docs.md

Illustrates the fundamental structure of the Switch component, including its checked state and an on-change handler. The SwitchThumb component is used to define the draggable handle.

```rust
Switch {
    // The current state of the switch, true for on and false for off.
    checked: true,
    // Callback function triggered when the switch state changes.
    on_checked_change: |checked: bool| {
        // Handle the change in switch state.
    },
    // The switch thumb represents the draggable handle that the user moves to toggle the switch.
    SwitchThumb {
        // The content of the thumb
        {children}
    }
}
```