This is an experimental component library that ports Ant Design 6.0.0 to Dioxus using Vibe Coding. The library provides a comprehensive set of UI components with Ant Design's design language and patterns, adapted for Rust and the Dioxus framework.
This component library is an experimental port of Ant Design 6.0.0 to Dioxus, created using Vibe Coding. It aims to bring Ant Design's rich component ecosystem and design principles to the Rust ecosystem, enabling developers to build modern web applications with type-safe, performant Rust code.
Note: This is an experimental project. Some features may differ from the original Ant Design implementation, and the API may evolve as the project matures.
Components for structuring page layouts and organizing content.
- Layout - Page layout container with Header, Footer, Sider, and Content
- Grid - 24-column grid system for responsive layouts
- Flex - Flexible box layout component
- Space - Spacing component for arranging elements
- Divider - Divider line for separating content
- Splitter - Resizable split panes
- Masonry - Masonry layout for cards and items
Components for navigation and wayfinding.
- Menu - Navigation menu with horizontal and vertical modes
- Breadcrumb - Breadcrumb navigation
- Tabs - Tab navigation component
- Anchor - Anchor navigation for long pages
- Steps - Step indicator for processes
- Pagination - Pagination component
Components for data input and form controls.
- Input - Text input component
- TextArea - Multi-line text input
- Password - Password input with visibility toggle
- Search - Input with search button
- OTP - One-time password input
- InputNumber - Number input with stepper
- Select - Dropdown selector
- TreeSelect - Tree-structured selector
- Cascader - Cascading selector
- AutoComplete - Autocomplete input
- Mentions - Mentions input for @mentions
- DatePicker - Date picker
- TimePicker - Time picker
- Calendar - Calendar component
- ColorPicker - Color picker
- Upload - File upload component
- Rate - Rating component
- Switch - Switch toggle
- Checkbox - Checkbox input
- Radio - Radio button
- Slider - Slider input
Components for displaying data and content.
- Table - Data table with sorting, filtering, and pagination
- List - List component for displaying data
- Descriptions - Description list for key-value pairs
- Card - Card container component
- Collapse - Collapsible content panels
- Timeline - Timeline component
- Tree - Tree component
- Tag - Tag component for labels
- Badge - Badge for notifications and counts
- Avatar - Avatar component
- Empty - Empty state component
- Statistic - Statistic display component
- Progress - Progress indicator
- QRCode - QR code generator
- Image - Image component with preview
Components for user feedback and notifications.
- Alert - Alert message component
- Message - Global message notification
- Notification - Notification component
- Modal - Modal dialog
- Drawer - Drawer component
- Popconfirm - Popconfirm dialog
- Popover - Popover component
- Tooltip - Tooltip component
- Spin - Loading spinner
- Skeleton - Skeleton screen loading
- Result - Result page component
- Progress - Progress indicator
Additional utility and specialized components.
- Button - Button component
- FloatButton - Floating action button
- Icon - Icon component
- Typography - Typography components (Title, Text, Paragraph)
- Form - Form component with validation
- ConfigProvider - Global configuration provider
- App - App-level component and hooks
- Affix - Affix component for sticky positioning
- Watermark - Watermark component
- Tour - Tour component for onboarding
- Transfer - Transfer component for moving items
- Carousel - Carousel component
To use this component library in your Dioxus project, add it to your Cargo.toml:
[dependencies]
adui-dioxus = "0.1.1"Then import and use components:
use adui_dioxus::{Button, ButtonType, ThemeProvider};
fn app() -> Element {
rsx! {
ThemeProvider {
Button {
r#type: ButtonType::Primary,
"Click Me"
}
}
}
}Each component has its own documentation page with:
- Overview: Component purpose and functionality
- API Reference: Complete props, events, and methods documentation
- Usage Examples: Code examples for common use cases
- Use Cases: Typical scenarios where the component is used
- Differences from Ant Design 6.0.0: Key differences and limitations
Documentation is available in both English (default) and Chinese. Chinese documentation files are suffixed with _CN.md.
This is an experimental project. Contributions and feedback are welcome. Please refer to the main project repository for contribution guidelines.
This project is licensed under the MIT License. See the LICENSE file for details.