AdminLTE Headless

Framework-agnostic UI component logic for admin dashboards

Overview

AdminLTE Headless extracts the JavaScript logic from AdminLTE into a framework-agnostic library. It provides the behavioral components (sidebar toggle, treeview menus, card widgets, etc.) without any CSS framework dependency.

This allows you to:

• Use AdminLTE's battle-tested UI logic with any CSS framework (Tailwind, Bootstrap, Bulma, etc.)
• Build framework-specific wrappers (React, Vue, Svelte, etc.)
• Maintain a single source of truth for component behavior

Installation

npm install @adminlte/headless

Quick Start

import {
  createLayout,
  createPushMenu,
  createTreeview,
  createCardWidget,
  createAccessibilityManager
} from '@adminlte/headless'

// Initialize layout
const layout = createLayout(document.body)
layout?.init()

// Initialize sidebar
const sidebar = createPushMenu('.app-sidebar', {
  sidebarBreakpoint: 992,
  enablePersistence: true
})
sidebar?.init()
sidebar?.createOverlay()

// Initialize treeview menus
const treeview = createTreeview('.sidebar-menu', {
  accordion: true,
  animationSpeed: 300
})
treeview?.init()

// Initialize card widgets
const cards = CardWidget.initAll()

// Initialize accessibility features
const a11y = createAccessibilityManager({
  announcements: true,
  skipLinks: true,
  keyboardNavigation: true
})

Components

Layout

Manages layout transitions during window resize and loading states.

const layout = createLayout(document.body)
layout.on('loaded', () => console.log('App ready'))
layout.on('resize', ({ width, height }) => console.log('Resized'))

PushMenu (Sidebar)

Controls sidebar expand/collapse with responsive breakpoints and persistence.

const sidebar = createPushMenu('.app-sidebar')
sidebar.toggle()
sidebar.expand()
sidebar.collapse()
sidebar.on('toggle', ({ isOpen }) => console.log('Sidebar:', isOpen))

Treeview

Hierarchical menu navigation with accordion support.

const treeview = createTreeview('.sidebar-menu')
treeview.open(menuItem)
treeview.close(menuItem)
treeview.toggle(menuItem)
treeview.on('expanded', ({ item }) => console.log('Opened:', item))

CardWidget

Card collapse/expand, maximize/minimize, and remove functionality.

const card = createCardWidget('.card')
card.toggle()       // Collapse/expand
card.maximize()     // Fullscreen card
card.minimize()     // Restore from fullscreen
card.remove()       // Remove with animation

DirectChat

Chat widget contacts pane toggle.

const chat = createDirectChat('.direct-chat')
chat.toggle()
chat.showContacts()
chat.hideContacts()

FullScreen

Browser fullscreen toggle.

const fullscreen = createFullScreen('[data-lte-toggle="fullscreen"]')
await fullscreen.toggle()
await fullscreen.enterFullscreen()
await fullscreen.exitFullscreen()

AccessibilityManager

WCAG 2.1 AA compliance features.

const a11y = createAccessibilityManager()
a11y.announce('Changes saved', 'polite')
a11y.trapFocus(modalElement)
a11y.addLandmarks()

Dropdown

Accessible dropdown menus with keyboard navigation.

const dropdown = createDropdown('.dropdown')
dropdown.toggle()
dropdown.open()
dropdown.close()
dropdown.on('open', () => console.log('Dropdown opened'))

Modal

Dialog/modal with focus trapping and backdrop support.

const modal = createModal('#my-modal')
modal.open()
modal.close()
modal.on('open', () => console.log('Modal opened'))
modal.on('close', () => console.log('Modal closed'))

Tabs

Tab navigation with keyboard support.

const tabs = createTabs('.tabs-container')
tabs.selectTab(1)
tabs.on('change', ({ index, tab, panel }) => console.log('Tab changed'))

ToastManager

Toast notifications with auto-dismiss and positioning.

const toasts = createToastManager()
toasts.show({ type: 'success', title: 'Saved!', message: 'Changes saved successfully' })
toasts.show({ type: 'error', title: 'Error', message: 'Something went wrong', duration: 5000 })

Architecture

src/
├── components/
│   ├── layout.ts         # Layout transitions
│   ├── push-menu.ts      # Sidebar toggle
│   ├── treeview.ts       # Hierarchical menus
│   ├── card-widget.ts    # Card actions
│   ├── direct-chat.ts    # Chat widget
│   ├── fullscreen.ts     # Fullscreen API
│   ├── accessibility.ts  # WCAG features
│   ├── dropdown.ts       # Dropdown menus
│   ├── modal.ts          # Dialog/modal
│   ├── tabs.ts           # Tab navigation
│   └── toast.ts          # Toast notifications
├── utils/
│   └── index.ts          # Shared utilities
├── types/
│   └── index.ts          # TypeScript definitions
└── index.ts              # Main entry

Official Implementations

• @adminlte/tailwind - Tailwind CSS implementation

Building

npm install
npm run build

Related Projects

• AdminLTE - Original Bootstrap-based admin dashboard

License

MIT