DuskMoon React Components
Browse 109 components and 13 API references by purpose. Find usage demos, API details, and DuskMoon theme previews.
No matching documentation. Clear the search to browse all entries.
Actions
Controls that trigger commands or workflows. 4 entries.
ButtonButton triggers primary, secondary, destructive, or icon-only actions.DmToolbarDmDmToolbar groups primary and secondary actions, including overflow menus.DropdownDropdown attaches contextual action menus to a compact trigger.FloatButtonFloatButton keeps a high-priority shortcut available over the page content.
Layout
Primitives for arranging content and page structure. 11 entries.
ColCol defines responsive grid columns inside row-based layouts.DividerDivider separates dense content while preserving visual rhythm.DmLayoutDmDmLayout combines menus, breadcrumbs, and collapsible navigation in an application shell.DmPageHeaderDmDmPageHeader frames a page title with breadcrumbs, back navigation, and extra actions.DmSplitterDmDmSplitter resizes panels with optional saved sizes and reset controls.FlexFlex arranges inline or wrapping content with a small layout API.GridGrid exposes responsive breakpoint information for adaptive layouts.LayoutLayout composes application shells with header, sider, content, and footer regions.RowRow creates guttered horizontal grid layouts.SpaceSpace applies consistent spacing between neighboring elements.SplitterSplitter creates resizable panels for workspace-style layouts.
Data Entry
Controls for collecting and changing values. 22 entries.
AutoCompleteAutoComplete pairs text entry with suggested options for searchable pickers and command inputs.CascaderCascader selects a value from a nested hierarchy without exposing the whole tree at once.CheckboxCheckbox captures independent boolean or multi-select choices.ColorPickerColorPicker captures theme colors, brand swatches, or user-selected color values.DatePickerDatePicker captures single dates and related date-picker states with typed callbacks.DmDatePickerDmDmDatePicker selects dates or ranges through day, week, month, quarter, and year picker variants.DmQueryDmDmQuery builds a query form from field definitions with search and reset controls.DmSearchDmDmSearch collects table filters across text, choice, date, and custom fields.FormForm coordinates form state, validation, field layout, and submit handling.InputInput captures short text, search, password, and textarea input.InputNumberInputNumber captures bounded numeric values with step controls.MentionsMentions captures text input with mention suggestions.RadioRadio captures one choice from a mutually exclusive set.RateRate captures or displays simple rating values.SegmentedSegmented switches between a small number of sibling modes.SelectSelect chooses one or more values from a bounded option set.SliderSlider captures a value or range on a continuous scale.SwitchSwitch toggles an immediate on/off setting.TimePickerTimePicker captures time values with typed parsing and status state.TransferTransfer moves records between available and selected lists.TreeSelectTreeSelect combines tree selection with compact form input behavior.UploadUpload collects files with validation, file-list management, and custom request hooks.
Data Display
Components for presenting content and records. 23 entries.
AvatarAvatar represents a person, team, object, or entity in compact UI surfaces.BadgeBadge adds short status, count, or classification markers around nearby content.CalendarCalendar renders date-oriented browsing and selection with month and year modes.CarouselCarousel cycles through a limited set of panels while keeping one panel in focus.ChatChat composes conversational turns with message bubbles, reasoning traces, tool calls, and live response states.DescriptionsDescriptions presents labeled record fields for summaries, details, and review screens.DmInfiniteScrollDmDmInfiniteScroll loads more content as a scroll container approaches its threshold.DmProTableDmDmProTable presents records with a title bar, toolbar actions, and column controls.DmStatusDmDmStatus shows empty, loading, error, or success content in a consistent status panel.DmTableDmDmTable presents typed tabular records with search, pagination, and column controls.DmTreeDmDmTree browses hierarchical records with selection and contextual toolbar actions.DmTruncateDmDmTruncate shortens long text with overflow details, tooltips, and optional copying.ImageImage renders images with preview and placeholder behavior.ListList renders repeated records with item metadata and secondary actions.MarkdownMarkdown renders Markdown content with GitHub-flavored syntax, front matter, color previews, and configurable soft line breaks.QRCodeQRCode encodes a URL or payload for handoff to another device.StatisticStatistic emphasizes a metric, count, or countdown.TableTable renders structured data with columns, sorting, filters, selection, and pagination.TagTag labels records with compact metadata or removable filters.TimelineTimeline shows ordered events, milestones, or audit history.TreeTree renders hierarchical data with selection, expansion, and checking.TypographyTypography standardizes text, title, paragraph, link, copy, edit, and ellipsis behavior.WatermarkWatermark adds repeated ownership or confidentiality marks behind content.
Feedback
Status, progress, alerts, and confirmation patterns. 11 entries.
AlertAlert communicates important inline status, validation, or operational messages without interrupting the current workflow.DmMessageDmDmMessage shows transient success, error, warning, info, and loading feedback.EmptyEmpty explains an empty content state and gives the user a next step.messagemessage shows transient global feedback after user actions.notificationnotification shows global notices that need more context than a message.PopconfirmPopconfirm asks for confirmation around a risky inline action.ProgressProgress visualizes completion, loading, or capacity state.ResultResult summarizes the outcome of a completed workflow.SkeletonSkeleton shows a stable loading placeholder that matches the future content shape.SpinSpin shows local loading state for a pending operation.TourTour walks users through key areas of an interface.
Surfaces
Containers and overlays for grouping content. 8 entries.
CardCard groups related content and actions into a small self-contained surface.CollapseCollapse hides and reveals optional sections without leaving the current page.DmAuxiliaryDmDmAuxiliary shows supporting content with optional actions and a close control.DmDrawerDmDmDrawer opens a side panel with configurable footer and submit controls.DrawerDrawer opens side-panel workflows without replacing the underlying screen.ModalModal blocks for confirmation, focused forms, and critical decisions.PopoverPopover shows rich contextual content attached to a trigger.TooltipTooltip adds short explanatory text to compact controls.
CSS Art
Illustrative scenes and animated CSS art. 15 entries.
ArtAtomArtAtom renders the ArtAtom CSS-art scene as a reusable React component.ArtCatStargazerArtCatStargazer renders the ArtCatStargazer CSS-art scene as a reusable React component.ArtCircularGalleryArtCircularGallery renders the ArtCircularGallery CSS-art scene as a reusable React component.ArtColorSpinArtColorSpin renders the ArtColorSpin CSS-art scene as a reusable React component.ArtCsswitchArtCsswitch renders the ArtCsswitch CSS-art scene as a reusable React component.ArtEclipseArtEclipse renders the ArtEclipse CSS-art scene as a reusable React component.ArtFlowerAnimationArtFlowerAnimation renders the ArtFlowerAnimation CSS-art scene as a reusable React component.ArtGeminiInputArtGeminiInput renders the ArtGeminiInput CSS-art scene as a reusable React component.ArtMoonArtMoon renders the ArtMoon CSS-art scene as a reusable React component.ArtMountainArtMountain renders the ArtMountain CSS-art scene as a reusable React component.ArtPlasmaBallArtPlasmaBall renders the ArtPlasmaBall CSS-art scene as a reusable React component.ArtSnowballPreloaderArtSnowballPreloader renders the ArtSnowballPreloader CSS-art scene as a reusable React component.ArtSnowflakeArtSnowflake renders the ArtSnowflake CSS-art scene as a reusable React component.ArtSunArtSun renders the ArtSun CSS-art scene as a reusable React component.ArtSynthwaveStarfieldArtSynthwaveStarfield renders the ArtSynthwaveStarfield CSS-art scene as a reusable React component.
Theming & Configuration
Theme and configuration APIs for DuskMoon apps. 9 entries.
AppApp provides application-level holders for message and notification APIs.ConfigProviderConfigProvider passes component configuration through a subtree.DmProviderDmDmProvider applies shared theme, locale, direction, and component configuration to a subtree.getDmThemegetDmTheme reads the current DuskMoon prefix, color tokens, and component theme values.onDmThemeUpdateonDmThemeUpdate subscribes to theme changes and returns a function to unsubscribe.setDmDatePickerLocalesetDmDatePickerLocale sets the shared date picker locale to English or Chinese.setDmPrefixClssetDmPrefixCls sets the DuskMoon CSS class prefix and notifies theme listeners.setDmPrimaryColorsetDmPrimaryColor sets the primary color token and notifies theme listeners.themetheme exposes default tokens, theme algorithms, and current design token helpers.
Utilities & Types
Helpers, hooks, types, and package utilities. 7 entries.
BreakpointBreakpoint names the responsive screen sizes used by Grid hooks and queries.GetPropGetProp extracts the type of a named property from another type.GetPropsGetProps infers the React props type accepted by a component.GetRefGetRef infers the ref target type accepted by a component.unstableSetRenderunstableSetRender registers an override for rendering content into a DOM container.usePersistedPageSizeusePersistedPageSize manages page size state and optionally saves it in local storage.versionversion provides the current DuskMoon React package version.