radix-leptos 0.8.4

Accessible, unstyled UI primitives for Leptos
Documentation

Radix-Leptos

Accessible, unstyled UI primitives for Leptos - High-performance, accessible UI components with 538KB optimized WASM bundle.

Overview

Radix-Leptos is a comprehensive UI component library for Leptos that provides accessible, unstyled primitives for building modern web applications. It's a Rust port of the popular Radix UI library, designed specifically for the Leptos framework.

Features

  • 🎯 40+ Components: Comprehensive set of UI primitives
  • ♿ Accessible: WCAG 2.1 AA compliant with proper ARIA attributes
  • 🎨 Unstyled: Clean, semantic HTML without opinionated styling
  • ⚡ Performant: 538KB optimized WASM bundle, <400KB target
  • 🧪 Well Tested: 1,768 tests covering unit, integration, and accessibility
  • 🔧 Composable: Components designed to work together seamlessly
  • 🎨 Themable: CSS custom properties and theme system
  • 📱 Responsive: Mobile-first design with responsive utilities

Quick Start

Add to your Cargo.toml:

[dependencies]
radix-leptos = "0.8.3"
leptos = "0.8.8"

Basic usage:

use leptos::*;
use radix_leptos::*;

#[component]
fn App(cx: Scope) -> impl IntoView {
    let (count, set_count) = create_signal(cx, 0);
    
    view! { cx,
        <div>
            <Button 
                variant=ButtonVariant::Primary
                on_click=Callback::new(move |_| set_count.update(|c| *c += 1))
            >
                "Count: " {count}
            </Button>
        </div>
    }
}

Component Categories

Form Controls

  • Button: Interactive buttons with multiple variants
  • Checkbox: Accessible checkboxes with indeterminate state
  • Switch: Toggle switches
  • Slider: Range inputs with keyboard support
  • Select: Dropdown selections with search
  • RadioGroup: Radio button groups
  • Input: Text inputs with validation
  • Textarea: Multi-line text inputs

Layout & Navigation

  • Dialog: Modal dialogs with focus management
  • Sheet: Slide-out panels
  • AlertDialog: Confirmation and alert dialogs
  • Tabs: Tabbed interfaces with keyboard navigation
  • Accordion: Collapsible content sections
  • DropdownMenu: Contextual menu systems
  • Tooltip: Hover and focus tooltips
  • Popover: Floating content containers

Data Display

  • Card: Content containers with header, body, footer
  • Badge: Status and notification badges
  • Avatar: User profile images with fallbacks
  • Progress: Progress indicators
  • Skeleton: Loading placeholders
  • Separator: Visual content dividers

Advanced Components

  • Calendar: Date pickers with keyboard navigation
  • DatePicker: Date selection components
  • TimePicker: Time selection components
  • TreeView: Hierarchical data display
  • Carousel: Image and content carousels
  • Toast: Notification system
  • Form: Form validation and submission

Theming

Radix-Leptos includes a powerful theming system:

use radix_leptos::theming::*;

#[component]
fn ThemedApp(cx: Scope) -> impl IntoView {
    view! { cx,
        <ThemeProvider theme=light_theme>
            <Button variant=ButtonVariant::Primary>
                "Themed Button"
            </Button>
        </ThemeProvider>
    }
}

Accessibility

Every component is built with accessibility as a first-class citizen:

  • Keyboard Navigation: Full keyboard support for all interactive elements
  • Screen Reader Support: Proper ARIA attributes and semantic HTML
  • Focus Management: Logical focus flow and focus trapping
  • Color Contrast: WCAG 2.1 AA compliant color schemes
  • Motion Preferences: Respects user's motion preferences

Testing

The library includes comprehensive test coverage:

  • 1,768 Tests: Unit, integration, and accessibility tests
  • WCAG Compliance: Automated accessibility testing
  • Property-Based Testing: Edge case validation
  • Performance Testing: Bundle size and build time monitoring

Run tests:

cargo test

Performance

  • Bundle Size: 538KB optimized WASM bundle (target: <400KB)
  • Build Time: Optimized compilation profiles
  • Runtime Performance: Efficient rendering and state management
  • Tree Shaking: Only include components you use

Examples

Check out the examples directory for comprehensive usage examples:

  • Component showcases
  • Interactive demos
  • Theming examples
  • Accessibility demonstrations

Documentation

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.

Acknowledgments