Docs

Build with dioxus-components

dioxus-components is a collection of styled, accessible Dioxus components designed to be copied into your app. Use the CLI when you want the fastest path, or copy the source when you want complete ownership.

How it works

dioxus-components is not yet on crates.io. For now, components ship from this Git repository — you point your app at the primitives library here, then pull individual styled components into your source tree with the Dioxus CLI.

Start by adding the underlying primitives library to your app's Cargo.toml from the Git path:

dioxus-primitives = { git = "https://github.com/DioxusLabs/components" }

The styled components live in this same repository as a registry. The dx components subcommand of the Dioxus CLI is what reads from it. To see everything that's available:

dx components list

Then add a specific component to your app — swap button for any name from the list:

dx components add button

Each dx components add copies the component's Rust source and its stylesheet directly into your project. Once it's in your tree, the code is yours: keep the included CSS as-is, replace the class names with Tailwind utilities, or rewrite the styles from scratch. There is no runtime dependency on this registry after the copy.

Add a component

Run the add command from your Dioxus app. Swap the final name for any component in the sidebar.

dx components add button

If you do not have the Dioxus CLI yet, install it once with cargo install dioxus-cli.

Recommended workflow

  1. Pick a component from the sidebar or catalog.
  2. Preview the default example and variants.
  3. Run the CLI command shown on the component page.
  4. Customize the generated Rust and CSS to fit your app.