Skip to main content

Crate dui

Crate dui 

Source
Expand description

§DUI

A production-ready Leptos 0.7 component library with 29 accessible, signal-driven components and a dark-first design system.

§Features

  • 29 components: Form controls, data display, navigation, overlays, feedback, layout
  • Accessible: ARIA roles, keyboard navigation, focus management, screen reader support
  • Dark-first with light mode: Complete CSS custom property theming system
  • Signal-driven: Built on Leptos reactive primitives (Signal, RwSignal)
  • Zero JS: Pure Rust/WASM, no JavaScript dependencies

§Quick Start

[dependencies]
DUI = "0.2"
ⓘ
use dui::prelude::*;

#[component]
fn MyApp() -> impl IntoView {
    provide_toast();
    view! {
        <Button variant=ButtonVariant::Primary on_click=Box::new(|_| {})>
            "Click me"
        </Button>
        <ToastContainer />
    }
}

§CSS Setup

Link DUI.css in your HTML. For light mode, add data-theme="light" to your <html> element, or let it auto-detect via prefers-color-scheme.

§Components

CategoryComponents
FormButton, Input, Textarea, Select, Checkbox, Radio, Switch
DataBadge, Card, Table, Avatar, StatsCard, StatusBadge, ProgressBar, Skeleton
NavSidebar, Tabs, Breadcrumb
OverlayModal, Tooltip, Dropdown, Sheet, CommandPalette
FeedbackToast, AlertBanner, EmptyState
LayoutDivider, Accordion, Kbd

Modules§

accordion
Accordion — collapsible content sections with animated expand/collapse.
alert_banner
AlertBanner — info / warning / error / success with icon and dismiss button.
avatar
Avatar — image with initials fallback, size variants.
badge
Badge — small colored tag in gray/blue/green/yellow/red/purple.
breadcrumb
Breadcrumb — navigation trail showing the current page hierarchy.
button
Button — primary / secondary / ghost / danger, sizes sm/md/lg, loading + disabled.
card
Card — panel with optional header, body, footer, and glow border variants.
checkbox
Checkbox — custom styled checkbox with label and description.
command
CommandPalette — Cmd+K style command menu with fuzzy search, keyboard navigation, grouped results, and full ARIA support.
divider
Divider — horizontal or vertical separator line with optional label.
dropdown
Dropdown — a menu of actions/items triggered by a button or element.
empty_state
EmptyState — centered placeholder message with icon for empty lists/tables.
input
Input — text / password / search with label, error message, focus ring.
kbd
Kbd — keyboard shortcut display (keycap styling like GitHub’s <kbd>).
modal
Modal — overlay dialog with backdrop, close-on-escape, and close-on-click-outside.
prelude
Re-export all components at crate root for convenience.
progress_bar
ProgressBar — horizontal fill bar with label and percentage.
radio
RadioGroup — radio button group with vertical or horizontal layout.
select
Select — dropdown with options and placeholder.
sheet
Sheet — a slide-out panel from any edge (like Shadcn Sheet).
sidebar
Sidebar — collapsible nav with icon+label items, active highlight, user avatar.
skeleton
Skeleton — loading placeholder with shimmer animation.
stats_card
StatsCard — compact metric display with title, value, optional subtitle and icon.
status_badge
StatusBadge — healthy / degraded / down / unknown with animated indicator dot.
switch
Switch — toggle switch with label, sizes sm/md/lg, disabled state.
table
Table — headers, rows, hover highlight, optional sortable columns.
tabs
Tabs — horizontal tab navigation with active indicator.
textarea
Textarea — multi-line text input with label, error, character count.
toast
Toast — auto-dismissing notification system.
tooltip
Tooltip — hover popup with arrow, positioned above the target.