### Run Switch Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Run the switch example to demonstrate the switch component.

```bash
cargo run --example switch      # Switch component
```

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

### Run Toggle Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/toggle/README.md

Execute the toggle example using Cargo. This command builds and runs the example located in the `examples/toggle` directory.

```bash
cargo run --example toggle
```

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

### Run Tooltip Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/tooltip/README.md

Execute the tooltip example using Cargo. This command builds and runs the example located in the `examples/tooltip` directory.

```bash
cargo run --example tooltip
```

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

### Run Dialog Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/dialog/README.md

Execute the dialog example using Cargo. This command builds and runs the example.

```bash
cargo run --example dialog
```

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

### Run Collapsible Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/collapsible/README.md

Use this command to execute the collapsible example. Ensure you have the Rust toolchain installed.

```bash
cargo run --example collapsible
```

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

### Run Button Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/button/README.md

Execute the button example project using cargo.

```bash
cargo run --example button
```

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

### Run Toggle Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Execute the toggle button example.

```bash
cargo run --example toggle      # Toggle button
```

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

### Run Label Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/label/README.md

Execute the provided example project using cargo.

```bash
cargo run --example label
```

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

### Run Switch Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/switch/README.md

Execute the provided switch example using the cargo CLI.

```bash
cargo run --example switch
```

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

### Run Input Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Execute the input example to see a text input with configuration options.

```bash
cargo run --example input       # Text input with config
```

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

### Run Checkbox Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/checkbox/README.md

Execute the checkbox example using Cargo. This command builds and runs the example located in the examples/checkbox directory.

```bash
cargo run --example checkbox
```

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

### Run Popover Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Execute the popover example to demonstrate the popover component.

```bash
cargo run --example popover     # Popover component
```

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

### Run Select Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Run the select example to demonstrate the select dropdown component.

```bash
cargo run --example select      # Select dropdown
```

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

### Run Textarea Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/textarea/README.md

Execute the provided example project to view the Textarea component in action.

```bash
cargo run --example textarea
```

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

### Run the Card Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/card/README.md

Execute the card example using the cargo run command.

```bash
cargo run --example card
```

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

### Run Popover Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/popover/README.md

Execute the popover example using the cargo command.

```bash
cargo run --example popover
```

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

### Run Typography Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Run the typography example to demonstrate the typography system.

```bash
cargo run --example typography  # Typography system demo
```

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

### Run Date Picker Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/date_picker/README.md

Execute the date picker example using Cargo. This command builds and runs the example specified by the `date_picker` argument.

```bash
cargo run --example date_picker
```

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

### Run Tabs Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/tabs/README.md

Execute the Tabs example using Cargo. This command builds and runs the example located in the 'examples/tabs' directory.

```bash
cargo run --example tabs
```

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

### Run Input Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/input/README.md

Execute the provided input example using the cargo CLI.

```bash
cargo run --example input
```

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

### Run Button Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Execute the button example to see different variants and sizes in action.

```bash
cargo run --example button      # Button variants and sizes
```

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

### Run Slider Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Run the slider example to demonstrate the slider component.

```bash
cargo run --example slider      # Slider component
```

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

### Run Scroll Area Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/scroll_area/README.md

Execute the scroll area example using Cargo. This command builds and runs the example located in the examples directory.

```bash
cargo run --example scroll_area
```

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

### Run Spinner Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/spinner/README.md

Execute the spinner example using Cargo. This command builds and runs the spinner example provided by the shadcn-rs project.

```bash
cargo run --example spinner
```

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

### Run Select Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/select/README.md

Execute the select example using the cargo run command.

```bash
cargo run --example select
```

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

### Run Combobox Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/combobox/README.md

Executes the Combobox example using the cargo run command.

```bash
cargo run --example combobox
```

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

### Run Accordion Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/accordion/README.md

Execute the Accordion example using the provided cargo command. Ensure you have the egui-shadcn project set up.

```bash
cargo run -p egui-shadcn --example accordion
```

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

### Run Collapsible Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Run the collapsible example to demonstrate the Radix-like collapsible component.

```bash
cargo run --example collapsible # Collapsible (Radix-like)
```

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

### Run Separator Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/separator/README.md

Execute the provided separator example using the cargo CLI.

```bash
cargo run --example separator
```

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

### Run Checkbox Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Execute the checkbox example to see a checkbox with tri-state functionality.

```bash
cargo run --example checkbox    # Checkbox with tri-state
```

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

### Run Slider Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/slider/README.md

Executes the slider component example using the cargo CLI.

```bash
cargo run --example slider
```

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

### Run Radio Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/radio/README.md

Execute the radio example using Cargo. Ensure you have the necessary Rust environment set up.

```bash
cargo run --example radio
```

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

### Run Calendar Example

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/calendar/README.md

Executes the calendar example using the cargo run command.

```bash
cargo run --example calendar
```

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

### Install component with force overwrite

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/shadcn-rs-cli/README.md

Install a component and force overwrite any existing component file with the same name. Use with caution.

```bash
shadcn-rs add button --project . --backend egui --force
```

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

### Install shadcn-rs-cli from crates.io

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/shadcn-rs-cli/README.md

Use this command to install the CLI tool globally after it has been published to crates.io.

```powershell
cargo install shadcn-rs-cli
```

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

### Install a shadcn-rs component

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/shadcn-rs-cli/README.md

Install a specific component (e.g., 'button') for a given backend. The component's source files will be downloaded and integrated into your project.

```bash
shadcn-rs add button --project . --backend egui
```

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

### List available shadcn-rs components

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/shadcn-rs-cli/README.md

List all available components for a specified backend. This helps in choosing which components to install.

```bash
shadcn-rs list --backend egui
```

```bash
shadcn-rs list --backend iced
```

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

### Install egui-shadcn dependencies

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Add the crate to your Cargo.toml file.

```toml
[dependencies]
egui-shadcn = "0.3.1"
egui = "0.33"
```

```toml
[dependencies]
egui-shadcn = { git = "https://github.com/FerrisMind/shadcn-rs", package = "egui-shadcn" }
```

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

### Install shadcn-rs-cli from local workspace

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/shadcn-rs-cli/README.md

Install the CLI tool directly from a local workspace, useful during development or when crates.io is not yet updated.

```powershell
cd references/shadcn-rs
cargo install --path ./crates/shadcn-rs-cli
```

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

### Install component and auto-add dependency

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/shadcn-rs-cli/README.md

Install a component and automatically add its corresponding backend dependency to your Cargo.toml. This command also runs `cargo fetch` if necessary.

```bash
shadcn-rs add button --project . --backend egui --write-cargo
```

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

### Resizable Component Example in Rust

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/iced-shadcn/README.md

Illustrates the Resizable component for creating adjustable layouts. This snippet is a placeholder and refers to a complete example in the library's source.

```rust
use iced_shadcn::{
    ResizableDirection,
    ResizableHandleProps,
    ResizablePanelGroupProps,
    ResizablePanelProps,
    Theme,
    resizable_handle,
    resizable_panel,
    resizable_panel_group,
};

// See crates/iced-shadcn/examples/resizable/main.rs for a complete example.
```

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

### Image Cropper Component Example in Rust

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/iced-shadcn/README.md

Demonstrates the Image Cropper component for image editing tasks. This snippet is a placeholder and refers to a complete example in the library's source.

```rust
use iced_shadcn::{
    ImageCropShape,
    ImageCropperAction,
    ImageCropperProps,
    ImageCropperState,
    Theme,
    image_cropper_cancel,
    image_cropper_canvas,
    image_cropper_controls,
    image_cropper_crop,
    image_cropper_dialog,
    image_cropper_preview,
    image_cropper_root,
    image_cropper_upload_trigger,
};

// See crates/iced-shadcn/examples/image-cropper/main.rs for a complete example.
```

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

### Quick start with egui-shadcn

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Basic usage of the button component within an egui UI function.

```rust
use egui_shadcn::{button, ControlSize, ControlVariant, Theme};

fn ui_example(ui: &mut egui::Ui, theme: &Theme) {
    button(
        ui,
        theme,
        "Click me",
        ControlVariant::Primary,
        ControlSize::Md,
        true,
    );
}
```

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

### Empty Component Example in Rust

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/iced-shadcn/README.md

Demonstrates the usage of the Empty component for displaying no data. Requires importing necessary components and theme.

```rust
use lucide_icons::Icon;
use iced_shadcn::{
    EmptyContentProps, EmptyHeaderProps, EmptyMediaProps, EmptyMediaVariant, EmptyRootProps,
    EmptyTitleProps, Theme, button, empty_content, empty_description, empty_header, empty_media,
    empty_root,
};

fn view<'a, Message: Clone + 'a>(theme: &'a Theme) -> iced::Element<'a, Message> {
    empty_root(
        iced::widget::column![
            empty_header(
                vec![
                    empty_media(
                        iced::widget::text(char::from(Icon::Folder).to_string()),
                        EmptyMediaProps::new().variant(EmptyMediaVariant::Icon),
                        theme,
                    ),
                    empty_title("No data", EmptyTitleProps::new(), theme),
                    empty_description("No data found", Default::default(), theme),
                ],
                EmptyHeaderProps::new(),
            ),
            empty_content(
                vec![button("Add data", None::<Message>, Default::default(), theme).into()],
                EmptyContentProps::new(),
            ),
        ]
        .spacing(24),
        EmptyRootProps::new(),
        theme,
    )
}
```

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

### Initialize theme

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Initialize the default theme for customization.

```rust
use egui_shadcn::Theme;

let theme = Theme::default();
// Customize via theme tokens
```

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

### Initialize shadcn-rs configuration

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/shadcn-rs-cli/README.md

Initialize the shadcn-rs configuration in your target project. Specify the project directory and the backend (egui or iced).

```bash
shadcn-rs init --project . --backend egui
```

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

### Implement Navigation Menu in iced-shadcn

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/iced-shadcn/README.md

Construct a navigation menu using navigation_menu_root and associated item builders. The menu supports triggers, content panels, and link items.

```rust
use iced::widget::{column, text};
use iced_shadcn::{
    navigation_menu_content, navigation_menu_item, navigation_menu_link_item, navigation_menu_list,
    navigation_menu_root, navigation_menu_trigger, navigation_menu_viewport,
    NavigationMenuContentProps, NavigationMenuListProps, NavigationMenuProps, Theme,
};

fn view<'a, Message: Clone + 'a>(
    theme: &Theme,
    open: Option<&'a str>,
    on_open: Option<fn(String) -> Message>,
) -> iced::Element<'a, Message> {
    let items = navigation_menu_list(vec![
        navigation_menu_item(
            navigation_menu_trigger("home", "Home"),
            navigation_menu_content(column![text("Intro"), text("Installation")].spacing(6))
                .props(NavigationMenuContentProps::new().width(240.0)),
        ),
        navigation_menu_link_item("docs", text("Docs"), None::<Message>),
    ]);

    navigation_menu_root(
        items,
        open,
        on_open,
        NavigationMenuProps::new().viewport_component(navigation_menu_viewport()),
        NavigationMenuListProps::new(),
        theme,
    )
}
```

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

### Add dependency via cargo

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/README.md

Use the cargo CLI to add the dependency.

```bash
cargo add egui-shadcn
```

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

### Switch Application View (JavaScript)

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/wasm-demo/index.html

Use this JavaScript function to switch between different application views (Iced and Egui) within the WASM showcase. It handles loading new HTML content if the app hasn't been loaded before and updates the active button state.

```javascript
let currentApp = 'iced';
const loadedApps = new Set(['iced']);

function switchApp(name) {
    if (name === currentApp) return;
    const frame = document.getElementById('app-frame');
    if (!loadedApps.has(name)) {
        frame.src = name + '/index.html';
        loadedApps.add(name);
    } else {
        frame.src = name + '/index.html';
    }
    currentApp = name;
    document.getElementById('btn-iced').classList.toggle('active', name === 'iced');
    document.getElementById('btn-egui').classList.toggle('active', name === 'egui');
}
```

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

### Implement Breadcrumb Navigation in iced-shadcn

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/iced-shadcn/README.md

Create a breadcrumb trail using the breadcrumb builder pattern. Requires passing the theme and context to individual items and separators.

```rust
use iced_shadcn::{
    BreadcrumbProps, Theme, breadcrumb, breadcrumb_item, breadcrumb_link, breadcrumb_list,
    breadcrumb_page, breadcrumb_separator,
};

fn view<'a, Message: Clone + 'a>(theme: &Theme) -> iced::Element<'a, Message> {
    breadcrumb(theme, BreadcrumbProps::new(), |ctx| {
        breadcrumb_list(
            ctx,
            vec![
                breadcrumb_item(ctx, vec![breadcrumb_link("Docs", None, ctx)]),
                breadcrumb_separator(ctx, None),
                breadcrumb_item(ctx, vec![breadcrumb_link("Components", None, ctx)]),
                breadcrumb_separator(ctx, None),
                breadcrumb_item(ctx, vec![breadcrumb_page("Breadcrumb", ctx)]),
            ],
        )
    })
}
```

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

### Implement Tabs Component in iced-shadcn

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/iced-shadcn/README.md

Use the tabs_root, tabs_list, and tabs_contents functions to create a tabbed interface. Requires configuring TabsListProps for styling and variant selection.

```rust
use iced::widget::text;
use iced_shadcn::{
    tabs_content, tabs_contents, tabs_list, tabs_root, tabs_trigger, TabsHover, TabsListProps,
    TabsListVariant, TabsRootProps, Theme,
};

fn view<'a, Message: Clone + 'a>(theme: &Theme, active: &'a str) -> iced::Element<'a, Message> {
    let list = tabs_list(
        vec![
            tabs_trigger("account", "Account"),
            tabs_trigger("password", "Password"),
        ],
        active,
        None::<fn(String) -> Message>,
        TabsRootProps::new(),
        TabsListProps::new()
            .variant(TabsListVariant::Pill)
            .transparent_container(true)
            .hover(TabsHover::Soft)
            .hover_intensity(0.75),
        theme,
    );

    let content = tabs_contents(
        vec![
            tabs_content("account", text("Account content")),
            tabs_content("password", text("Password content")),
        ],
        active,
    );

    tabs_root(list, content)
}
```

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

### Configure Full-Screen Canvas CSS

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/wasm-demo/iced.html

Sets the body and canvas elements to occupy the full viewport with a specific background color.

```css
html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #09090b; overflow: hidden; } canvas { width: 100% !important; height: 100% !important; display: block; margin: 0; padding: 0; background-color: #09090b; }
```

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

### Accordion Component API Reference

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/egui-shadcn/examples/accordion/README.md

Defines the properties for the Accordion component and its individual items.

```APIDOC
## Accordion Component API Reference

### AccordionProps

This section details the properties available for configuring the Accordion component.

- **accordion_type** (AccordionType) - Specifies the type of accordion. Can be `AccordionType::Single` or `AccordionType::Multiple`.
- **collapsible** (boolean) - Determines if the open item can be closed. This property is applicable only in Single mode.
- **default_value** (string) - Sets the initially open item by its value.
- **disabled** (boolean) - Disables the entire accordion component.
- **animate** (boolean) - Enables or disables animations. Defaults to `true`.
- **animation_ms** (number) - Allows customization of the animation duration in milliseconds.

### AccordionItemProps

This section details the properties available for configuring individual Accordion items.

- **value** (string) - A unique identifier for each accordion item.
- **disabled** (boolean) - Disables this specific accordion item.
```

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

### Enforce Canvas Dimensions via JavaScript

Source: https://github.com/ferrismind/shadcn-rs/blob/master/crates/wasm-demo/iced.html

Ensures the canvas element matches the current window size and maintains fixed positioning.

```javascript
(function () { function enforceCanvasSize() { const canvases = Array.from(document.querySelectorAll("canvas")); if (canvases.length === 0) return; const targetW = Math.max(1, Math.floor(window.innerWidth)); const targetH = Math.max(1, Math.floor(window.innerHeight)); canvases.forEach(function (c) { c.style.position = "fixed"; c.style.left = "0"; c.style.top = "0"; c.style.width = "100vw"; c.style.height = "100vh"; c.style.display = "block"; c.style.backgroundColor = "#09090b"; if (c.width !== targetW) c.width = targetW; if (c.height !== targetH) c.height = targetH; }); } window.addEventListener("TrunkApplicationStarted", function () { enforceCanvasSize(); }); setInterval(function () { enforceCanvasSize(); }, 2000); window.addEventListener("resize", function () { enforceCanvasSize(); }); })();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.