All hooks and context consumers run on the client. The context hooks must be called inside DashboardLayout, which supplies the providers.

Context providers

DashboardLayout renders all three providers for you. You can also mount them directly if you build a custom shell. Each provider exposes a hook; the hook throws if used outside its provider (except useCommandPalette, which returns undefined so the topbar can degrade gracefully).

useSidebarContext()

Read and control the sidebar (desktop collapse + mobile off-canvas).

'use client'
import { useSidebarContext } from 'adminlte-react'

function CollapseButton() {
  const { isCollapsed, toggle } = useSidebarContext()
  return <button onClick={toggle}>{isCollapsed ? 'Expand' : 'Collapse'}</button>
}

useColorModeContext()

Read and set the color mode. Returns { colorMode, setColorMode, resolvedMode }. Covered in detail on the Theming & Dark Mode page.

useCommandPalette()

Open or close the ⌘K command palette programmatically.

'use client'
import { useCommandPalette } from 'adminlte-react'

function SearchButton() {
  const palette = useCommandPalette()       // may be undefined outside the provider
  return <button onClick={() => palette?.open()}>Search</button>
}

Hooks

usePushMenu(options?)

Standalone sidebar state machine — the logic behind SidebarProvider. Use it when building a custom layout without the provider.

const { isCollapsed, isMobileOpen, toggle, collapse, expand } = usePushMenu({
  sidebarBreakpoint: 992,
  enablePersistence: true,
  isMiniMode: false,
})

useCardWidget(initialCollapsed?)

Collapse / maximize / remove state for a card. Powers the built-in Card tools; reuse it for custom card-like components.

const { isCollapsed, isMaximized, isRemoved, toggleCollapse, toggleMaximize, remove } =
  useCardWidget(false)

Argument: initialCollapsed (boolean, default false).

useDirectChat()

Toggle the contacts pane of a chat widget.

const { isContactsOpen, toggleContacts, openContacts, closeContacts } = useDirectChat()

useFullscreen()

Wraps the Fullscreen API. Powers the topbar fullscreen toggle.

const { isFullscreen, toggleFullscreen } = useFullscreen()
// enterFullscreen() / exitFullscreen() are also available (return Promise<void>)

useTreeviewAnimation(isOpen, speed?)

Animates a collapsible <ul> height. Returns a ref and inline style to spread onto the element. Powers the sidebar treeview.

const { ref, style } = useTreeviewAnimation(isOpen, 300)

<ul ref={ref} style={style} className="nav nav-treeview">…</ul>

useSortable(enabled?)

Initializes drag-and-drop (via SortableJS, lazy-loaded) on every .connectedSortable element — shared group, dragged by .card-header. Install sortablejs. Great for Kanban boards and reorderable card columns.

'use client'
import { useSortable } from 'adminlte-react'

function Board() {
  useSortable()   // pass false to disable
  return (
    <div className="row">
      <div className="col-md-4"><div className="connectedSortable">{/* cards */}</div></div>
      <div className="col-md-4"><div className="connectedSortable">{/* cards */}</div></div>
    </div>
  )
}