Leptos ShadCN UI Components

A comprehensive collection of beautiful, accessible UI components built for Leptos v0.8+, inspired by shadcn/ui.

⚠️ IMPORTANT: This project requires Leptos v0.8+ and is NOT compatible with earlier versions.

🚨 Version Requirements

Leptos v0.8+ is MANDATORY for this project.

• ✅ Supported: Leptos v0.8.0, v0.8.1, v0.8.2, v0.8.3, v0.8.4, v0.8.5, v0.8.6, v0.8.7, v0.8.8+
• ❌ NOT Supported: Leptos v0.7.x, v0.6.x, or any earlier versions
• 🔄 Future: Will continue to support the latest Leptos v0.8.x releases

Why v0.8+? This project leverages breaking changes and new features introduced in Leptos v0.8, including improved view macros, better type safety, and enhanced performance.

🚀 Features

• Leptos v0.8+ Required: Built specifically for Leptos v0.8+ and NOT compatible with earlier versions
• ShadCN UI Design: Follows the same design principles and styling as shadcn/ui
• TypeScript Definitions: Full TypeScript support for better developer experience
• Accessibility First: All components follow accessibility best practices
• Customizable: Easy to customize with Tailwind CSS classes
• Lightweight: Only includes the components you need

📦 Available Components

✅ Core Components (Fully Implemented - 52 Packages!)

• Form Components: Button, Input, Label, Checkbox, Switch, Radio Group, Select, Textarea, Form
• Layout Components: Card, Separator, Skeleton, Tabs, Accordion, Collapsible, Aspect Ratio
• Navigation: Breadcrumb, Navigation Menu, Pagination, Tabs
• Feedback: Alert, Alert Dialog, Progress, Toast, Skeleton
• Overlay: Dialog, Popover, Tooltip, Sheet, Drawer, Hover Card
• Data Display: Table, Badge, Calendar, Date Picker
• Input: Input OTP, Slider, Toggle, Combobox, Command
• Utilities: Utils, Registry, Error Boundary, Lazy Loading
• Advanced: Context Menu, Dropdown Menu, Menubar, Scroll Area

All 52 packages are fully tested and working with Leptos v0.8.8!

🛠️ Installation

1. Verify Leptos Version

CRITICAL: Ensure your project uses Leptos v0.8+:

[dependencies]
leptos = "0.8.0"  # Must be 0.8.0 or higher
leptos_router = "0.8.0"  # Must be 0.8.0 or higher

2. Add Components to your Cargo.toml

[dependencies]
shadcn-ui-leptos-button = { path = "path/to/leptos-shadcn-ui/packages/leptos/button" }
shadcn-ui-leptos-input = { path = "path/to/leptos-shadcn-ui/packages/leptos/input" }
shadcn-ui-leptos-card = { path = "path/to/leptos-shadcn-ui/packages/leptos/card" }
shadcn-ui-leptos-alert = { path = "path/to/leptos-shadcn-ui/packages/leptos/alert" }
shadcn-ui-leptos-label = { path = "path/to/leptos-shadcn-ui/packages/leptos/label" }
shadcn-ui-leptos-separator = { path = "path/to/leptos-shadcn-ui/packages/leptos/separator" }

2. Import and use in your Leptos components

use leptos::*;
use shadcn_ui_leptos_button::{Button, ButtonVariant, ButtonSize};
use shadcn_ui_leptos_input::Input;
use shadcn_ui_leptos_card::{Card, CardHeader, CardTitle, CardContent};

#[component]
pub fn MyComponent() -> impl IntoView {
    view! {
        <Card>
            <CardHeader>
                <CardTitle>"Welcome"</CardTitle>
            </CardHeader>
            <CardContent>
                <div class="space-y-4">
                    <Input placeholder="Enter your name" />
                    <Button variant=ButtonVariant::Default>"Submit"</Button>
                </div>
            </CardContent>
        </Card>
    }
}

🎨 Usage Examples

Button Component

// Different variants
<Button variant=ButtonVariant::Default>"Default"</Button>
<Button variant=ButtonVariant::Destructive>"Delete"</Button>
<Button variant=ButtonVariant::Outline>"Outline"</Button>
<Button variant=ButtonVariant::Secondary>"Secondary"</Button>
<Button variant=ButtonVariant::Ghost>"Ghost"</Button>
<Button variant=ButtonVariant::Link>"Link"</Button>

// Different sizes
<Button size=ButtonSize::Sm>"Small"</Button>
<Button size=ButtonSize::Default>"Default"</Button>
<Button size=ButtonSize::Lg>"Large"</Button>
<Button size=ButtonSize::Icon>"🔍"</Button>

Input Component

<Input
    placeholder="Type something..."
    input_type="email"
    value=Signal::derive(move || input_value.get())
    on_change=Callback::new(move |value| set_input_value.set(value))
/>

Card Component

<Card>
    <CardHeader>
        <CardTitle>"Card Title"</CardTitle>
        <CardDescription>"Card description goes here"</CardDescription>
    </CardHeader>
    <CardContent>
        <p>"Your content here"</p>
    </CardContent>
</Card>

Alert Component

<Alert variant=AlertVariant::Default>
    <AlertTitle>"Information"</AlertTitle>
    <AlertDescription>"This is an informational message."</AlertDescription>
</Alert>

<Alert variant=AlertVariant::Destructive>
    <AlertTitle>"Error"</AlertTitle>
    <AlertDescription>"Something went wrong."</AlertDescription>
</Alert>

🎯 Demo

Check out the live demo in the examples/leptos directory. To run it:

cd examples/leptos
cargo run

The demo showcases all available components with interactive examples and usage patterns.

🏗️ Project Structure

leptos-shadcn-ui/
├── packages/
│   ├── leptos/           # Leptos-specific components
│   │   ├── button/       # Button component
│   │   ├── input/        # Input component
│   │   ├── card/         # Card component
│   │   ├── alert/        # Alert component
│   │   ├── label/        # Label component
│   │   └── separator/    # Separator component
│   ├── registry/         # Component registry
│   ├── shadcn/           # Core shadcn utilities
│   └── test-utils/       # Testing utilities
├── examples/
│   └── leptos/           # Leptos demo application
└── docs/                 # Documentation

🔧 Development

Prerequisites

• Rust 1.70+
• Leptos v0.8+ (REQUIRED - no earlier versions supported)
• Node.js (for Tailwind CSS)

Building

# Build all packages
cargo build --workspace

# Build specific package
cargo build -p shadcn-ui-leptos-button

# Run tests
cargo test --workspace

Adding New Components

1. Create a new package in packages/leptos/
2. Follow the existing component structure
3. Add to the workspace in Cargo.toml
4. Update the demo application
5. Add TypeScript definitions

🎨 Styling

All components use Tailwind CSS for styling. The design system follows shadcn/ui conventions:

• Colors: Semantic color tokens (primary, secondary, destructive, etc.)
• Spacing: Consistent spacing scale
• Typography: Standard font sizes and weights
• Borders: Consistent border radius and styles
• Shadows: Subtle shadows for depth

🤝 Contributing

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

Development Workflow

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• shadcn/ui for the beautiful design system
• Leptos team for the amazing Rust web framework
• Tailwind CSS for the utility-first CSS framework

🚨 Troubleshooting

Common Issues

"Leptos version not found" or "Incompatible version" errors:

• Ensure you're using Leptos v0.8.0 or higher
• Check your Cargo.toml has leptos = "0.8.0" (not "0.7.0")
• Run cargo update to ensure you have the latest compatible versions

Compilation errors with view macros:

• These often indicate version incompatibility
• Verify both leptos and leptos_router are v0.8.0+

Version Check

Add this to your code to verify the Leptos version at runtime:

use leptos::*;

#[component]
pub fn VersionCheck() -> impl IntoView {
    view! {
        <div>
            <p>"Leptos version: {leptos::VERSION}"</p>
            <p>"Required: 0.8.0+"</p>
        </div>
    }
}

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Documentation: docs/

---

Built with ❤️ by the CloudShuttle team