Accordion

Collapsible content sections with smooth animations.

• Single or multi-expand
• Smooth animations
• Nested support
• Keyboard accessible

elements.accordion('#faq', { multiExpand: false })

Badge

Small status indicators and labels.

• Multiple variants
• Pill & rounded styles
• Dismissible badges
• Counter badges

elements.badge('#el', { variant: 'primary' })

Number Badge

Positioned notification counters and presence dots.

• CSS-only or JS API
• Auto-hide at zero
• Dot mode for presence
• Pulse animation

elements.numberBadge('#btn', { count: 5 })

List Group

Selectable lists with keyboard navigation and colour variants.

• Single & multi-select
• Keyboard navigation
• Colour variants
• Flush & numbered modes

elements.listGroup('#list', { mode: 'single' })

Signature

Canvas-based handwriting pad for capturing signatures in forms.

• Mouse, touch & stylus
• Undo / redo history
• PNG & SVG export
• Type-your-name fallback

E.signature('#pad', { typeFallback: true })

Breadcrumbs

Navigation trail showing user location.

• Dynamic updates
• Custom separators
• Home icon support
• Responsive collapsing

elements.breadcrumbs('#nav', { items: [...] })

Button Group

Radio and checkbox button groups.

• Single or multi-select
• Vertical layout
• Value binding
• Programmatic control

elements.buttonGroup('.btns', { mode: 'single' })

Card

Container components with hover effects and clickability.

• Hover effects
• Click handling
• Header & footer
• Image support

elements.card('.card', { hover: true })

Carousel

Image and content sliders with controls.

• Auto-play
• Touch support
• Multiple transitions
• Indicators & arrows

elements.carousel('#slider', { autoplay: true })

Dialog

Promise-based modal dialogs (alert, confirm, prompt).

• Promise-based API
• Alert, confirm, prompt
• Custom styling
• Keyboard support

await elements.confirm('Are you sure?')

Dropdown

Contextual overlay menus with smart positioning.

• Click or hover trigger
• Auto-positioning
• Nested support
• Close on outside click

elements.dropdown('#menu', { trigger: 'hover' })

Forms

Enhanced form controls with validation.

• Input validation
• Custom controls
• Error handling
• Submit management

<input class="form-input" required>

hero

Hero sections with flexible layouts (CSS-only).

• Multiple layouts
• Split layouts
• Gradient overlays
• Responsive sizing

class="hero hero-primary"

Modal

Dialog overlays with backdrop and animations.

• Backdrop control
• Keyboard shortcuts
• Nested support
• Size variants

elements.modal('#modal').open()

Navbar

Responsive navigation bar with mobile menu.

• Mobile responsive
• Dropdown support
• Brand/logo area
• Fixed/sticky modes

elements.navbar('#nav', { collapsible: true })

Sidebar

Navigation sidebar with unlimited depth nesting.

• Unlimited depth menus
• Mobile drawer
• State persistence
• Light/dark themes

elements.sidebar('#nav', { variant: 'dark' })

Footer

Page footer with three layout modes and theme variants.

• Simple/columns/minimal
• Theme variants
• Social media icons
• Brand integration

elements.footer('#footer', { layout: 'simple' })

Autocomplete

Text input with intelligent suggestion dropdown.

• Static & async data
• Match highlighting
• Keyboard navigation
• Model binding

elements.autocomplete('#search', { data: [...] })

Pillbox

Multi-select tag input with removable pills.

• Tag creation
• Searchable dropdown
• Validation rules
• Model binding

elements.pillbox('#tags', { creatable: true })

TreeView

Hierarchical tree structure with expand/collapse.

• Nested nodes
• Checkboxes
• Lazy loading
• Keyboard navigation

elements.treeview('#tree', { data: tree })

Editor

Rich text editor with formatting tools.

• Formatting toolbar
• HTML/Preview modes
• Image support
• Markdown export

elements.editor('#editor', { toolbar: true })

Tabs

Tabbed content panels with animations.

• Animated transitions
• Vertical layout
• Dynamic tabs
• Keyboard navigation

elements.tabs('#tabs', { activeIndex: 0 })

Timeline

Chronological event display with multiple layouts.

• Vertical & horizontal
• Centered layout
• Custom styling
• Event markers

elements.timeline('#timeline', { layout: 'centered' })

Tooltip

Contextual popups on hover or click.

• Multiple triggers
• Smart positioning
• HTML content
• Custom styling

elements.tooltip('[title]', { trigger: 'hover' })