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.4"
ⓘ
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, Navbar
OverlayModal, Tooltip, Dropdown, Sheet, CommandPalette
FeedbackToast, AlertBanner, EmptyState
LayoutDivider, Accordion, Kbd, PublicLayout
LandingHero, Footer, FeatureGrid

Modules§

accordion
Accordion — collapsible content sections with animated expand/collapse.
ai_view
alert_banner
AlertBanner — info / warning / error / success with icon and dismiss button.
auth
Shared authentication for all DIRMACS frontends. Shared authentication for all DIRMACS frontends.
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.
chat_input
ChatInput — chat input with textarea and send button.
chat_message
ChatMessage — chat bubble with sender-based styling.
checkbox
Checkbox — custom styled checkbox with label and description.
chip_select
ChipSelect — multi-option toggle selector with pill buttons.
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 an element.
empty_state
EmptyState — centered placeholder message with icon for empty lists/tables.
feature_grid
FeatureGrid — responsive grid of feature/product cards.
file_upload
FileUpload — drag-and-drop file upload with file list.
footer
Footer — multi-column site footer with brand, links, social, trust line, copyright.
hero
Hero — landing page hero section with split layout, badge, headline, CTAs.
input
Input — text / password / search / email 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.
navbar
Navbar — horizontal top navigation for public-facing pages. Fixed position, transparent → glass blur on scroll, mobile hamburger, dropdown support.
prelude
Re-export all components at crate root for convenience.
progress_bar
ProgressBar — horizontal fill bar with label and percentage.
public_layout
PublicLayout — page shell for public-facing (unauthenticated) pages.
radio
RadioGroup — radio button group with vertical or horizontal layout.
score_ring
scroll_reveal
ScrollReveal — scroll-triggered fade-in animation wrapper. Uses IntersectionObserver to add .visible to .dm-fade-in elements. Respects prefers-reduced-motion.
select
Select — dropdown with options and placeholder.
sheet
Sheet — a slide-out panel from any edge.
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.
stepper
Stepper — multi-step progress indicator.
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 positioned near the target.