Leptos Components

A production-ready UI component library for Leptos applications.

Features

• 🚀 Production-ready components with sensible defaults
• 🎯 Type-safe props using Leptos's component system
• 📦 Tree-shakeable via Cargo feature flags
• 🌐 SSR/CSR compatible for full-stack applications
• ♿ Accessible following WCAG 2.1 guidelines
• 🎨 Themeable via CSS custom properties

Installation

Add to your Cargo.toml:

[dependencies]
longcipher-leptos-components = { version = "0.1", features = ["editor"] }

Quick Start

use leptos::prelude::*;
use longcipher_leptos_components::editor::Editor;

#[component]
fn App() -> impl IntoView {
    let (content, set_content) = signal(String::new());

    view! {
        <Editor
            value=content
            on_change=move |v| set_content.set(v)
            language="rust"
            show_line_numbers=true
            placeholder="Start typing..."
        />
    }
}

Available Components

Editor

A full-featured text editor with:

• Syntax highlighting (feature: syntax-highlighting)
• Line numbers
• Find & Replace (feature: find-replace)
• Undo/Redo
• Code folding (feature: folding)
• Document statistics (feature: statistics)

<Editor
    value=content
    on_change=move |v| set_content.set(v)
    language="markdown"
    show_line_numbers=true
    word_wrap=true
    tab_size=4
    font_size=14.0
    highlight_current_line=true
    match_brackets=true
/>

Feature Flags

Usage Examples

# Minimal editor
longcipher-leptos-components = { version = "0.1", features = ["editor"] }

# Full-featured editor
longcipher-leptos-components = { version = "0.1", features = ["editor-full"] }

# With SSR support
longcipher-leptos-components = { version = "0.1", features = ["editor", "ssr"] }

Styling

Components use CSS custom properties for easy theming:

.leptos-editor {
    --editor-bg: #1e1e1e;
    --editor-fg: #d4d4d4;
    --editor-line-number-fg: #858585;
    --editor-selection-bg: #264f78;
    --editor-cursor: #aeafad;
    --editor-border: #3c3c3c;
}

/* Light theme */
.leptos-editor.light {
    --editor-bg: #ffffff;
    --editor-fg: #1e293b;
    --editor-border: #e2e8f0;
}

Component Design Principles

All components follow these standards:

1. #[prop(into)] - Flexible input types
2. Optional props with defaults - Works with minimal config
3. class prop - Custom styling support
4. impl IntoView - Standard Leptos return type
5. Controlled components - External state management
6. Accessible by default - ARIA labels and keyboard support

Documentation

• Library Design - Architecture and standards
• Editor Design - Editor component details
• API Reference - Full API docs
• Examples - Code examples

Contributing

Contributions are welcome! Please read our contributing guidelines.

Development

# Run tests
cargo test --all-features

# Check lints
cargo clippy --all-features

# Format code
cargo fmt

# Build docs
cargo doc --all-features --open

License

Licensed under MIT License.

Acknowledgments

• Built with Leptos
• Design system by ui-ux-pro-max