Rust/UI

https://rust-ui.com/
Admin
Rust/UI is a cross-platform component registry for Leptos and Rust fullstack applications, offering...
Tokens:155,208
Snippets:1,276
Trust Score:5.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Quick start with ui starters

Source: https://rust-ui.com/docs/components/cli

Optional command to quickly start a new project with all setup and example components.

```bash
ui starters # Optional, quick start

```

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

### Quick Start Example

Source: https://rust-ui.com/docs/components/icons

Example of using icons in a Leptos component.

```rust
use leptos::prelude::*;
use icons::{ChevronRight, Heart, Star, Menu};

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <ChevronRight />
        <Heart class="text-red-500" />
    }
}

```

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

### Installation

Source: https://rust-ui.com/components/command

Installation commands for the UI CLI.

```bash
# cargo install ui-cli --force
ui add demo_command
ui add command
```

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

### Installation

Source: https://rust-ui.com/components/message

Install the UI CLI and add the message component.

```bash
# cargo install ui-cli --force
ui add demo_message
ui add message
```

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

### Installation Commands

Source: https://rust-ui.com/components/card

Install the UI CLI and add the card components.

```bash
cargo install ui-cli --force
ui add demo_card
ui add card
```

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

### Installation

Source: https://rust-ui.com/components/marquee

Install the UI CLI and add the marquee component.

```bash
cargo install ui-cli --force
ui add demo_marquee
ui add marquee
```

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

### Installation

Source: https://rust-ui.com/components/accordion

Installation commands for the UI CLI and adding the accordion demo.

```bash
# cargo install ui-cli --force
ui add demo_accordion
```

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

### Installation Commands

Source: https://rust-ui.com/components/field

Commands to install the CLI and add the field components.

```bash
# cargo install ui-cli --force
ui add demo_field
ui add field
```

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

### Installation Commands

Source: https://rust-ui.com/components/table

Commands to install the UI CLI and add table components.

```bash
cargo install ui-cli --force
ui add demo_table
ui add table
```

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

### Installation Commands

Source: https://rust-ui.com/components/switch

Commands to install the Switch component using the UI CLI.

```bash
# cargo install ui-cli --force
ui add demo_switch
ui add switch

```

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

### Installation Commands

Source: https://rust-ui.com/components/toast

Commands to install the toast component via the CLI.

```bash
# cargo install ui-cli --force
ui add demo_toast
ui add toast
```

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

### Installation Commands

Source: https://rust-ui.com/components/attachment

Commands to install the UI CLI and add the attachment components.

```bash
# cargo install ui-cli --force
ui add demo_attachment
ui add attachment
```

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

### Install the UI CLI tool

Source: https://rust-ui.com/docs/components/installation

Run this command to install the Rust/UI CLI tool. The --force flag ensures the latest version is installed.

```bash
cargo install ui-cli --force
```

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

### Installation Commands

Source: https://rust-ui.com/components/breadcrumb

Commands to install the CLI and add the breadcrumb components.

```bash
# cargo install ui-cli --force
ui add demo_breadcrumb
ui add breadcrumb
```

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

### Installation

Source: https://rust-ui.com/components/scroll-area

Installation commands for the scroll area UI component.

```bash
# cargo install ui-cli --force
ui add demo_scroll_area
ui add scroll-area
```

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

### Installation Commands

Source: https://rust-ui.com/components/button

Commands to install the UI CLI and add the demo_button and button components.

```bash
# cargo install ui-cli --force
ui add demo_button
ui add button

```

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

### Installation Commands

Source: https://rust-ui.com/components/dialog

Installation commands for the UI CLI and adding dialog components.

```bash
# cargo install ui-cli --force
ui add demo_dialog
ui add dialog

```

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

### Installation Commands

Source: https://rust-ui.com/components/alert

Commands to install and add the alert component using the CLI.

```bash
# cargo install ui-cli --force
ui add demo_alert
ui add alert

```

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

### Install and add pressable components

Source: https://rust-ui.com/components/pressable

Commands to install the UI CLI and add the demo_pressable and pressable components. The commented line shows an optional cargo install command.

```bash
# cargo install ui-cli --force
ui add demo_pressable
ui add pressable
```

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

### Installation Commands

Source: https://rust-ui.com/components/spinner

Commands to install the spinner components using the UI CLI.

```bash
# cargo install ui-cli --force
ui add demo_spinner
ui add spinner
```

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

### Install and Add Drawer

Source: https://rust-ui.com/components/drawer

Commands to install the UI CLI and add the drawer components.

```bash
cargo install ui-cli --force
ui add demo_drawer
ui add drawer
```

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

### Install Menubar component with ui CLI

Source: https://rust-ui.com/components/menubar

Run either command to install the Menubar component. The first command is commented out and shows installing the CLI tool, while the second and third commands add the demo and the component itself.

```bash
# cargo install ui-cli --force
ui add demo_menubar
ui add menubar
```

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

### Installation Commands

Source: https://rust-ui.com/components/bubble

Installation commands for the Bubble component using the UI CLI.

```bash
cargo install ui-cli --force
```

```bash
ui add demo_bubble
```

```bash
ui add bubble
```

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

### Installation Commands

Source: https://rust-ui.com/components/checkbox

Commands to install the checkbox component using the UI CLI.

```bash
# cargo install ui-cli --force
ui add demo_checkbox
ui add checkbox
```

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

### Installation Commands for Input Component

Source: https://rust-ui.com/components/input

Commands to install the input component using the UI CLI. The first command installs the CLI if needed, the second adds the demo, and the third adds the component.

```bash
# cargo install ui-cli --force
ui add demo_input
ui add input
```

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

### Installation Commands

Source: https://rust-ui.com/components/card-carousel

Commands to install the UI CLI and add the card carousel demo and component.

```bash
# cargo install ui-cli --force
ui add demo_card_carousel
ui add card-carousel
```

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

### Install ui-cli and add collapsible component

Source: https://rust-ui.com/components/collapsible

Install the ui-cli tool and add the collapsible component to your project. The first command is commented out, indicating it is optional if ui-cli is already installed.

```bash
# cargo install ui-cli --force
ui add demo_collapsible
ui add collapsible
```

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

### Install navigation-menu with ui-cli

Source: https://rust-ui.com/docs/components/navigation-menu

Install the navigation-menu component using the ui-cli. The first line is commented out and shows the cargo install command; the actual commands add the demo and the component.

```bash
# cargo install ui-cli --force
ui add demo_navigation_menu
ui add navigation-menu
```

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

### Install and Add Sheet Components

Source: https://rust-ui.com/components/sheet

Commands to install the UI CLI and add the demo_sheet and sheet components.

```bash
# cargo install ui-cli --force
ui add demo_sheet
ui add sheet
```

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

### CLI Installation Commands

Source: https://rust-ui.com/components/mask

Commands to install the CLI and add the demo_mask and mask components.

```bash
# cargo install ui-cli --force
ui add demo_mask
ui add mask
```

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

### Pagination Example

Source: https://rust-ui.com/components/pagination

Example of a pagination component with previous button and page links.

```rust
let mut page = use_signal(|| 1u32);

rsx! {
    Pagination {
        PaginationList {
            PaginationItem {
                PaginationPrev {
                    disabled: page() == 1,
                    onclick: move |_| { if page() > 1 { page.set(page() - 1); } },
                }
            }
            for p in 1..=5 {
                PaginationItem {
                    PaginationLink {
                        page: p,
                        is_active: page() == p,
                        onclick: move |_| page.set(p),
                    }
                }
            }
        }
    }
}
```

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

### Install tabs component with ui add

Source: https://rust-ui.com/components/tabs

Installation commands for the tabs component. The first line is commented out as an alternative to install the CLI, then ui add demo_tabs and ui add tabs are run.

```bash
# cargo install ui-cli --force
ui add demo_tabs
ui add tabs
```

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

### Usage example with Pressable

Source: https://rust-ui.com/components/pressable

Usage example showing how to wrap a Card with Pressable to add press feedback.

```rust
rsx! {
    Pressable {
        Card { "Tap or click me" }
    }
}

```

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

### DemoNavigationMenu component with NavigationMenu and ListItem

Source: https://rust-ui.com/docs/components/navigation-menu

Shows a complete Dioxus component for a navigation menu with two dropdown panels (Getting Started and Components) and a direct link (Documentation). Includes a custom ListItem component that renders a link with title and description. Requires the navigation_menu module and uses Tailwind CSS classes for styling.

```rust
use dioxus::prelude::*;

use crate::ui::navigation_menu::{
    NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList,
    NavigationMenuTrigger, navigation_menu_trigger_style,
};

#[component]
fn ListItem(#[props(into)] href: String, #[props(into)] title: String, children: Element) -> Element {
    rsx! {
        li {
            a {
                href: "{href}",
                class: "block p-3 space-y-1 leading-none no-underline rounded-md transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
                div { class: "text-sm font-medium leading-none", "{title}" }
                p { class: "text-sm leading-snug line-clamp-2 text-muted-foreground", {children} }
            }
        }
    }
}

#[component]
pub fn DemoNavigationMenu() -> Element {
    rsx! {
        div { class: "flex justify-center items-start py-8 min-h-[350px]",
            NavigationMenu {
                NavigationMenuList {
                    NavigationMenuItem {
                        NavigationMenuTrigger { "Getting Started" }
                        NavigationMenuContent {
                            ul { class: "grid gap-3 p-0 md:grid-cols-2 w-[400px] md:w-[500px] lg:w-[600px]",
                                li { class: "row-span-3",
                                    a {
                                        href: "#",
                                        class: "flex flex-col justify-end p-6 w-full h-full no-underline bg-gradient-to-b rounded-md outline-none select-none focus:shadow-md from-muted/50 to-muted hover:bg-accent",
                                        div { class: "mt-4 mb-2 text-lg font-medium", "rust/ui" }
                                        p { class: "text-sm leading-tight text-muted-foreground",
                                            "Beautifully designed components built with Leptos and Tailwind CSS."
                                        }
                                    }
                                }
                                ListItem { href: "#", title: "Introduction",
                                    "Re-usable components built using Leptos and Tailwind CSS."
                                }
                                ListItem { href: "#", title: "Installation",
                                    "How to install dependencies and structure your app."
                                }
                                ListItem { href: "#", title: "Typography",
                                    "Styles for headings, paragraphs, lists and more."
                                }
                            }
                        }
                    }

                    NavigationMenuItem {
                        NavigationMenuTrigger { "Components" }
                        NavigationMenuContent {
                            ul { class: "grid gap-3 p-0 md:grid-cols-2 w-[400px] md:w-[500px] lg:w-[600px]",
                                ListItem { href: "#", title: "Alert",
                                    "Displays a callout for user attention."
                                }
                                ListItem { href: "#", title: "Alert Dialog",
                                    "A modal dialog that interrupts the user."
                                }
                                ListItem { href: "#", title: "Button",
                                    "Triggers an action or event."
                                }
                                ListItem { href: "#", title: "Card",
                                    "Displays content in a card container."
                                }
                                ListItem { href: "#", title: "Input",
                                    "Displays a form input field."
                                }
                                ListItem { href: "#", title: "Select",
                                    "Displays a list of options to pick from."
                                }
                            }
                        }
                    }

                    NavigationMenuItem {
                        NavigationMenuLink { class: navigation_menu_trigger_style(), href: "#",
                            "Documentation"
                        }
                    }
                }
            }
        }
    }
}

```

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

### Install the CLI with cargo install ui-cli --force

Source: https://rust-ui.com/docs/components/cli

Installs the Rust/UI CLI using Cargo. The --force flag ensures the latest version is installed.

```bash
cargo install ui-cli --force

```

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

### Installation Commands

Source: https://rust-ui.com/components/aspect-ratio

Commands to add the demo and the aspect-ratio component using the UI CLI.

```bash
# cargo install ui-cli --force
ui add demo_aspect_ratio
ui add aspect-ratio
```

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

### Install tooltip with ui add

Source: https://rust-ui.com/components/tooltip

Install the tooltip component using the ui-cli. The commented line shows the cargo install command for the CLI.

```bash
# cargo install ui-cli --force
ui add demo_tooltip
ui add tooltip

```

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

### Install animate component with ui-cli

Source: https://rust-ui.com/components/animate

Install the animate component using the ui-cli. The commented line shows an alternative manual installation command.

```bash
# cargo install ui-cli --force
ui add demo_animate
ui add animate
```

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

### Usage example

Source: https://rust-ui.com/components/separator

Example of rendering the Separator component.

```rust
rsx! {
    Separator {}
}
```

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

### Installation commands

Source: https://rust-ui.com/components/separator

Commands to add the demo and separator components using the UI CLI.

```bash
# cargo install ui-cli --force
ui add demo_separator
ui add separator
```

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

### Initialize existing project with ui init

Source: https://rust-ui.com/docs/components/cli

Sets up an existing project for Rust/UI components. Creates the project tree shown in the documentation.

```bash
ui init

```

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

### Installation commands

Source: https://rust-ui.com/components/toggle-group

Commands to add the demo and the toggle-group component to your project. Run either of these commands.

```bash
# cargo install ui-cli --force
ui add demo_toggle_group
ui add toggle-group
```

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

### Installation commands

Source: https://rust-ui.com/components/status

Commands to add the demo_status and status components using the ui CLI.

```bash
# cargo install ui-cli --force
ui add demo_status
ui add status
```

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

### Usage Example

Source: https://rust-ui.com/components/switch

Usage example of the Switch component in JSX-like syntax.

```rust
rsx! {
    Switch {}
}

```

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

### Installation commands

Source: https://rust-ui.com/components/radio-button

Commands to add the demo and the radio-button component to your project. The first command installs the UI CLI if needed, and the subsequent commands add the demo and the component.

```bash
# cargo install ui-cli --force
ui add demo_radio_button
ui add radio-button
```

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

### Usage example

Source: https://rust-ui.com/components/status

Example of rendering a Status component with a child div.

```rust
rsx! {
    Status {
        div { class: "rounded-md size-16 bg-neutral-500" }
    }
}

```

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

### Usage Example

Source: https://rust-ui.com/components/mask

Example usage of MaskWrapper and Mask in a rsx! macro.

```rust
rsx! {
    MaskWrapper {
        div { "Scrollable content..." }
        Mask { side: MaskSide::Left }
    }
}
```

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

### Usage Example

Source: https://rust-ui.com/components/aspect-ratio

Example usage of the AspectRatio component with an image inside.

```rust
rsx! {
    AspectRatio { ratio: 16.0 / 9.0,
        img { src: "...", alt: "..." }
    }
}
```

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

### Installation Commands for Avatar Component

Source: https://rust-ui.com/components/avatar

Commands to install the avatar component using the ui-cli. The first command installs the CLI, the second adds the demo, and the third adds the avatar component.

```bash
# cargo install ui-cli --force
ui add demo_avatar
ui add avatar
```

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

### Install Hover Card Demo with ui add

Source: https://rust-ui.com/components/hover-card

Command to add the demo_hover_card component to your project. Run this in the project root to install the demo.

```bash
ui add demo_hover_card
```

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

### Installation commands

Source: https://rust-ui.com/components/sonner

Commands to add the demo_sonner and sonner components using the ui-cli tool.

```bash
# cargo install ui-cli --force
ui add demo_sonner
ui add sonner

```

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

### Install and add label component via CLI

Source: https://rust-ui.com/components/label

Commands to install the ui-cli and add the demo_label and label components.

```bash
# cargo install ui-cli --force
ui add demo_label
ui add label
```
Tokens:
Raw