leptos-shadcn-ui/docs/feature-parity-design.md

Feature Parity Design: Rust shadcn/ui

Current State Analysis

✅ Existing Architecture

• Project Structure: Monorepo with framework-specific packages (Leptos, Yew)
• Registry System: Central registry for component metadata and CLI integration
• Theme Support: Default & New York style variants for each component
• CLI Tool: rust-shadcn for component installation and management

📊 Current Component Coverage

Leptos Framework (44 components - 86% complete):

• accordion, alert, alert-dialog, aspect-ratio, badge, breadcrumb, button, calendar, card, carousel, checkbox, collapsible, combobox, command, context-menu, date-picker, dialog, drawer, dropdown-menu, form, hover-card, input, input-otp, label, menubar, navigation-menu, pagination, popover, progress, radio-group, scroll-area, select, separator, sheet, skeleton, slider, switch, table, tabs, textarea, toast, toggle, tooltip, utils

Yew Framework (20 components - 39% complete):

• alert, aspect-ratio, avatar, badge, breadcrumb, button, card, checkbox, dialog, input, label, pagination, radio-group, select, separator, skeleton, switch, table, textarea, tooltip

Missing from both frameworks (7 components):

• avatar (Leptos only), data-table, chart, resizable, sidebar, sonner, typography

Missing from Yew (25 components):

• accordion, alert-dialog, calendar, carousel, collapsible, combobox, command, context-menu, date-picker, drawer, dropdown-menu, form, hover-card, input-otp, menubar, navigation-menu, popover, progress, scroll-area, sheet, slider, tabs, toast, toggle, utils

🎯 Feature Parity Architecture Design

Phase 1: Foundation Enhancement

Registry System Optimization

// Enhanced registry structure
pub struct ComponentRegistry {
    leptos: FrameworkRegistry,
    yew: FrameworkRegistry,
    dioxus: FrameworkRegistry,  // Future framework
}

pub struct FrameworkRegistry {
    components: HashMap<String, ComponentDef>,
    dependencies: DependencyGraph,
    theme_variants: ThemeRegistry,
}

Component Generation Pipeline

Source Definition → Framework Adapter → Theme Variants → Output Files

Phase 2: Systematic Component Implementation

Priority Matrix

tier_1_critical: [dialog, dropdown-menu, select, checkbox, radio-group]
tier_2_forms: [form, combobox, date-picker, textarea, input-otp] 
tier_3_navigation: [navigation-menu, menubar, tabs, breadcrumb]
tier_4_feedback: [toast, alert-dialog, progress, skeleton]
tier_5_layout: [sheet, resizable, scroll-area, collapsible]
tier_6_advanced: [data-table, chart, carousel, command]

Framework Parity Strategy

Yew (15) → Leptos (5) = 10 component gap
Target: Leptos reaches Yew parity + Both frameworks implement remaining 36 components

Phase 3: Advanced Features

Cross-Framework Compatibility Layer

pub trait ShadcnComponent {
    type Props;
    fn render(props: Self::Props) -> RenderedComponent;
    fn theme_variants() -> Vec<ThemeVariant>;
    fn dependencies() -> Vec<Dependency>;
}

Enhanced CLI Integration

# Enhanced command structure
rust-shadcn add <component> --framework <leptos|yew|dioxus>
rust-shadcn init --framework <framework> --theme <default|new-york>
rust-shadcn diff --component <name> --between <version1> <version2>
rust-shadcn sync --target-framework <framework>

🚀 Implementation Roadmap

Phase 1: Infrastructure (Weeks 1-2)

1. Registry Enhancement

   • Populate registry_ui.rs with component definitions
   • Implement dependency resolution system
   • Add theme variant management

2. Code Generation Pipeline

   • Template system for consistent component structure
   • Framework-specific adapters
   • Automated testing integration

Phase 2: Component Implementation (Weeks 3-8)

1. Leptos Parity (Week 3)

   • Port missing 10 components from Yew to Leptos
   • Ensure API consistency

2. Tier 1 Critical Components (Weeks 4-5)

   • dialog, dropdown-menu, select, checkbox, radio-group
   • Both frameworks simultaneously

3. Tier 2-6 Progressive Implementation (Weeks 6-8)

   • Form components → Navigation → Feedback → Layout → Advanced
   • Maintain framework parity throughout

Phase 3: Advanced Features (Weeks 9-10)

1. Cross-Framework Compatibility

   • Shared trait definitions
   • Component interoperability tests

2. Enhanced Tooling

   • CLI feature completion
   • Documentation generation
   • Migration utilities

📋 Technical Specifications

Component Structure Standard

// Each component package structure
src/
├── lib.rs          // Public API and framework integration
├── default.rs      // Default theme implementation  
├── new_york.rs     // New York theme implementation
└── types.rs        // Shared types and props

Dependency Management

# Standardized dependency patterns
[dependencies]
framework-core = { version = "0.7", features = ["web"] }
framework-dom = "0.7"
web-sys = "0.3"
wasm-bindgen = "0.2"

[dev-dependencies] 
wasm-bindgen-test = "0.3"

Quality Assurance Framework

• Component Testing: Unit tests for each variant
• Cross-Browser Testing: WASM compatibility validation
• Theme Consistency: Automated style verification
• API Compatibility: Framework-agnostic interface validation

🎨 Design Principles

Consistency

• Identical API surface across frameworks
• Matching visual output between themes
• Unified documentation and examples

Performance

• Minimal WASM bundle sizes
• Efficient DOM updates
• Lazy loading capabilities

Developer Experience

• Clear migration paths between frameworks
• Comprehensive documentation
• Interactive examples and demos