COMPONENTS
The component gallery
Every published package: 82 custom elements across
81 packages, 25 plugins,
6 utility packages, and 3 framework
packages (the renderer, pub/sub, and the WebSocket client). All of it is on npm under
@dojo-ng, BSD-3-Clause, and free.
Form controls
- <dj-action-button>
A button that inherits the surrounding theme rather than imposing its own.
v0.1.1
Try it - <dj-button>
The foundational button.
v0.1.2
Try it - <dj-checkbox>
A form-associated checkbox composing
<dj-label>.v0.1.2
Try it - <dj-checkbox-group>
Multi-select group from
options; submits each checked value undername.v0.1.2
Try it - <dj-chip-typeahead>
A multi-select typeahead: type to filter
options, pick from a popup list, and each choice becomes a removable chip.v0.1.1
Try it - <dj-color-picker>
An inline color picker.
v0.1.1
Try it - <dj-constrained-input>
A text input with a custom
validatorfunction:(value) => string | undefinedreturning an error message (or undefined when valid).v0.1.1
Try it - <dj-copy-button>
An icon-only button that copies text to the clipboard and shows whether it worked.
v0.1.1
Try it - <dj-date-input>
An ISO (yyyy-mm-dd) date field: type it, or pick from a popup
<dj-calendar>opened by the trailing button.v0.1.1
Try it - <dj-email-input>
A text input defaulting to
type="email"(native email validation).v0.1.1
Try it - <dj-file-input>
A form-associated file selector with a button that opens the system file picker and a focusable drop zone.
v0.1.1
Try it - <dj-floating-action-button>
A circular (or extended/pill) action button, optionally fixed to a screen position.
v0.1.2
Try it - <dj-form>
A layout wrapper that gathers values from its named child controls and emits
dj-submitwith a{ name: value }object.v0.1.2
Try it - <dj-helper-text>
Supporting text shown under a form control.
v0.1.1
Try it - <dj-label>
A form label.
v0.1.1
Try it - <dj-native-select>
A form-associated wrapper over a native
<select>, driven by anoptionsarray, composing<dj-label>,<dj-helper-text>, and a<dj-icon>chevron.v0.1.2
Try it - <dj-number-input>
A text input defaulting to
type="number"; exposesvalueAsNumber.v0.1.1
Try it - <dj-password-input>
A password field with a show/hide toggle in the trailing slot.
v0.1.1
Try it - <dj-radio>
A form-associated radio composing
<dj-label>.v0.1.2
Try it - <dj-radio-group>
Coordinates a set of
<dj-radio>into a single-choice control.v0.1.2
Try it - <dj-range-slider>
A form-associated dual-thumb range.
v0.1.1
Try it - <dj-rate>
Star rating (0..max).
v0.1.2
Try it - <dj-search-box>
A search field for free text plus typed
key:valuefilters.v0.1.2
Try it - <dj-select>
A form-associated single-select combobox.
v0.1.2
Try it - <dj-slider>
A form-associated single-value range input with a themed track/fill/thumb and optional output, composing
<dj-label>.v0.1.1
Try it - <dj-switch>
A form-associated on/off toggle (role="switch") composing
<dj-label>.v0.1.2
Try it - <dj-text-area>
A form-associated multi-line text field, composing
<dj-label>and<dj-helper-text>.v0.1.2
Try it - <dj-text-input>
A form-associated text field that composes
<dj-label>and<dj-helper-text>.v0.1.2
Try it - <dj-time-picker>
A
HH:MMtime field with a popup list of options generated frommin/max/step(seconds).v0.1.1
Try it - <dj-typeahead>
An editable combobox: type to filter
options, pick from a popup<dj-list>.v0.1.2
Try it
Overlays
- <dj-context-menu>
Right-click the trigger (default slot) to open a menu of
options; emitsdj-selectwith the value.v0.1.1
Try it - <dj-context-popup>
Right-click (contextmenu) on the trigger (default slot) opens a
<dj-popup>at the cursor, holding thecontentslot.v0.1.1
Try it - <dj-dialog>
A modal dialog.
v0.1.2
Try it - <dj-dropdown>
A menu button: a trigger that opens a menu or panel anchored to it, built on
<dj-popup>and<dj-list>.v0.1.1
Try it - <dj-popup>
Positions slotted content as an overlay, flipping to the opposite side when there isn't room in the preferred position.
v0.1.1
Try it - <dj-popup-confirmation>
Clicking the trigger (default slot) opens a small confirm popup with the
contentslot and Confirm/Cancel buttons.v0.1.1
Try it - <dj-slide-pane>
A panel that slides in from an edge.
v0.1.2
Try it - <dj-snackbar>
A toast.
v0.1.2
Try it - <dj-tooltip>
Shows tip content next to its trigger on hover/focus.
v0.1.1
Try it - <dj-trigger-popup>
Clicking the trigger (default slot) opens a
<dj-popup>anchored to it, holding thecontentslot.v0.1.1
Try it
Layout
- <dj-accordion>
Coordinates slotted
<dj-title-pane>children.v0.1.1
Try it - <dj-card>
Content container.
v0.1.1
Try it - <dj-carousel>
A slotted, swipeable carousel.
v0.1.1
Try it - <dj-header-card>
A
<dj-card>with a header row (avatar + title/subtitle).v0.1.1
Try it - <dj-split-panel>
Two resizable panes with a draggable divider between them.
v0.1.1
Try it - <dj-stack>
Flex layout.
v0.1.1
Try it - <dj-three-column-layout>
Leading/center/trailing slots; collapses on narrow containers.
v0.1.1
Try it - <dj-title-pane>
A collapsible panel with a title bar.
v0.1.1
Try it - <dj-two-column-layout>
Leading + trailing slots; collapses to one column on narrow containers (container query).
v0.1.1
Try it
Data display
- <dj-avatar>
Circular/rounded/square avatar from an image
srcor slotted initials/icon.v0.1.1
Try it - <dj-badge>
A small count or status label that decorates other content.
v0.1.1
Try it - <dj-board>
A Kanban board over plain records.
v0.1.1
Try it - <dj-calendar>
A form-associated month-grid date picker.
v0.1.2
Try it - <dj-chip>
Compact label/tag.
v0.1.1
Try it - <dj-data-grid>
A virtualized, sortable, selectable data grid built on TanStack Table and TanStack Virtual.
v0.1.2
Try it - <dj-grid>
A data grid from
columns+rows.v0.1.1
Try it - <dj-icon>
A presentational icon.
v0.1.1
Try it - <dj-list>
A single-select list, or a menu, built from
options.v0.1.2
Try it - <dj-result>
A status/result block with an icon, title, subtitle, content, and actions.
v0.1.1
Try it - <dj-text>
Typographic wrapper.
v0.1.1
Try it
Charts
- <dj-chart>
A themeable, accessible SVG chart.
WITH dj-sparklinev0.2.1
Try it - <dj-sparkline>
A tiny inline chart of one numeric series, with no axes, grid, legend, tooltip, or margins.
WITH dj-chartv0.2.1
Try it
Editing
- <dj-rich-text>
A form-associated WYSIWYG editor built on Lexical.
v0.1.3
Try it
Feedback
- <dj-alert>
An inline status banner.
v0.1.1
Try it - <dj-global-event>
Non-visual; attaches listeners to window/document for its lifetime.
v0.1.1
Try it - <dj-loading-indicator>
A linear bar or circular spinner.
v0.1.1
Try it - <dj-progress>
Determinate progress bar.
v0.1.2
Try it - <dj-skeleton>
A loading placeholder that stands in for content while it loads.
v0.1.1
Try it
Animation
- <dj-transition>
Runs an enter or leave effect when
showchanges.v0.1.1
Try it - <dj-transition-group>
Staggers the
showof itsdj-transitionchildren.v0.1.1
Try it
Media
- <dj-audio>
A themed audio player.
v0.1.2
Try it - <dj-video>
A themed video player built on video.js.
v0.1.2
Try it
Data grid plugins
- data-grid-cell-components
In-row Lit components (per-column render + actionButton/checkmark helpers)
PLUGINv0.1.1
Try it - data-grid-detail
Master-detail (expandable row detail / subgrid)
PLUGINv0.1.1
Try it - data-grid-edit
Controlled inline cell editing
PLUGINv0.1.1
Try it - data-grid-export
CSV export
PLUGINv0.1.1
Try it - data-grid-filter
Quick + per-column filtering
PLUGINv0.1.1
Try it - data-grid-formats
Value-formatting plugin (Intl number/currency/percent/date via @dojo-ng/i18n)
PLUGINv0.1.1
Try it - data-grid-groups
Row grouping + aggregates
PLUGINv0.1.1
Try it - data-grid-pagination
Pagination (reuses dj-pagination)
PLUGINv0.1.1
Try it - data-grid-rowstate
Row/cell state styling plugin (conditional row parts + cell emphasis)
PLUGINv0.1.1
Try it - data-grid-select
Checkbox selection column plugin (select-all, range selection)
PLUGINv0.1.1
Try it - data-grid-tree
Tree (hierarchical) rows
PLUGINv0.1.1
Try it
Rich text plugins
- rich-text-autolink
Auto-link (URL/email) plugin
PLUGINv0.1.1
Try it - rich-text-color
Text/background color plugin
PLUGINv0.1.1
Try it - rich-text-criticmarkup
CriticMarkup tracked-changes plugin
PLUGINv0.1.3
Try it - rich-text-embed
Media embed plugin
PLUGINv0.1.1
Try it - rich-text-emoji
Emoji picker + shortcode plugin
PLUGINv0.1.1
Try it - rich-text-headings
Headings/quote plugin
PLUGINv0.1.1
Try it - rich-text-image
Image insert plugin
PLUGINv0.1.1
Try it - rich-text-links
Link insert/edit/remove plugin
PLUGINv0.1.1
Try it - rich-text-lists
Bulleted/numbered/checklist plugin
PLUGINv0.1.1
Try it - rich-text-markdown
Markdown input/output plugin
PLUGINv0.2.1
Try it - rich-text-mentions
Mentions (@name) plugin
PLUGINv0.1.1
Try it - rich-text-slash
Slash-command menu plugin
PLUGINv0.1.1
Try it - rich-text-table
Table plugin
PLUGINv0.1.1
Try it
Chart plugins
- chart-financial
Candlestick, volume, and indicator plugins (OHLC support package, no custom element)
PLUGINv0.1.2
Try it
Utilities
- context
Dojo NG context-key registry (Context Protocol)
NO ELEMENTv0.1.1
Try it - dnd
Dojo NG drag-and-drop primitive (pointer-events core: shadow DOM + touch, no dependency)
NO ELEMENTv0.1.2
Try it - dojo-element
Dojo NG web component base class
NO ELEMENTv0.1.3
Try it - i18n
Dojo NG internationalization: locale signal, Intl formatting, message resolver, pluggable loader
NO ELEMENTv0.1.1
Try it - rich-text-menu
Caret-anchored menu machinery for @dojo-ng/rich-text plugins
NO ELEMENTv0.1.1
Try it - store
Dojo NG external-store controller for Lit components
NO ELEMENTv0.1.1
Try it - <dj-theme>
Scopes a theme to part of the page.
v0.1.2
Try it
Framework runtime
- framework
A small virtual DOM renderer. It sets arrays and objects on custom elements as properties, and
on*props listen for any event,dj-*events included.NO ELEMENTv0.3.5
- pubsub
Publish and subscribe with namespaced topics. It keeps the last value of each topic for late subscribers, and you can also read a topic with
for await.NO ELEMENTv0.1.3
- websocket
A WebSocket client that reconnects with backoff, queues messages while offline, and matches each response to its request.
NO ELEMENTv0.1.3