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

A short callout for a status, warning, or tip.

dx components add alert

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

breadcrumb

A trail of links showing the current page's place in a hierarchy.

dx components add breadcrumb

button

A button component for triggering actions or events when clicked.

dx components add button

button group

Groups a row (or column) of buttons so their borders merge into one control.

dx components add button_group

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

carousel

A slideshow you page through with prev/next buttons, arrow keys, or by dragging/scrolling the track.

dx components add carousel

chart

A themed, data-driven SVG chart (area, bar, line) with tooltip, legend, and an accessible hidden data table.

dx components add chart
Visitors
Total visitors for the selected range
Visitors by day, desktop and mobileAprAprAprAprMayMayMayMayJunJunJunJun
Visitors by day, desktop and mobile
DateDesktopMobile
Apr 2236190
Apr 3250191
Apr 4264189
Apr 5277186
Apr 6289181
Apr 7301174
Apr 8312165
Apr 9322156
Apr 10330145
Apr 11338134
Apr 12344122
Apr 13349111
Apr 14353100
Apr 1535590
Apr 1635580
Apr 1735473
Apr 1835266
Apr 1934862
Apr 2034359
Apr 2133758
Apr 2233059
Apr 2332163
Apr 2431268
Apr 2530175
Apr 2629083
Apr 2727993
Apr 28267104
Apr 29255116
Apr 30242128
May 1230140
May 2218152
May 3206164
May 4195174
May 5185184
May 6175192
May 7167198
May 8159202
May 9153205
May 10148205
May 11144204
May 12141200
May 13140195
May 14141188
May 15143180
May 16146170
May 17151159
May 18157148
May 19164137
May 20173125
May 21182114
May 22193104
May 2320595
May 2421787
May 2523081
May 2624476
May 2725873
May 2827273
May 2928674
May 3030077
May 3131383
Jun 132790
Jun 233998
Jun 3351108
Jun 4362119
Jun 5372131
Jun 6381143
Jun 7389155
Jun 8395167
Jun 9400179
Jun 10404189
Jun 11406199
Jun 12407207
Jun 13406213
Jun 14404217
Jun 15400220
Jun 16395220
Jun 17389219
Jun 18382215
Jun 19374210
Jun 20364203
Jun 21354194
Jun 22343184
Jun 23332174
Jun 24320163
Jun 25307151
Jun 26295140
Jun 27283129
Jun 28271118
Jun 29259109
Jun 30248102
  • Desktop
  • Mobile

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

command

A filterable command palette, typically opened in a modal dialog, for quickly finding and running actions.

dx components add command

context menu

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

dx components add context_menu

data table

A composition pattern for sortable, filterable, paginated tables with row selection.

dx components add data_table
IDStatus
PMT-03Successalexandra@example.com$837.00
PMT-02Processingcarmella@example.com$242.00
PMT-06Successderek@example.com$120.00
PMT-12Successfelix@example.com$289.00
PMT-08Processinghannah@example.com$75.00
0 of 12 row(s) selected.
Page 1 of 3

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

drawer

A drawer component -- a Vaul-style sheet with drag-to-dismiss, sliding in from an edge of the screen

dx components add drawer

dropdown menu

A dropdown menu component for selecting options from a list.

dx components add dropdown_menu

empty

A placeholder for content that hasn't loaded, doesn't exist, or was filtered to nothing.

dx components add empty
No messages yet
You don't have any messages. Start a conversation to see it here.

field

Lays out a label, control, and description/error text together for a form field.

dx components add field
Profile

This is your public display name.

Receive emails about new products and features.

Vertical on narrow screens, horizontal from 640px up.

form

A real HTML form pairing Checkbox, Switch, RadioGroup, and Select with native reference controls for form-conformance testing.

dx components add form

Entry list

Every row pairs this library's control with a native reference control sharing a parallel name. Submitting prevents navigation, builds new FormData(form), and renders one name=value line per entry, in insertion order, below.

Plan (library radio group)
Plan (native reference)
Fruit (library select)
Required blocking
Demonstrates that required controls block submission: submitting with any required control unsatisfied refuses to submit, outlines the offending control(s) in red and moves focus to the first one, and lists their names below.
Every library control below sets required per its documented API, including Select -- see docs/plan.md Phase 1.3. Blocked submits fire invalid on the offending controls, listed below in insertion order.
Tier, required (library radio group)
Tier, required (native reference)
Fruit, required (library select)
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
input group
Wraps an input with leading/trailing icons, buttons, or static text inside one bordered control.
dx components add input_group
$
input otp
A one-time-passcode entry control: single-character boxes backed by one real input.
dx components add input_otp
Value: 
kbd
Displays a keyboard key or shortcut.
dx components add kbd
CtrlB
Press ⌘K to open the command palette.
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
native select
A styled native <select>, for when the platform's own picker is preferable to a custom listbox.
dx components add native_select
Selected: apple
navigation menu
A collection of links and disclosure panels for site navigation.
dx components add navigation_menu
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
resizable
Panel groups with draggable, keyboard-operable resize handles.
dx components add resizable
Sidebar
Top
Content
Collapsible Panel
Content
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
Side
Collapse
skeleton
A placeholder component for all loading elements.
dx components add skeleton
slider
An accessable slider component.
dx components add slider
50%
spinner
A continuously rotating loading indicator.
dx components add spinner
switch
A togglable switch component.
dx components add switch
table
A responsive table for displaying tabular data.
dx components add table
A list of your recent invoices.
InvoiceStatusMethodAmount
INV001PaidCredit Card$250.00
INV002PendingPayPal$150.00
INV003UnpaidBank Transfer$350.00
INV004PaidCredit Card$450.00
INV005PaidPayPal$550.00
INV006PendingBank Transfer$200.00
Total$1,950.00
tabs
A tabbed interface component.
dx components add tabs
Tab 1 Content
tag group
A focusable group of tags (labels, categories, filters and similar items).
dx components add tag_group
Labels
bug
feature
core
desktop
example
duplicate
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.