Expand description
§Dioxus Components Library
Version: 0.1.1
A comprehensive collection of reusable Dioxus 0.7 components built with Tailwind CSS v4 and following Radix UI design patterns.
§Components (11 Total)
- Accordion - Vertically stacked interactive headings with reveal sections
- Avatar - User avatar display with image loading and fallback support
- Badge - Flexible badge component with multiple style variants
- Button - Versatile button with 6 variants and 6 size options
- Card - Flexible card container with header, content, and footer sections
- Checkbox - Three-state checkbox (checked/unchecked/indeterminate)
- Dialog - Accessible modal dialogs with overlay, focus trap, and keyboard handling
- Empty - Empty state component for “no content” scenarios
- Portal - Render content outside the parent DOM hierarchy (modals, overlays)
- Spinner - Loading indicator with multiple sizes and colors
- Tooltip - Hover-triggered tooltips with flexible positioning
§Quick Start
Add to your Cargo.toml:
[dependencies]
dioxus_components = "0.1.1"
dioxus = { version = "0.7.1", features = ["web"] }§Usage Example
use dioxus::prelude::*;
use dioxus_components::{Button, ButtonVariant, Spinner, SpinnerSize};
#[component]
fn App() -> Element {
rsx! {
div {
class: "flex gap-4",
Button {
variant: ButtonVariant::Default,
"Click me"
}
Spinner {
size: SpinnerSize::Large,
color: "text-primary"
}
}
}
}§Styling
All components use Tailwind CSS v4. Import the component styles in your tailwind.css:
For a complete example, see the examples/ directory.
Re-exports§
pub use components::accordion::Accordion;pub use components::accordion::AccordionContent;pub use components::accordion::AccordionItem;pub use components::accordion::AccordionOrientation;pub use components::accordion::AccordionTrigger;pub use components::accordion::AccordionType;pub use components::avatar::Avatar;pub use components::avatar::AvatarFallback;pub use components::avatar::AvatarImage;pub use components::avatar::ImageLoadingStatus;pub use components::badge::Badge;pub use components::badge::BadgeVariant;pub use components::button::Button;pub use components::button::ButtonSize;pub use components::button::ButtonVariant;pub use components::card::Card;pub use components::card::Card;pub use components::card::CardAction;pub use components::card::CardAction;pub use components::card::CardContent;pub use components::card::CardContent;pub use components::card::CardDescription;pub use components::card::CardDescription;pub use components::card::CardHeader;pub use components::card::CardHeader;pub use components::card::CardTitle;pub use components::card::CardTitle;pub use components::checkbox::Checkbox;pub use components::checkbox::CheckboxBubbleInput;pub use components::checkbox::CheckboxBubbleInput;pub use components::checkbox::CheckboxContext;pub use components::checkbox::CheckboxIndicator;pub use components::checkbox::CheckboxLabel;pub use components::checkbox::CheckboxProvider;pub use components::checkbox::CheckboxTrigger;pub use components::checkbox::CheckedState;pub use components::dialog::Dialog;pub use components::dialog::Dialog;pub use components::dialog::DialogClose;pub use components::dialog::DialogClose;pub use components::dialog::DialogContent;pub use components::dialog::DialogContent;pub use components::dialog::DialogDescription;pub use components::dialog::DialogDescription;pub use components::dialog::DialogOverlay;pub use components::dialog::DialogOverlay;pub use components::dialog::DialogTitle;pub use components::dialog::DialogTitle;pub use components::dialog::DialogTrigger;pub use components::dialog::DialogTrigger;pub use components::empty::Empty;pub use components::empty::Empty;pub use components::empty::EmptyContent;pub use components::empty::EmptyContent;pub use components::empty::EmptyDescription;pub use components::empty::EmptyDescription;pub use components::empty::EmptyHeader;pub use components::empty::EmptyHeader;pub use components::empty::EmptyMedia;pub use components::empty::EmptyMedia;pub use components::empty::EmptyMediaVariant;pub use components::empty::EmptyTitle;pub use components::empty::EmptyTitle;pub use components::portal::Portal;pub use components::spinner::Spinner;pub use components::spinner::SpinnerSize;pub use components::tooltip::Tooltip;pub use components::tooltip::TooltipArrow;pub use components::tooltip::TooltipContent;pub use components::tooltip::TooltipProvider;pub use components::tooltip::TooltipSide;pub use components::tooltip::TooltipTrigger;pub use utils::cn;