Skip to content
BookMD
UI
Language:en Author:AtomForge

UI

Component Overview

Choose tools by the task they solve, then follow the linked documentation for setup, behavior, API, and limitations. The category index below includes documented public modules; inclusion does not imply a stability guarantee. Import documented public symbols from @atom-forge/ui, not from the source-folder paths.

For a recommended reading workflow, start with the AI Consumer Entry Point.

Choose by task

Task Tools to compare Selection guidance
Select one value NativeSelect, Select, Radio Native select behavior, searchable/custom dropdown, or directly visible choices.
Select several values MultiSelect, Checkbox Dropdown selection or visible checkbox choices; read each binding contract.
Edit string tags TagEditor Free-form strings; compare MultiSelect for predefined option values.
Build a labeled input Field, Input, Textarea Compose the label/hint/error wrapper with the appropriate control; see Forms.
Enter dates or times DatePicker, TimePicker, DateTimePicker Match the required date/time value shape; these are inputs, not scheduling surfaces.
Show a binary setting Switch, Checkbox On/off setting or checked selection; do not assume identical prop names.
Show tabular records Table, Pagination, EmptyState Compose record display and application-managed paging/state; see Data Display.
Visualize measurements BarChart, Charts, Heatmap, MeterGroup Compare bars, Chart.js plots, two-dimensional values, or parts of a total.
Show progress or loading ProgressBar, ProgressRing, Skeleton Measured progress or content-shaped loading placeholders.
Reorder or transfer items SortableList / SortableGroup One-list ordering or cross-list transfer; see Sortable Lists.
Organize navigation or panels Tabs, Accordion, Tree, Splitter Peer views, expandable sections, hierarchy, or resizable panels.
Open supplementary UI Modal, Drawer, Popup Dialog, edge panel, or anchored content; see Overlays.
Expose actions ContextMenu, CommandPalette Contextual menu or searchable commands; the command palette requires application-managed visibility.
Explain or notify Tooltip, Toast, EmptyState Hover explanation, transient feedback, or persistent no-content state.
Render prose or documentation Prose, Doc Readable content or API/code/example documentation primitives.
Edit content MarkdownEditor, BlockEditor, TableEditor, DiagramEditor, ImgEditor Choose the editor matching the underlying data model, not just its visual appearance.
Schedule dates and resources Calendar, Gantt, Organizer, ResourceManager Compare calendar events, task timelines, custom unit grids, and resource assignments.

Category index

General

Basic building blocks and primitive controls used throughout applications.

  • Badge: An absolute-positioned overlay indicator for notification counts or status dots.
  • Button: A clickable element for triggering actions.
  • Chip: A compact inline label for metadata, statuses, or tags.
  • Icon: A wrapper for icons with unified sizing and stroke control.
  • Kbd: Renders keyboard shortcut keys styled as physical keycaps.

Data & Charts

Components for visualizing, presenting, and manipulating complex data sets.

  • Bar Chart: A responsive bar chart supporting single-value, multi-series grouped, and stacked layouts.
  • Charts (Chart.js): Canvas-based chart components powered by Chart.js.
  • Heatmap: An SVG-based heatmap for visualizing 2D datasets with a color scale.
  • Meter Group: A segmented horizontal bar that visualizes proportions within a total.
  • Progress Ring: A circular SVG progress indicator.
  • Sortable: Components for drag-and-drop sorting and list reordering.
  • Table: A generic, type-safe data table with sticky headers and custom cell rendering; sorting is application-owned.
  • Timeline: A flexible timeline component that renders items along a vertical or horizontal line.

Display

Components for displaying content, user information, and UI status.

  • Avatar: A circular user representation with image or initials.
  • Avatar Group: Renders a horizontal stack of overlapping Avatar components.
  • Card: A surface container with rounded borders and configurable shadow elevation.
  • Carousel: A horizontally scrollable slide container with scroll-snap and navigation.
  • Empty State: A centered placeholder shown when a section has no content.
  • Flip Card: A 3D flip card with a front and back face.
  • Skeleton: Content-shaped loading placeholders.

Content

Components for rendering structured content.

  • Doc: API tables, code displays, and example presentation primitives.
  • Prose: Composable prose and Markdown rendering primitives.

Forms

Standardized form controls and inputs for user data collection.

  • Checkbox: Boolean toggle control with group management and multiple variants.
  • Code Input: A segmented input for OTPs, PIN codes, and license keys.
  • Color: A styled color input for hex value selection.
  • Date Picker: A single-date selector with a popup calendar.
  • Date Time Picker: Combined date and time entry.
  • Field: A wrapper pairing a form control with a label, hint, and error message.
  • Input: A styled text input supporting icons, prefix/suffix slots, and variants.
  • Multi-Select: A control for selecting multiple items from a fixed list.
  • Native Select: A styled wrapper around the native HTML select element.
  • Progress Bar: A horizontal progress indicator with smooth transitions.
  • Radio: A radio button group for mutually exclusive options.
  • Select: A custom searchable dropdown select.
  • Slider: Range and scalar value slider with single or double thumbs.
  • Switch: A toggle switch for binary on/off states.
  • Tag Editor: An interactive input for managing a list of string tags.
  • Textarea: A multi-line text input styled consistently with the input system.
  • Time Picker: A styled wrapper around the native time input.

Editors

Rich editing controls for structured authoring workflows.

  • Block Editor: Structured block editing, preview components, and the block context API.
  • Diagram Editor: Node-and-edge diagram editing.
  • Image Editor: Image loading, crop/transform controls, and edit-chain metadata; raster export is application-owned.
  • Markdown Editor: Markdown text editing with formatting controls.
  • Table Editor: Editable table data and read-only table preview.

Layout

Structural components to help organize and navigate content.

  • Accordion: Expandable content panels with single or multiple open items.
  • Breadcrumb: A navigation trail showing the current page's location.
  • Button Bar: A visual wrapper that groups children into a unified horizontal bar.
  • Pagination: Controls for navigating through multiple pages of content.
  • Pagination Slider: A slider-based page navigation control.
  • Splitter: A resizable split-panel container for complex layouts.
  • Stepper: A multi-step progress and navigation control.
  • Tabs: A tab navigation system with multiple visual variants.
  • Tree: A collapsible tree view for hierarchical data structures.

Overlays

Dynamic overlays that appear on top of the main application content.

  • Command: Searchable command palette and command item API.
  • Context Menu: A popup menu built from a declarative configuration.
  • Drawer: A slide-in panel anchored to any screen edge.
  • Modal: An imperative modal dialog system.
  • Popup: A floating overlay system for anchored content like dropdowns and submenus.
  • Toast: Lightweight notification messages stacked in a fixed overlay.
  • Tooltip: Hover tooltips that appear with a delay.
  • Zen: A fullscreen overlay for distraction-free focus mode.

Scheduling

Controls for calendar, timeline, and resource planning interfaces.

  • Calendar: Calendar views and event editing callbacks.
  • Gantt: Task timeline, progress, and dependency visualization.
  • Organizer: A unit-based scheduling surface for calendars, dashboards, and resource grids.
  • Resource Manager: Resource assignment planning.