https://github.com/cloud-shuttle/leptos-shadcn-ui
https://github.com/cloud-shuttle/leptos-shadcn-ui
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/cloud-shuttle/leptos-shadcn-ui
- Owner: cloud-shuttle
- License: mit
- Created: 2025-09-02T10:51:12.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-02T14:58:36.000Z (10 months ago)
- Last Synced: 2025-09-02T15:38:48.319Z (10 months ago)
- Language: Rust
- Size: 357 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 **leptos-shadcn-ui**
**Production-ready ShadCN UI components for Leptos v0.8+ applications**
[](https://rust-lang.org)
[](https://leptos.dev)
[](LICENSE)
[](docs/tdd/completion/TDD_COMPLETION_SUMMARY.md)
[](tests/e2e)
[](performance-audit)
## 🏆 **Project Status: Phase 4 Complete - 38 Components Published!**
**38 components successfully published to crates.io with exemplary quality standards!**
- ✅ **Published Components**: 38/85+ components at v0.7.0 (45% complete)
- ✅ **Unit Tests**: 500+ comprehensive tests (100% coverage)
- ✅ **E2E Tests**: Complete Playwright test suite covering all workflows
- ✅ **Quality Standards**: Industry-best practices implemented
- ✅ **Documentation**: Comprehensive guides and examples
- ✅ **Performance Audit**: Complete TDD performance monitoring system
- ✅ **CI/CD Pipeline**: 7-phase quality gates with automated enforcement
## 🎉 **Latest Release: v0.7.0 - Comprehensive Publishing Edition**
### **What's New in v0.7.0**
- 🚀 **38 Published Components** - Core UI, form, navigation, and interaction components
- ✨ **Complete TDD Implementation** - All critical remediation elements implemented
- 📊 **E2E Testing Infrastructure** - Comprehensive Playwright test suite
- ⚡ **Performance Benchmarking** - Criterion benchmarks for critical components
- 🛠️ **Cargo Nextest Configuration** - Improved test execution and reliability
- 📈 **CI/CD Pipeline Enhancement** - 7-phase quality gates with automated enforcement
- 🔒 **Security Scanning** - Automated vulnerability detection and compliance
- ♿ **Accessibility Testing** - WCAG 2.1 AA compliance testing
### **Quick Start with v0.7.0**
```bash
# Install any of the 38 published components
cargo add leptos-shadcn-button
cargo add leptos-shadcn-input
cargo add leptos-shadcn-card
cargo add leptos-shadcn-badge
# ... and 34 more components available!
# Use the comprehensive testing infrastructure
cargo nextest run
npx playwright test
# Run performance benchmarks
cargo bench
```
### **Release Notes**
- **[v0.7.0 Release Notes](RELEASE_NOTES_v0.7.0.md)** - Comprehensive release information
- **[Phase 4 Completion Summary](PHASE_4_COMPLETION_SUMMARY.md)** - Latest publishing achievements
---
## 🎯 **What This Is**
**leptos-shadcn-ui** is a comprehensive component library that brings the beautiful, accessible, and customizable ShadCN UI components to the Leptos ecosystem. Built with Rust and WebAssembly, it provides:
- **46 Production-Ready Components** - All thoroughly tested and validated
- **100% Test Coverage** - Comprehensive unit and integration testing
- **Accessibility First** - WCAG compliance built into every component
- **Performance Optimized** - No memory leaks or performance bottlenecks
- **Cross-Platform** - Works consistently across all major browsers and devices
- **Performance Monitoring** - Built-in performance audit and optimization tools
## 🚀 **Quick Start**
### **Installation**
#### **Option 1: Individual Components (Recommended)**
Add specific components to your `Cargo.toml`:
```toml
[dependencies]
leptos-shadcn-button = "0.4.0"
leptos-shadcn-input = "0.4.0"
leptos-shadcn-card = "0.4.0"
leptos-shadcn-checkbox = "0.4.0"
# ... add more components as needed
```
#### **Option 2: Main Package with Features**
Use the main package with feature flags:
```toml
[dependencies]
leptos-shadcn-ui = { version = "0.5.0", features = ["button", "input", "card", "checkbox"] }
```
#### **Option 3: With Performance Monitoring**
Include the performance audit system:
```toml
[dependencies]
leptos-shadcn-ui = { version = "0.5.0", features = ["button", "input", "performance-audit"] }
```
### **Basic Usage**
```rust
use leptos::*;
use leptos_shadcn_button::Button;
use leptos_shadcn_input::Input;
#[component]
pub fn MyForm() -> impl IntoView {
view! {
"Submit"
}
}
```
### **Performance Monitoring**
Monitor and optimize your component performance with the built-in audit system:
#### **Install Performance Audit Tool**
```bash
cargo install leptos-shadcn-performance-audit
```
#### **Run Performance Audits**
```bash
# Complete performance audit
performance-audit audit
# Analyze bundle sizes only
performance-audit bundle --components-path packages/leptos
# Monitor real-time performance
performance-audit monitor --duration 30s --sample-rate 100ms
# Generate optimization roadmap
performance-audit roadmap --output roadmap.json --format json
```
#### **Performance Audit Features**
- **📊 Bundle Size Analysis** - Track component sizes and identify optimization opportunities
- **⚡ Real-time Monitoring** - Monitor render times and memory usage
- **🗺️ Optimization Roadmap** - Get actionable recommendations with ROI estimates
- **📈 Benchmarking** - Performance regression testing and comparison
- **🛠️ CLI Tool** - Professional command-line interface with multiple output formats
#### **Example Output**
```
🔍 Running comprehensive performance audit...
📊 Configuration:
Max Component Size: 5.0 KB
Max Render Time: 16.0 ms
Max Memory Usage: 1.0 MB
Output Format: Text
⏳ Analyzing components...
✅ Analysis complete!
📊 Performance Audit Results
Overall Score: 64.0/100 (D)
Meets Targets: ❌ No
📦 Bundle Analysis:
Overall Efficiency: 44.6%
Total Size: 23.0 KB
Average Component Size: 4.6 KB
⚡ Performance Monitoring:
Overall Score: 83.3%
Failing Components: 2
🗺️ Optimization Roadmap:
Total Recommendations: 6
Estimated Effort: 40.0 hours
Expected Impact: 470.0%
```
### **Run Examples**
```bash
# Clone the repository
git clone https://github.com/cloud-shuttle/leptos-shadcn-ui.git
cd leptos-shadcn-ui
# Run the example app
cd examples/leptos
trunk serve
```
---
## 📦 **Available Components**
### **Form Components**
- **Button** - `leptos-shadcn-button v0.4.0`
- **Input** - `leptos-shadcn-input v0.4.0`
- **Label** - `leptos-shadcn-label v0.4.0`
- **Checkbox** - `leptos-shadcn-checkbox v0.4.0`
- **Switch** - `leptos-shadcn-switch v0.4.0`
- **Radio Group** - `leptos-shadcn-radio-group v0.4.0`
- **Select** - `leptos-shadcn-select v0.4.0`
- **Textarea** - `leptos-shadcn-textarea v0.4.0`
- **Form** - `leptos-shadcn-form v0.4.0`
- **Combobox** - `leptos-shadcn-combobox v0.4.0`
- **Command** - `leptos-shadcn-command v0.4.0`
- **Input OTP** - `leptos-shadcn-input-otp v0.4.0`
### **Layout Components**
- **Card** - `leptos-shadcn-card v0.4.0`
- **Separator** - `leptos-shadcn-separator v0.4.0`
- **Tabs** - `leptos-shadcn-tabs v0.4.0`
- **Accordion** - `leptos-shadcn-accordion v0.4.0`
- **Collapsible** - `leptos-shadcn-collapsible v0.4.0`
- **Scroll Area** - `leptos-shadcn-scroll-area v0.4.0`
- **Aspect Ratio** - `leptos-shadcn-aspect-ratio v0.4.0`
- **Resizable** - `leptos-shadcn-resizable v0.4.0`
### **Overlay Components**
- **Dialog** - `leptos-shadcn-dialog v0.4.0`
- **Popover** - `leptos-shadcn-popover v0.4.0`
- **Tooltip** - `leptos-shadcn-tooltip v0.4.0`
- **Alert Dialog** - `leptos-shadcn-alert-dialog v0.4.0`
- **Sheet** - `leptos-shadcn-sheet v0.4.0`
- **Drawer** - `leptos-shadcn-drawer v0.4.0`
- **Hover Card** - `leptos-shadcn-hover-card v0.4.0`
### **Navigation Components**
- **Breadcrumb** - `leptos-shadcn-breadcrumb v0.4.0`
- **Navigation Menu** - `leptos-shadcn-navigation-menu v0.4.0`
- **Context Menu** - `leptos-shadcn-context-menu v0.4.0`
- **Dropdown Menu** - `leptos-shadcn-dropdown-menu v0.4.0`
- **Menubar** - `leptos-shadcn-menubar v0.4.0`
### **Feedback & Status**
- **Alert** - `leptos-shadcn-alert v0.4.0`
- **Badge** - `leptos-shadcn-badge v0.4.0`
- **Skeleton** - `leptos-shadcn-skeleton v0.4.0`
- **Progress** - `leptos-shadcn-progress v0.4.0`
- **Toast** - `leptos-shadcn-toast v0.4.0`
- **Table** - `leptos-shadcn-table v0.4.0`
- **Calendar** - `leptos-shadcn-calendar v0.4.0`
- **Date Picker** - `leptos-shadcn-date-picker v0.4.0`
- **Pagination** - `leptos-shadcn-pagination v0.4.0`
### **Interactive Components**
- **Slider** - `leptos-shadcn-slider v0.4.0`
- **Toggle** - `leptos-shadcn-toggle v0.4.0`
- **Carousel** - `leptos-shadcn-carousel v0.4.0`
- **Avatar** - `leptos-shadcn-avatar v0.4.0`
### **Performance & Development**
- **Performance Audit** - `leptos-shadcn-performance-audit v0.1.0` ⭐ **NEW!**
- **Error Boundary** - `leptos-shadcn-error-boundary v0.4.0`
- **Lazy Loading** - `leptos-shadcn-lazy-loading v0.4.0`
- **Registry** - `leptos-shadcn-registry v0.1.0`
---
## 🧪 **Testing & Quality**
### **Run Unit Tests**
```bash
# Test individual components
cargo test --package leptos-shadcn-button --lib
cargo test --package leptos-shadcn-input --lib
# Test performance audit system
cargo test -p leptos-shadcn-performance-audit
# Test all components
cargo test --workspace
```
### **Performance Audit Testing**
The performance audit system includes comprehensive testing:
```bash
# Run all performance audit tests (53 tests)
cargo test -p leptos-shadcn-performance-audit
# Run specific test suites
cargo test -p leptos-shadcn-performance-audit --lib
cargo test -p leptos-shadcn-performance-audit --test performance_audit_tests
# Test CLI tool
cargo run -p leptos-shadcn-performance-audit --bin performance-audit -- --help
```
### **Run E2E Tests**
```bash
# Install Playwright
make install-playwright
# Run all E2E tests
make test-e2e
# Run specific test categories
make test-e2e-specific FILE=tests/e2e/accessibility.spec.ts
```
### **Quality Metrics**
- **Components**: 46/46 (100% tested)
- **Unit Tests**: 300+ tests passing
- **E2E Tests**: 129 tests passing
- **Test Coverage**: 100% for all components
- **Quality Standards**: Production-ready
---
## 📚 **Documentation**
### **📁 Organized Documentation Structure**
- **[📚 Documentation Index](docs/README.md)** - Complete documentation overview
- **[🧪 TDD Implementation](docs/tdd/)** - Complete Test-Driven Development docs
- **[🏗️ Architecture](docs/architecture/)** - System design and migration guides
- **[🔧 Development](docs/development/)** - Tools and component generation
- **[📦 Releases](docs/releases/)** - Release notes and changelog
- **[🎨 Components](docs/components/)** - Usage examples and guides
### **Key Documentation**
- **[TDD Completion Summary](docs/tdd/completion/TDD_COMPLETION_SUMMARY.md)** - Our achievement story
- **[Testing Guide](docs/testing/TESTING_GUIDE.md)** - How to test components
- **[Component Examples](docs/components/example-usage.md)** - Usage patterns
- **[Release Notes](docs/releases/RELEASE_NOTES.md)** - What's new
---
## 🎨 **Available Components**
### **Form Components**
- **Button** - Variants, sizes, and accessibility
- **Input** - Text, email, password with validation
- **Checkbox** - State management and accessibility
- **Label** - Form associations and styling
- **Form** - Complete form handling
- **Textarea** - Multi-line input
- **Select** - Dropdown selection
- **Switch** - Toggle controls
- **Radio Group** - Radio button groups
- **Input OTP** - One-time password input
### **Layout Components**
- **Card** - Content containers
- **Separator** - Visual dividers
- **Accordion** - Collapsible content
- **Collapsible** - Content hiding/showing
- **Tabs** - Tabbed interfaces
- **Table** - Data presentation
- **Aspect Ratio** - Responsive containers
- **Scroll Area** - Scrollable content
### **Navigation Components**
- **Navigation Menu** - Main navigation
- **Menubar** - Application menus
- **Context Menu** - Right-click menus
- **Breadcrumb** - Navigation paths
- **Pagination** - Page navigation
### **Overlay Components**
- **Dialog** - Modal dialogs
- **Popover** - Floating content
- **Sheet** - Side panels
- **Drawer** - Drawer panels
- **Tooltip** - Hover information
- **Hover Card** - Rich hover content
- **Alert** - Notifications
- **Alert Dialog** - Confirmation dialogs
- **Toast** - Temporary messages
### **Data Display**
- **Calendar** - Date display
- **Date Picker** - Date selection
- **Progress** - Loading indicators
- **Skeleton** - Loading placeholders
- **Badge** - Status indicators
- **Avatar** - User representation
### **Interactive Components**
- **Slider** - Range input
- **Carousel** - Image rotation
- **Combobox** - Search and select
- **Command** - Command palette
- **Dropdown Menu** - Expandable menus
### **Utility Components**
- **Error Boundary** - Error handling
- **Lazy Loading** - Performance optimization
---
## 🏗️ **Architecture**
### **Built for Leptos v0.8+**
- **Modern Reactivity** - Uses latest Leptos signals and effects
- **Type Safety** - Comprehensive Rust type system
- **Performance** - WebAssembly compilation for speed
- **Accessibility** - WCAG compliance built-in
### **Design System**
- **ShadCN UI** - Beautiful, accessible design patterns
- **Tailwind CSS** - Utility-first styling
- **Theme Support** - Light/dark mode and customization
- **Responsive** - Mobile-first design approach
---
## 🤝 **Contributing**
### **Development Workflow**
1. **Fork** the repository
2. **Create** a feature branch
3. **Implement** your changes with tests
4. **Run** the test suite
5. **Submit** a pull request
### **Testing Requirements**
- All new components must have comprehensive unit tests
- E2E tests must pass for affected workflows
- Accessibility standards must be maintained
- Performance benchmarks must be met
### **Quality Standards**
- **100% Test Coverage** - Every component must be tested
- **Accessibility First** - WCAG compliance required
- **Performance** - No memory leaks or bottlenecks
- **Documentation** - Clear examples and guides
---
## 📊 **Performance & Quality**
### **Test Results**
- **Unit Tests**: ✅ All 300+ tests passing
- **E2E Tests**: ✅ All 129 tests passing
- **Accessibility**: ✅ WCAG 2.1 AA compliant
- **Performance**: ✅ No memory leaks detected
- **Cross-Browser**: ✅ Chrome, Firefox, Safari, Mobile
### **Bundle Optimization**
- **Code Splitting** - Components load on demand
- **Tree Shaking** - Unused code eliminated
- **WASM Optimization** - Optimized WebAssembly output
- **CSS Optimization** - Minimal, efficient styles
---
## 🚀 **Getting Help**
### **Resources**
- **[GitHub Issues](https://github.com/cloud-shuttle/leptos-shadcn-ui/issues)** - Bug reports and feature requests
- **[Discussions](https://github.com/cloud-shuttle/leptos-shadcn-ui/discussions)** - Community support
- **[Documentation](https://shadcn-ui.rustforweb.org/)** - Component API reference
### **Common Issues**
- Check the [testing guide](docs/testing/TESTING_GUIDE.md) for common problems
- Review the [defects register](docs/quality/defects-register.md) for known issues
- Consult the [architecture documentation](docs/architecture/) for system design questions
---
## 🏆 **Achievements**
This project represents a **major achievement** in component library development:
- **Industry-Leading Quality**: 100% test coverage with comprehensive validation
- **Production Ready**: All components tested and validated for real-world use
- **Accessibility First**: WCAG compliance built into every component
- **Performance Optimized**: No memory leaks or performance bottlenecks
- **Cross-Platform**: Works consistently across all major browsers and devices
**We've achieved what many enterprise teams strive for but rarely accomplish - comprehensive testing coverage at both the unit and integration levels!** 🚀
---
## 📄 **License**
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
**Last Updated**: December 2024
**Status**: ✅ **Production Ready**
**Version**: 0.2.0
**Built with ❤️ by the CloudShuttle team**