Getting started

hydroxy is a component library for Leptos and Dioxus. Every component works the same in both, because the behaviour lives below the framework.

Install

Add the adapter for your framework and the stylesheet crate.

cargo add hydroxy-leptos hydroxy-tokens

cargo add hydroxy-dioxus hydroxy-tokens

Use a component

Inject the stylesheet once at the root, then use components. Each component page has a live example and the code for both frameworks.

use leptos::prelude::*;
use hydroxy_leptos::switch::Switch;

#[component]
fn App() -> impl IntoView {
    view! {
        // Once, at the root: fonts, then tokens and component styles.
        <style inner_html=format!("{}{}", hydroxy_tokens::GOOGLE_FONTS, hydroxy_tokens::CSS)></style>
        <Switch default_checked=true>"Email me when a summary is ready"</Switch>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::switch::Switch;

#[component]
fn App() -> Element {
    rsx! {
        // Once, at the root: fonts, then tokens and component styles.
        style { {hydroxy_tokens::GOOGLE_FONTS} {hydroxy_tokens::CSS} }
        Switch { default_checked: true, "Email me when a summary is ready" }
    }
}

Server rendering

Components generate ids to link labels, panels and focus targets. With Leptos server rendering, start an id scope in the root component so the server and the browser give every component the same id.

#[component]
pub fn App() -> impl IntoView {
    // First thing in the root component.
    hydroxy_leptos::id::provide_id_scope();
    // ...
}

This site is rendered that way: each page arrives as HTML, then hydrates.

Theming

Everything is styled by CSS custom properties: six jewel colours, ink and paper neutrals, type, spacing, radii, shadows and motion. Light is the default; dark applies under data-theme="dark". Override any token to restyle every component.

/* Dark theme: on <html>, or any container */
<html data-theme="dark">

/* Restyle by overriding tokens */
:root {
  --accent: var(--sapphire-500);
  --radius-md: 6px;
}

How it's built

1. hydroxy-statechart — the Machine trait: initial, transition and sync return state plus commands.
2. hydroxy-machines — one pure machine per component, with unit tests.
3. hydroxy-headless — connectors: ARIA attributes, data attributes and key mapping, as plain data.
4. hydroxy-leptos, hydroxy-dioxus — adapters that render the connector and run commands such as focus.
5. hydroxy-tokens, hydroxy-charts — the stylesheet, and chart scales and geometry.