Dioxus Components Library

A comprehensive collection of reusable Dioxus 0.7 components built with Tailwind CSS v4 and following Radix UI design patterns.

Features

✨ 10 High-Quality Components

🎯 Accordion - Collapsible sections with single/multiple modes
👤 Avatar - User avatars with image loading and fallback support
🏷️ Badge - Flexible badges with 4 style variants
🔘 Button - Versatile buttons with 6 variants and 6 sizes
🃏 Card - Flexible card container with header, content, and footer sections
💬 Dialog - Accessible modal dialogs with overlay and keyboard handling
📭 Empty - Empty state component for "no content" scenarios
🌀 Portal - Render content outside the parent DOM hierarchy
⏳ Spinner - Loading indicators with multiple sizes and colors
💬 Tooltip - Hover-triggered tooltips with flexible positioning

🎨 Styling

Built with Tailwind CSS v4 for consistent, utility-first styling
Dark mode support on all components
Customizable through Tailwind theme configuration
Responsive design patterns built-in

♿ Accessibility

WAI-ARIA compliant
Keyboard navigation support
Screen reader friendly
Focus management

Installation

Add to your Cargo.toml:

[dependencies]
dioxus_components = "0.1"
dioxus = { version = "0.7.1", features = ["web"] }

Or add with cargo:

cargo add dioxus_components

Quick Start

Basic Component Usage

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"
            }
        }
    }
}

Components Included

Accordion - Collapsible sections with single/multiple modes
Avatar - User avatars with image loading and fallback
Badge - Small decorative labels with 4 variants
Button - Versatile buttons with 6 variants and 6 sizes
Card - Flexible card container with header, content, and footer sections
Dialog - Modal dialogs with overlay, focus management, and keyboard controls
Empty - Empty state component for "no content" scenarios
Portal - Render content to different DOM locations (modals, overlays)
Spinner - Loading indicators with multiple sizes
Tooltip - Hover-triggered tooltips with positioning

See COMPONENTS.md for detailed documentation and API references for all components.

Running the Demo

Build the library:

cargo build --lib

Run the demo application:

dx serve --example demo

This will start a development server with hot reloading and open the demo in your browser.

Deploy to Vercel

Deploy the demo to Vercel in 3 steps:

Push to GitHub:
```
git push origin main
```
Import to Vercel:
- Go to vercel.com/new
- Import your repository
- Vercel will auto-detect vercel.json
Deploy:
- Click "Deploy" and wait ~5-10 minutes
- Your demo will be live at https://your-project.vercel.app

See DEPLOYMENT.md for detailed deployment instructions and alternative methods.

Project Structure

src/
├── lib.rs                 # Library entry point
├── components/            # All reusable components
│   ├── accordion/
│   ├── avatar/
│   ├── badge/
│   ├── button/
│   ├── card/
│   ├── dialog/
│   ├── empty/            # NEW: Empty component
│   ├── portal/
│   ├── spinner/
│   └── tooltip/
└── utils/                 # Utility functions

examples/
└── demo.rs               # Demo application

COMPONENTS.md             # Full component documentation

Building as a Library

This project is configured as a Rust library that can be:

Used as a dependency in other Dioxus projects
Published to crates.io ✅ Now published!
Used locally via path dependencies

Library Exports

The library exports all components and utilities:

pub use dioxus_components::{
    Accordion, AccordionItem, AccordionTrigger, AccordionContent,
    Avatar, AvatarImage, AvatarFallback,
    Badge, BadgeVariant,
    Button, ButtonVariant, ButtonSize,
    Portal, // NEW: Portal component
    Spinner, SpinnerSize,
    Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,
    cn, // utility function
};

Published on Crates.io

This library is published and available on crates.io.

Install it in your project:

cargo add dioxus_components

Or manually add to Cargo.toml:

[dependencies]
dioxus_components = "0.1"

Customization

Theme Colors

Update colors in your tailwind.css:

@theme {
  --color-primary: hsl(221.2 83.2% 53.3%);
  --color-secondary: hsl(210 40% 96.1%);
  --color-destructive: hsl(0 84.2% 60.2%);
}

Custom Styling

All components support the class prop:

Button {
    class: "rounded-full px-6 py-3 text-lg",
    "Custom button"
}

Development