Rust Radix Logo

Introduction

Rust Radix is a Rust port of Radix.

TODO: introduction text

Parts

Rust Radix consists of the following parts:

Frameworks

Rust Radix is available for the following frameworks:

The following frameworks are under consideration:

The tables below show the support for the various frameworks.

  • ✅ = Supported
  • 🟦 = Early Support
  • 🚧 = Work In Progress
  • ❌ = Unsupported

Colors Support

NameFramework Independent
Colors✅

Icons Support

NameDioxusLeptosYew
Icons❌🚧🚧

Primitives Support

NameDioxusLeptosYew
Accessible Icon❌🚧 #17❌ #69
Accordion❌❌ #18❌ #70
Alert Dialog❌❌ #19❌ #71
Arrow❌🚧 #20🚧 #72
Aspect Ratio❌🟦 #21❌ #73
Avatar❌🚧 #22❌ #74
Checkbox❌🚧 #23❌ #75
Collapsible❌❌ #24❌ #76
Collection❌🟦 #25❌ #77
Compose Refs❌🟦 #26🟦 #78
Context Menu❌❌ #27❌ #79
Context❌❌ #28❌ #80
Dialog❌❌ #29❌ #81
Direction❌🟦 #30❌ #82
Dismissable Layer❌🚧 #31❌ #83
Dropdown Menu❌❌ #32❌ #84
Focus Guards❌🟦 #33❌ #85
Focus Scope❌🚧 #34❌ #86
Form❌❌ #35❌ #87
Hover Card❌❌ #36❌ #88
Label❌🟦 #37🚧 #89
Menu❌🚧 #38❌ #90
Menubar❌❌ #39❌ #91
Navigation Menu❌❌ #40❌ #92
Popover❌❌ #41❌ #93
Popper❌🟦 #42🚧 #94
Portal❌🟦 #43❌ #95
Presence❌🟦 #44❌ #96
Primitive❌🟦 #45🟦 #97
Progress❌🟦 #46❌ #98
Radio Group❌❌ #47❌ #99
Roving Focus❌🚧 #48❌ #100
Scroll Area❌❌ #49❌ #101
Select❌❌ #50❌ #102
Separator❌🟦 #51🟦 #103
Slider❌❌ #52❌ #104
Slot❌🚧 #53🚧 #105
Switch❌🟦 #54❌ #106
Tabs❌❌ #55❌ #107
Toast❌❌ #56❌ #108
Toggle Group❌❌ #57❌ #109
Toggle❌🚧 #58❌ #110
Toolbar❌❌ #59❌ #111
Tooltip❌❌ #60❌ #112
Use Callback Ref❌❌❌
Use Controllable State❌🟦 #61❌ #113
Use Escape Keydown❌🟦 #62❌ #114
Use Layout Effect❌❌❌
Use Previous❌🟦 #63❌ #115
Use Rect❌❌ #64❌ #116
Use Size❌🟦 #65🟦 #117
Visually Hidden❌🟦 #66❌ #118

License

This project is available under the MIT license.

Rust For Web

The Rust Radix project is part of the Rust For Web.

Rust For Web creates and ports web UI libraries for Rust. All projects are free and open source.

Colors

Installation

Install the colors from your command line.

cargo add radix-colors

TODO

Icons

A crisp set of 15×15 icons. All icons are available as individual components.

Installation

Install the icons from your command line.

# Selective Icons
cargo add radix-leptos-icons --features face,image,sun

# All Icons
cargo add radix-leptos-icons --features full

Anatomy

Import the icons.

use leptos::*;
use radix_leptos_icons::{FaceIcon, ImageIcon, SunIcon};

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <FaceIcon />
        <SunIcon />
        <ImageIcon />
    }
}

API Reference

PropTypeDefault
colorMaybeProp<String>"currentColor"

See Also

Primitives

Components

Aspect Ratio

Displays content within a desired ratio.

Features

  • Accepts any custom ratio.

Installation

Install the component from your command line.

cargo add radix-leptos-aspect-ratio

Anatomy

Import the component.

use leptos::*;
use radix_leptos_aspect_ratio::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <AspectRatio />
    }
}

API Reference

Root

Contains the content you want to constrain to a given ratio.

PropTypeDefault
as_childMaybeProp<bool>false
ratioMaybeProp<f64>1.0

See Also

Avatar

An image element with a fallback for representing the user.

Features

  • Automatic and manual control over when the image renders.
  • Fallback part accepts any children.
  • Optionally delay fallback rendering to avoid content flashing.

Installation

Install the component from your command line.

cargo add radix-leptos-avatar

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_avatar::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Avatar>
            <AvatarImage />
            <AvatarFallback />
        </Avatar>
    }
}

API Reference

Root

Contains all the parts of an avatar.

PropTypeDefault
as_childMaybeProp<bool>false

Image

The image to render. By default it will only render when it has loaded. You can use the on_loading_status_change handler if you need more control.

PropTypeDefault
as_childMaybeProp<bool>false
on_loading_status_changeOption<Callback<ImageLoadingStatus>>-

Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delay_ms prop to delay its rendering so it only renders for those with slower connections. For more control, use the on_loading_status_change handler on AvatarImage.

PropTypeDefault
as_childMaybeProp<bool>false
delay_msMaybeProp<i32>-

Examples

TODO

See Also

Checkbox

A control that allows the user to toggle between checked and not checked.

Features

  • Supports indeterminate state.
  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Installation

Install the component from your command line.

cargo add radix-leptos-checkbox

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_checkbox::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Checkbox>
            <CheckboxIndicator />
        </Checkbox>
    }
}

API Reference

Root

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

PropTypeDefault
as_childMaybeProp<bool>false
default_checkedMaybeProp<CheckedState>-
checkedMaybeProp<CheckedState>-
on_checked_changeOption<Callback<bool>>-
disabledMaybeProp<bool>-
requiredMaybeProp<bool>-
nameMaybeProp<String>-
valueMaybeProp<String>"on"
Data attributeValues
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]Present when disabled

Indicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

PropTypeDefault
as_childMaybeProp<bool>false
force_mountMaybeProp<bool>
Data attributeValues
[data-state]"checked" | "unchecked" | "indeterminate"
[data-disabled]Present when disabled

Examples

TODO

Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern.

Keyboard Interactions

KeyDescription
SpaceChecks/unchecks the checkbox.

See Also

Label

Renders an accessible label associated with controls.

Features

  • Text selection is prevented when double clicking label.
  • Supports nested controls.

Installation

Install the component from your command line.

cargo add radix-leptos-label

Anatomy

Import the component.

use leptos::*;
use radix_leptos_label::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Label />
    }
}

API Reference

Root

Contains the content for the label.

PropTypeDefault
as_childMaybeProp<bool>false
on_mouse_downOption<Callback<MouseEvent>>-

Accessibility

This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the for attribute. For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.

See Also

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Features

  • Provides context for assistive technology to read the progress of a task.

Installation

Install the component from your command line.

cargo add radix-leptos-progress

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_progress::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Progress>
            <ProgressIndicator />
        </Progress>
    }
}

API Reference

Root

Contains all of the progress parts.

PropTypeDefault
as_childMaybeProp<bool>false
valueMaybeProp<f64>-
maxMaybeProp<f64>100.0
get_value_labelOption<Callback<(f64, f64), String>>-
Data attributeValues
[data-state]"complete" | "indeterminate" | "loading"
[data-value]The current value
[data-max]The max value

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

PropTypeDefault
as_childMaybeProp<bool>false
Data attributeValues
[data-state]"complete" | "indeterminate" | "loading"
[data-value]The current value
[data-max]The max value

Accessibility

Adheres to the progressbar role requirements.

See Also

Separator

Visually or semantically separates content.

Features

  • Supports horizontal and vertical orientations.

Installation

Install the component from your command line.

cargo add radix-leptos-separator

Anatomy

Import the component.

use leptos::*;
use radix_leptos_separator::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Separator />
    }
}

API Reference

Root

The separator.

PropTypeDefault
as_childMaybeProp<bool>false
orientationMaybeProp<Orientation>Orientation::Horizontal
decorativeMaybeProp<bool>false
Data attributeValues
[data-orientation]"horizontal" | "vertical"

Accessibility

Adheres to the separator role requirements.

See Also

Switch

A control that allows the user to toggle between checked and not checked.

Features

  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Installation

Install the component from your command line.

cargo add radix-leptos-switch

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_switch::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Switch>
            <SwitchThumb />
        </Switch>
    }
}

API Reference

Root

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

PropTypeDefault
as_childMaybeProp<bool>false
default_checkedMaybeProp<bool>-
checkedMaybeProp<bool>-
on_checked_changeOption<Callback<bool>>-
disabledMaybeProp<bool>-
requiredMaybeProp<bool>-
nameMaybeProp<String>-
valueMaybeProp<String>"on"
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]Present when disabled

Thumb

The thumb that is used to visually indicate whether the switch is on or off.

PropTypeDefault
as_childMaybeProp<bool>false
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]Present when disabled

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions

KeyDescription
SpaceToggles the component's state.
EnterToggles the component's state.

See Also

Toggle

A two-state button that can be either on or off.

Features

  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Installation

Install the component from your command line.

cargo add radix-leptos-toggle

Anatomy

Import the component.

use leptos::*;
use radix_leptos_toggle::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Toggle />
    }
}

API Reference

Root

The toggle.

PropTypeDefault
as_childMaybeProp<bool>false
default_pressedMaybeProp<bool>-
pressedMaybeProp<bool>-
on_pressed_changeOption<Callback<bool>>-
disabledMaybeProp<bool>-
Data attributeValues
[data-state]"on" | "off"
[data-disabled]Present when disabled

Accessibility

Keyboard Interactions

KeyDescription
SpaceActivates/deactivates the toggle.
EnterActivates/deactivates the toggle.

See Also

Utilities

Accessible Icon

Makes icons accessible by adding a label.

Features

  • Quickly make any icon accessible by wrapping it and providing a meaningful label.
  • No visual difference, but announced correctly by screen readers.

Installation

Install the component from your command line.

cargo add radix-leptos-accessible-icon

Anatomy

Import the component.

use leptos::*;
use radix_leptos_accessible_icon::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <AccessibleIcon />
    }
}

API Reference

Root

Contains the icon to make accessible.

PropTypeDefault
labelMaybeSignal<String>-

Accessibility

Most icons or icon systems come with no accessibility built-in. For example, the same visual cross icon may in fact mean "close" or "delete". This component lets you give meaning to icons used throughout your app.

This is built with Visually Hidden.

See Also

Direction Provider

Wraps your app to provide global reading direction.

Features

  • Enables all primitives to inherit global reading direction.

Installation

Install the component from your command line.

cargo add radix-leptos-direction-provider

Anatomy

Import the component.

use leptos::*;
use radix_leptos_direction_provider::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <DirectionProvider />
    }
}

API Reference

Root

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the DirectionProvider component to ensure all of the primitives adjust their behavior based on the dir prop.

PropTypeDefault
dirMaybeSignal<Direction>-

Example

Use the direction provider.

use leptos::*;
use radix_leptos_direction_provider::*;

#[component]
fn Example() -> impl IntoView {
    view! {
        <DirectionProvider dir=Direction::Rtl>
            /* your app */
        </DirectionProvider>
    }
}

See Also

Portal

Renders a subtree in a different part of the DOM.

Features

  • Render any React subtree outside of your App.
  • Appends to document.body by default but can be customized to use a different container.

Installation

Install the component from your command line.

# CSR
cargo add radix-leptos-portal --features csr

# Hydrate
cargo add radix-leptos-portal --features hydrate

# SSR
cargo add radix-leptos-portal --features ssr

Anatomy

Import the component.

use leptos::*;
use radix_leptos_portal::Portal;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Portal />
    }
}

API Reference

Root

Anything you put inside this component will be rendered in a separate <div> element. By default, this element will be appended to document.body but you can choose a different container by using the container or container_ref prop.

PropTypeDefault
as_childMaybeProp<bool>false
containerMaybeProp<web_sys::Element>-
container_refNodeRef<AnyElement>-

Example

Use the portal primitive.

use leptos::*;
use radix_leptos_portal::Portal;

#[component]
fn Example() -> impl IntoView {
    view! {
        <Portal>Content</Portal>
    }
}

See Also

Slot

Merges its props onto its immediate child.

TODO

Visually Hidden

Hides content from the screen in an accessible way.

Features

  • Visually hides content while preserving it for assistive technology.

Installation

Install the component from your command line.

cargo add radix-leptos-visually-hidden

Anatomy

Import the component.

use leptos::*;
use radix_leptos_visually_hidden::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <VisuallyHidden />
    }
}

API Reference

Root

Anything you put inside this component will be hidden from the screen but will be announced by screen readers.

PropTypeDefault
as_childMaybeProp<bool>false

Example

Use the visually hidden primitive.

use leptos::*;
use radix_leptos_visually_hidden::*;

#[component]
fn Example() -> impl IntoView {
    view! {
        <button>
            <GearIcon />
            <VisuallyHidden>Settings</VisuallyHidden>
        </button>
    }
}

Accessibility

This is useful in certain scenarios as an alternative to traditional labelling with aria-label or aria-labelledby.

See Also