Components
Browse all 85 components organized by category. Each component is a standalone Web Component that works with any framework.
Input
Button
Interactive button component with multiple variants and states
View docs →Input
Text input component with validation and various states
View docs →Switch
Toggle switch component for binary choices
View docs →Form
Form wrapper component with validation states
View docs →Slider
Range slider component for selecting numeric values
View docs →File Upload
Drag-and-drop file upload component with previews
View docs →Autocomplete
Searchable dropdown component with filtering and multi-select
View docs →Datepicker
Calendar picker component with date/time and range selection
View docs →Select
Unified select component with single, multi-select, and tree-select modes
View docs →Cascader
Multi-panel cascading selection for hierarchical data
View docs →Markdown Input
Full-featured markdown editor with syntax highlighting, file upload, and autocomplete
View docs →Code Engine
Lightweight code editor powered by CodeMirror 6 with syntax highlighting, themes, and language support
View docs →Form Group
Layout utility for grouping form fields with vertical or horizontal orientation
View docs →Multi Select
Dropdown for selecting multiple items from a list with chip display
View docs →OTP Input
One-time password input with individual digit fields for verification codes
View docs →Segment Control
Segmented toggle group for selecting one option from a set
View docs →Theme Controller
Presentational wrapper for CSS-based theme switching controls
View docs →Time Input
Time selection input with color theming
View docs →Tree Select
Hierarchical dropdown for selecting from tree-structured data
View docs →FAB
Floating action button and native Popover speed dial
View docs →File Input
Native browser file picker with DuskMoon styling
View docs →Filter Group
Native radio and checkbox filters in a chip layout
View docs →Range
Native range input with browser-owned interaction
View docs →Swap
Checkbox-driven visual state indicator
View docs →Toggle Switch
Compact native checkbox switch
View docs →Validator
Native and application-owned validation presentation
View docs →Join
Visually join adjacent native controls
View docs →Feedback
Alert
Alert component for displaying important messages
View docs →Dialog
Modal dialog built on the native HTML dialog element with DuskMoonUI styles
View docs →Badge
Badge component for status indicators and labels
View docs →Chip
Chip component for tags, filters, and selections
View docs →Tooltip
Tooltip component for displaying additional information on hover
View docs →Progress
Progress bar component for displaying completion status
View docs →Loading
CSS-only activity indicator
View docs →Radial Progress
Determinate circular percentage progress
View docs →Navigation
Bottom Navigation
Mobile-first bottom navigation bar component with icons and labels
View docs →Breadcrumbs
Hierarchical navigation breadcrumbs for displaying the current location
View docs →Drawer
Side navigation drawer/sidebar component with modal support
View docs →Menu
Dropdown menu component with keyboard navigation support
View docs →Navbar
Primary navigation bar/header component with responsive design
View docs →Pagination
A customizable pagination component for page navigation
View docs →Stepper
A multi-step progress indicator and wizard component
View docs →Tabs
Tab navigation component for organizing content into panels
View docs →Navigation
Composite navigation layout container for building navigation structures
View docs →Nested Menu
Sidebar navigation with collapsible menu levels for hierarchical structures
View docs →Dropdown
Native Popover disclosure positioned relative to its trigger
View docs →Link
Theme-aware semantic navigation link
View docs →Megamenu
Grouped site navigation backed by the native Popover API
View docs →Surfaces
Card
Container component for grouping related content
View docs →Accordion
Expandable/collapsible panels component for organizing content
View docs →Bottom Sheet
Mobile bottom panel component that slides up from the bottom of the screen
View docs →Popover
Contextual overlay component that appears relative to a trigger element
View docs →Stack
Overlaps arbitrary children in one intrinsic grid area
View docs →Console Page
Responsive console shell with expanded, compact, hidden, and mobile navigation states
View docs →Footer
Responsive, semantic footer composition
View docs →Hero
Layer foreground content over an optional decorative visual
View docs →Home Page
Responsive public application shell with adaptive navigation
View docs →Sidebar Layout
Responsive persistent sidebar and content grid
View docs →Sign Page
Responsive authentication page shell
View docs →Data Display
Table
Full-featured data table with sorting, pagination, and row selection
View docs →Pro Data Grid
Enterprise-grade data grid with virtual scrolling, sorting, filtering, editing, grouping, and more
View docs →Datetime
Display-only ISO date and datetime formatting
View docs →Markdown
Markdown rendering component with syntax highlighting and Mermaid support
View docs →Chat
DuskMoonUI agent answers, work disclosures, collapsible messages, waiting queues, and composers
View docs →Carousel
Native scrolling, scroll-snapping content carousel
View docs →Countdown
Composable countdown display with tabular numerals
View docs →Diff
Before-and-after content comparison
View docs →Indicator
Positions status or notification content around an anchor
View docs →Kbd
Keyboard key and shortcut hint
View docs →Mask
Reusable clipping shapes for images and content
View docs →Stat
Structured metric with title, value, description, figure, and actions
View docs →