Elements

Ready-to-use UI components with JavaScript interactivity. From cards and modals to complex forms and navigation, each element is designed for ease of use and customisation.

Domma.elements

Accordion

Collapsible content sections with smooth animations.

  • Single or multi-expand
  • Smooth animations
  • Nested support
  • Keyboard accessible
elements.accordion('#faq', { multiExpand: false })

Back to Top

Scroll-to-top button that appears after scrolling.

  • Auto show/hide
  • Smooth scroll
  • Customisable position
  • Event callbacks
elements.backToTop('#btn', { showAfter: 300 })

Badge

Small count or status indicators for UI elements.

  • Colour variants
  • Pill and square shapes
  • Count badges
  • Notification dots
New

Breadcrumbs

Navigation trail for hierarchical page structures.

  • Custom separators
  • Home icon option
  • Responsive collapse
  • Dynamic updates
elements.breadcrumbs('#nav', { separator: '/' })

Button Group

Grouped buttons with single or multiple selection.

  • Radio mode (single)
  • Checkbox mode (multi)
  • Vertical layout
  • Size variants
elements.buttonGroup('#group', { mode: 'single' })

Card

Flexible content containers with optional hover effects.

  • Hover lift effect
  • Clickable variants
  • Header and footer
  • Shadow options
elements.card('#card', { hover: true })

Carousel

Image and content sliders with navigation and autoplay.

  • Autoplay support
  • Slide or fade
  • Indicators
  • Touch gestures
elements.carousel('#slider', { autoplay: true })

Dialog

Promise-based alert, confirm, and prompt dialogs.

  • Alert messages
  • Confirm dialogs
  • Input prompts
  • Promise-based API
await elements.confirm('Delete item?')

Dropdown

Toggleable contextual menus for navigation and actions.

  • Click or hover trigger
  • Multiple positions
  • Nested dropdowns
  • Keyboard navigation
elements.dropdown('#menu', { trigger: 'click' })

Forms

Comprehensive form components with theme support.

  • Custom checkboxes
  • Toggle switches
  • Input validation
  • Floating labels

Jumbotron

Large hero sections for showcasing key content.

  • CSS-only component
  • Gradient backgrounds
  • Cover images
  • Size variants
...

Loader

Loading indicators with multiple animation types.

  • 4 animation types
  • Overlay mode
  • Size customisation
  • Loading text
elements.loader('#box', { type: 'spinner' })

Modal

Dialog windows with backdrop, keyboard support, and animations.

  • Backdrop support
  • Keyboard shortcuts
  • Fade animations
  • Event callbacks
elements.modal('#dialog', { backdrop: true })

Navbar

Responsive navigation bar with brand, links, and dropdowns.

  • Responsive collapse
  • Dropdown support
  • Light/dark variants
  • Fixed positioning
elements.navbar('#nav', { variant: 'dark' })

DesktopNotification

Browser native desktop notifications with permission handling.

  • Desktop push alerts
  • Permission management
  • Event callbacks
  • Instance tracking
elements.notify('Hello', { body: 'World!' })

Timer

Countdown timer with visual display or headless mode.

  • Visual or headless
  • Multiple formats
  • Time manipulation
  • Notification alerts
elements.timer('#timer', { duration: 60000 })

Alarm

Scheduled time-based alerts with localStorage persistence.

  • Persistent alarms
  • Repeat patterns
  • Snooze support
  • Auto-notification
elements.alarm().add({ time: '09:00', label: 'Standup' })

Autocomplete

Text input with intelligent suggestion dropdown.

  • Static or async data
  • Match highlighting
  • Keyboard navigation
  • Position control
elements.autocomplete('#search', { data: items })

Pillbox

Multi-select tag input with removable pills.

  • Searchable dropdown
  • Creatable mode
  • Max items validation
  • Keyboard support
elements.pillbox('#tags', { maxItems: 5 })

TreeView

Hierarchical tree view with expand/collapse, selection, and custom rendering.

  • Expand/collapse nodes
  • Selection management
  • Custom rendering & badges
  • Action buttons
elements.treeView('#tree', { data })

Editor

Universal content editor with three modes: text, rich, and code.

  • Three editing modes
  • Model integration
  • Autosave & localStorage
  • Image paste & embeds
elements.editor('#editor', { mode: 'rich' })

Tabs

Tabbed navigation with panel switching and animations.

  • Multiple layouts
  • Smooth transitions
  • Programmatic control
  • Event callbacks
elements.tabs('#tabs', { activeIndex: 0 })

Toast

Non-blocking notification messages with auto-dismiss.

  • Success/error/info
  • Auto-dismiss timer
  • Position control
  • Action buttons
elements.toast('Saved!', { type: 'success' })

Tooltip

Contextual information on hover or focus.

  • 4 positions
  • Hover/click/focus
  • Delay control
  • Dynamic content
elements.tooltip('#btn', { content: 'Help text' })