dioxus-componentsbeautiful, accessible, responsive components for dioxus apps

Dioxus components by the Dioxus team. Browse the catalog, copy the CLI command, and pull only what you need into your project. Thoughtfully designed with powerful accessibility features.

get started
$dx components list
Showcase

Sample interfaces

Live, interactive UI blocks composed from the primitives below. Use your keyboard to test the accessibility interactions.

Welcome back

Sign in to your workspace.

Forgot?
Avery LinAL
Avery Lin
@averylin

Building UI primitives that ship to web, desktop, and mobile. Mostly Rust, mostly weekends.

RustWebAssemblyUI

Active users · 30d

24,815+12.4%

On track for the 36k Q2 target.

Inbox

3 new conversations.

3
Sarah ChenS
Sarah Chen

Left 3 comments on the auth flow

2m

Marcus WrightM
Marcus Wright

Roadmap sync notes attached

1h

Lena ParkL
Lena Park

Refactored the sidebar layout

4h

Launch priorities

Drag to reorder — top is highest priority.

4 active
Press Enter to start reordering. Use Arrow keys to change position. Press Enter to confirm or Escape to cancel.
  • Ship Q2 product roadmap
    LNC-128Today
    ALAL
  • Redesign onboarding flow
    LNC-142Apr 24
    CPCP
  • Audit payment webhook logs
    LNC-147Apr 29
    RHRH
  • Draft changelog for v2.4
    LNC-151May 02
    ALAL

Notifications

Pick what we ping you about.

CommentsReplies on your posts
MentionsWhen someone @'s you
Weekly digestA Monday morning recap
Product updatesNew features and releases
Midnight City album art

Midnight City

M83 · Hurry Up, We're Dreaming

1:243:32

Switch workspace

Jump between projects your team owns.

Avery LinAL
Reply to roadmap threadPosting as @averylin · #product

Team

Most popular
$12/ seat / mo

Everything in Pro, plus shared workspaces and audit logs.

  • Unlimited projects
  • Role-based access
  • SSO + SAML
  • Priority support

Filter results

Narrow down what's shown below.

Status
Tags

Theme accent

Tune the accent that shows up across the workspace.

Workspace

Team activity at a glance.

Avery LinAL
Avery Lin
Eng lead
Casey ParkCP
Casey Park
Design
Robin HayesRH
Robin Hayes
PM

Schedule

Pick a day for the standup.

Mar 2026
May2026
Catalog

All components

Every primitive in the library, with live previews and a copy-paste install command for each one.

accordion

An accordion component for displaying collapsible content sections.

dx components add accordion

alert dialog

An alert dialog component for displaying important messages and requiring user confirmation.

dx components add alert_dialog

aspect ratio

An aspect ratio component for maintaining a consistent width-to-height ratio of an element.

dx components add aspect_ratio

avatar

An avatar component for displaying user profile images or initials.

dx components add avatar

Basic Usage

User avatarEA

Rounded

User avatarEA

Loading

Error State

Invalid imageJK

Large Size

Large avatarDX

badge

A small label to display status or categorization

dx components add badge
PrimarySecondaryDestructiveOutlineVerified

button

A button component for triggering actions or events when clicked.

dx components add button

calendar

A calendar grid component for selecting dates.

dx components add calendar
May2026

card

A simple card component

dx components add card
Login to your account
Enter your email below to login to your account

checkbox

A togglable checkbox component.

dx components add checkbox

collapsible

A collapsible component for showing and hiding content sections.

dx components add collapsible
Added a new feature to the collapsible component

color picker

Allows to select a color using a variety of input methods

dx components add color_picker

combobox

An autocomplete input + popover for picking a value from a filterable list of options.

dx components add combobox

context menu

A context menu component for displaying a list of actions or option after right clicking an area.

dx components add context_menu

date picker

A date picker component to select or input dates.

dx components add date_picker
YYYYMMDD

dialog

A dialog component for displaying modal content.

dx components add dialog

drag and drop list

Allows users to create vertically sortable lists supporting drag and drop, touch or keyboard input.

dx components add drag_and_drop_list

Launch priorities

Drag to reorder - top is highest priority

6 active
Press Enter to start reordering. Use Arrow keys to change position. Press Enter to confirm or Escape to cancel.
  • Ship Q2 product roadmap
    LNC-128In progressToday
    Assigned to JSJS
  • Redesign onboarding flow
    LNC-142In reviewApr 24
    Assigned to MPMP
  • Audit payment webhook logs
    LNC-147In progressApr 29
    Assigned to KTKT
  • Draft changelog for v2.4
    LNC-151To doMay 02
    Assigned to ARAR
  • Migrate analytics to ClickHouse
    LNC-156BlockedMay 05
    Assigned to DLDL
  • Archive legacy API endpoints
    LNC-160BacklogLater
    Assigned to SCSC

dropdown menu

A dropdown menu component for selecting options from a list.

dx components add dropdown_menu

hover card

A hover card component for displaying additional information on hover.

dx components add hover_card
Dioxus

input

An input field component for user text entry.

dx components add input

label

An accessible label component for form elements.

dx components add label

menubar

A menubar component for a collection of menu items.

dx components add menubar

navbar

A navbar component for navigation between pages.

dx components add navbar

popover

A popover component for colapsible content.

dx components add popover

progress

An accessable progress bar indicator.

dx components add progress

radio group

A group of radio buttons for selecting one option from a set.

dx components add radio_group

scroll area

A scrollable area component.

dx components add scroll_area

Scrollable content item 1

Scrollable content item 2

Scrollable content item 3

Scrollable content item 4

Scrollable content item 5

Scrollable content item 6

Scrollable content item 7

Scrollable content item 8

Scrollable content item 9

Scrollable content item 10

Scrollable content item 11

Scrollable content item 12

Scrollable content item 13

Scrollable content item 14

Scrollable content item 15

Scrollable content item 16

Scrollable content item 17

Scrollable content item 18

Scrollable content item 19

Scrollable content item 20

select

A select dropdown component with typeahead support.

dx components add select

separator

A visual separator between different sections of the page.

dx components add separator
One thing
Another thing

sheet

A sheet component as an edge panel that complements the main content

dx components add sheet

sidebar

A sidebar component as a vertical interface panel fixed to the screen edge, enable quick access to different sections of an application

dx components add sidebar
Open full preview

skeleton

A placeholder component for all loading elements.

dx components add skeleton

slider

An accessable slider component.

dx components add slider
50%

switch

A togglable switch component.

dx components add switch

tabs

A tabbed interface component.

dx components add tabs
Tab 1 Content

table of contents

A table of contents that highlights the active heading while scrolling.

dx components add table_of_contents

Overview

The table of contents tracks headings in this document and updates the active link while the scroll container moves through long-form content.

This preview keeps the navigation pinned in view so you can verify that the highlighted entry changes as each heading crosses the configured offset.

Installation

Render the table of contents beside the article and provide initial heading data so server rendering and the hydrated client show the same navigation structure.

The preview intentionally includes enough copy to force scrolling, making it easier to validate active heading transitions instead of relying on a static layout.

Configuration

Use the selector to scope which headings participate and choose a scroll host when the document uses an internal panel instead of the browser window.

Indentation in the rendered list reflects heading depth, so a mix of h2, h3, and h4 entries is useful when checking hierarchy.

Offsets

Offset tuning decides when a heading becomes active. In this demo the active item flips before the heading reaches the top edge, which keeps the label change readable during slower scrolling.

API

The primitive exposes initial data, selector configuration, a scroll host, and a reinitialize callback for dynamic documents that add or remove headings after first render.

The active state is still index-based in the core primitive. This preview only improves the surrounding layout and visual feedback.

Reinitialization

Call reinitialize after heading content changes so the hook can rescan the document and keep the table of contents aligned with the rendered article.

Styling

Inactive items should stay readable but subdued. The active item needs stronger contrast, a clearer accent, and preserved indentation so the current heading stands out immediately.

Keeping the navigation sticky inside the scroll region lets the preview demonstrate both hierarchy and scroll-spy feedback in one compact example.

Accessibility

Consistent heading order and stable ids help keyboard users and assistive technology users move between the article and its generated navigation.

Usage Notes

Scroll through this panel to watch the highlighted entry move from section to section. The demo now includes enough vertical space for the active item to change several times before the end of the document.

If you swap in your own content, keep a similar amount of spacing and section depth so the preview continues to exercise the component meaningfully.

textarea

a textarea component used to allow users to enter multi-line text input

dx components add textarea

Description here: sample text

toast

A toast notification component.

dx components add toast

toggle

A simple toggle button component.

dx components add toggle

toggle group

A group of toggle buttons for selecting one or more options from a set.

dx components add toggle_group

toolbar

A toolbar component for grouping related inputs.

dx components add toolbar

This is a sample text that will be formatted according to the toolbar buttons you click. Try clicking the buttons above to see how the text formatting changes.

tooltip

A tooltip component for additional information on hover or focus.

dx components add tooltip
Rich content

virtual list

A virtualized list component for large datasets.

dx components add virtual_list

Scroll this page to verify virtualized rendering with dynamic row heights.