@adminlte/react 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,161 @@
+# Changelog
+
+All notable changes to **adminlte-react** are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+### Added
+
+#### UI element components
+
+- `Badge` — contrast-aware `text-bg-*` label; `pill` and `positioned` (overlay) variants.
+- `Breadcrumb` — data-driven trail; last item renders as the active page; optional `divider`.
+- `Pagination` — controlled, windowed with ellipses; renders `<button>`s when given
+  `onPageChange`, otherwise `<a>`; `size`, `siblingCount`, and `align` options.
+- `Spinner` — `border`/`grow` variants with an accessible status label.
+- `Avatar` / `AvatarGroup` — image or initials fallback, presence dot, overlapping stacks.
+- `ListGroup` / `ListGroupItem` — item renders as `<a>`, `<button>`, or `<div>` based on its
+  props (`href`/`onClick`/`action`); `active`, `disabled`, contextual `theme`.
+- `Table` — generic, column-driven table (`columns` + `data`, custom cell `render`, `rowKey`)
+  with `striped`/`hover`/`bordered`/`small`/`responsive` options.
+- `Dropdown` — items, dividers, headers, icons; `split`, `direction`, `align`, outline variant
+  (driven by the Bootstrap JS bundle).
+- `Carousel` — slides with captions, indicators, controls, fade, autoplay (Bootstrap JS bundle).
+- `Offcanvas` / `OffcanvasTrigger` — slide-in panel with header/footer and a paired trigger
+  (Bootstrap JS bundle).
+- `Stepper` — controlled progress/wizard stepper (horizontal or vertical, optional clickable steps).
+
+#### Navigation
+
+- `LinkProvider` / `useLinkComponent` and a `linkComponent` prop on `DashboardLayout` — inject a
+  router link (e.g. an adapter around `next/link`) so sidebar navigation is client-side. Defaults
+  to a plain `<a>`, keeping the library framework-agnostic.
+- `docsHref` / `docsLabel` props on `DashboardLayout` for the sidebar footer link, routed through
+  the injectable Link. **Changed:** the footer link is now opt-in — previously it was hardcoded to
+  the external AdminLTE HTML docs; it now renders only when `docsHref` is set (point it at your own
+  docs). The demo points it at its in-app `/docs`.
+
+### Changed
+
+- **Build: per-file ESM output (RSC boundaries preserved).** The package is no longer a single
+  bundled file stamped with a blanket `"use client"`. Each source module now compiles to its own
+  `dist/` file, so the `'use client'` directive survives per component: server-component-authored
+  widgets (`Button`, `Input`, `SmallBox`, `DashboardLayout`, …) stay Server Components for
+  consumers, and bundlers can tree-shake through the barrel. CommonJS output was dropped (the
+  package is ESM-only; it targets Next.js 14+ / modern bundlers). Sourcemaps are no longer
+  published (≈7 MB lighter tarball; dist shrank from ≈9 MB to ≈0.75 MB).
+- **All heavy plugins are now optional peer dependencies** (`apexcharts`, `flatpickr`,
+  `jsvectormap`, `quill`, `sortablejs`, `tabulator-tables`, `tom-select`). Previously apexcharts,
+  jsvectormap, and sortablejs were silently bundled in; now all plugins follow the documented
+  model — install only the ones whose components you use. They are still lazy-loaded via dynamic
+  `import()`, which Next.js code-splits per page.
+- `flattenMenuToCommands` / `CommandItem` moved to a server-safe module so Server Components
+  (e.g. `DashboardLayout`) can flatten menus during server render. Barrel imports are unchanged.
+- `ApexChart` props are now typed (`config: ApexOptions`, typed `series`) instead of `any`, and
+  prop changes update the chart in place (`updateOptions`) instead of destroy + re-create.
+  Inline (non-memoized) `series`/`config` objects no longer re-create the chart every render.
+- `SidebarProvider` / `ColorModeProvider` context values are memoized — consumers no longer
+  re-render on every provider render.
+- `Input`, `Select`, `Textarea`, and `InputSwitch` forward refs to their underlying form
+  controls (focus management, react-hook-form, etc.).
+- Sidebar OverlayScrollbars detection switched from a 100 ms `setInterval` poll to an immediate
+  check + `requestAnimationFrame` retry loop, tolerating lazily loaded
+  (`next/script afterInteractive`) OverlayScrollbars.
+
+### Fixed
+
+- `Datatable` destroys its Tabulator instance on unmount/re-render (previously leaked instances
+  and stacked tables on prop changes).
+- `Editor` no longer creates a second Quill instance when `placeholder`/`quillOptions` change;
+  the `value` prop now syncs into the editor after mount (controlled usage works), and the
+  hidden form input tracks the edited HTML instead of the stale `value` prop.
+- `Card` `removable` tool button actually removes the card (was a no-op); new `onRemove`
+  callback fires after removal.
+- `Input` `igroupSize` now actually sizes the control (`form-control-sm`/`form-control-lg`);
+  previously the computed class was never applied.
+
+### Tested
+
+- Vitest unit tests for pure logic and presentational components.
+- CI workflow (GitHub Actions): type-check, lint, unit tests, library build, an RSC-boundary
+  check on `dist/`, and demo type-check + build.
+
+## [0.1.0] - 2026-05-29
+
+Initial public release — an AdminLTE 4 / Bootstrap 5.3 component library for the
+Next.js App Router and React Server Components.
+
+### Added
+
+#### Layout
+
+- `DashboardLayout` — the application shell. A React Server Component that computes
+  static `<body>` layout classes on the server and nests the client providers
+  (color mode, sidebar, command palette) inside. Supports `fixedHeader`,
+  `fixedSidebar`, `fixedFooter`, `sidebarMini`, `sidebarTheme`, `sidebarBreakpoint`,
+  RTL via `dir`, optional sidebar-state persistence, and custom topbar/footer slots.
+- `AuthLayout` — standalone login/register layout that applies its body classes via
+  effect, so it composes under a Next.js root layout.
+- `AppContent` — page content wrapper with title and breadcrumbs.
+- Lower-level pieces exported for custom shells: `Topbar`, `Sidebar`, `SidebarBrand`,
+  `SidebarNav`, `SidebarNavItem`, `SidebarOverlay`, `Footer`, `ColorModeToggle`.
+
+#### Widgets
+
+- `SmallBox`, `InfoBox`, `Card` (collapse / maximize / remove), `Alert`, `Callout`,
+  `Progress`, `ProgressGroup`, `Ratings`, `ProfileCard`, `DescriptionBlock`,
+  `Timeline`.
+- Topbar dropdowns: `NavMessages`, `NavNotifications`, `NavTasks`.
+- `DirectChat` — chat card with a slide-in contacts pane.
+- `ApexChart` and `SparklineChart` — ApexCharts wrappers (lazy-loaded).
+- `WorldMap` — jsVectorMap world map (lazy-loaded).
+- `CommandPalette` — ⌘K / Ctrl+K searchable navigator, plus the
+  `flattenMenuToCommands` helper to build commands from a menu tree.
+
+#### Forms
+
+- `Button`, `Input`, `Select`, `Textarea`, `InputSwitch`, `InputColor`, `InputFile`.
+- `InputFlatpickr` (date/time picker) and `InputTomSelect` (searchable / multi-select),
+  both lazy-loaded.
+
+#### Tools
+
+- `Modal` — Bootstrap modal dialog.
+- `Datatable` — Tabulator-powered data grid with local data or remote `apiUrl`
+  (lazy-loaded).
+- `Editor` — Quill rich-text editor (lazy-loaded).
+
+#### Contexts & hooks
+
+- Contexts: `SidebarProvider` / `useSidebarContext`,
+  `ColorModeProvider` / `useColorModeContext`,
+  `CommandPaletteProvider` / `useCommandPalette`.
+- Hooks: `usePushMenu`, `useCardWidget`, `useDirectChat`, `useFullscreen`,
+  `useTreeviewAnimation`, `useSortable`.
+
+#### Theming
+
+- Light / dark / auto color modes driven by Bootstrap's `data-bs-theme`, with
+  `auto` resolved from `prefers-color-scheme` and the choice persisted to
+  `localStorage` (`lte-theme`).
+- Optional sidebar collapsed-state persistence (`lte.sidebar.state`).
+
+#### Types
+
+- Fully typed public API, including `MenuNode` (`header` | `item` | `group`),
+  `BootstrapTheme`, `ColorMode`, `DashboardLayoutProps`, `AuthLayoutProps`,
+  `AppContentProps`, `TopbarUser`, direct-chat types, and `CommandItem`.
+
+### Notes
+
+- Built with `tsup` to dual ESM + CJS with type declarations and source maps. The
+  published bundle is tagged `"use client"` so it works under the App Router; the
+  AdminLTE stylesheet ships under the `adminlte-react/css` export.
+- Heavy third-party libraries are never bundled eagerly — they load via dynamic
+  `import()` inside the components that use them.
+
+[Unreleased]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/ColorlibHQ/adminlte-react/releases/tag/v0.1.0

package/README.md

@@ -0,0 +1,454 @@
+# AdminLTE React
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](#license)
+[![React 18+](https://img.shields.io/badge/React-18+-149eca.svg?logo=react&logoColor=white)](https://react.dev)
+[![Next.js 14+](https://img.shields.io/badge/Next.js-14+-000000.svg?logo=nextdotjs&logoColor=white)](https://nextjs.org)
+[![Bootstrap 5.3](https://img.shields.io/badge/Bootstrap-5.3-7952b3.svg?logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.3/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6.svg?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![RSC ready](https://img.shields.io/badge/RSC-ready-000000.svg)](#performance)
+
+A modern React/Next.js component library for building admin dashboards and web applications with AdminLTE 4 styling and Bootstrap 5.3 — built for the Next.js App Router and React Server Components by [Colorlib](https://colorlib.com).
+
+**Status**: v0.1.0 (Early Release) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
+
+<p align="center">
+  <a href="https://adminlte.io/themes/next-react/">
+    <img alt="AdminLTE React dashboard — light theme" src="docs/screenshots/dashboard-light.png" width="49%">
+  </a>
+  <a href="https://adminlte.io/themes/next-react/">
+    <img alt="AdminLTE React dashboard — dark theme" src="docs/screenshots/dashboard-dark.png" width="49%">
+  </a>
+</p>
+
+**Available for your stack** — the same AdminLTE 4 dashboard, in the framework you know best:
+
+<p align="center">
+  <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="React" src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="Next.js" src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Vue" src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Nuxt" src="https://img.shields.io/badge/Nuxt-00DC82?style=for-the-badge&logo=nuxt&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-laravel"><img height="36" alt="Laravel" src="https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-django"><img height="36" alt="Django" src="https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=white"></a>
+</p>
+
+<p align="center"><sub>
+  Frameworks:
+  <a href="https://github.com/ColorlibHQ/adminlte-react">React</a> ·
+  <a href="https://github.com/ColorlibHQ/adminlte-react">Next.js</a> ·
+  <a href="https://github.com/ColorlibHQ/adminlte-vue">Vue</a> ·
+  <a href="https://github.com/ColorlibHQ/adminlte-vue">Nuxt</a> ·
+  <a href="https://github.com/ColorlibHQ/adminlte-laravel">Laravel</a> ·
+  <a href="https://github.com/ColorlibHQ/adminlte-django">Django</a>
+</sub></p>
+
+> **Documentation:** Full guides and an API reference for every component, hook, and
+> context live in the demo app under `/docs`. Run `pnpm demo` and open
+> [`/docs/introduction`](http://localhost:3000/docs/introduction). A condensed reference
+> follows below, and the release history is in the [CHANGELOG](./CHANGELOG.md).
+
+## Features
+
+- ✨ **React Server Components (RSC)** - Server-first; only interactive parts ship as client components
+- 📦 **No required runtime dependencies** - Beyond the React/Next peers; nothing extra forced into your bundle
+- 🎨 **Pre-built Components** - 30+ components across layout, widgets, forms, and tools
+- 🌙 **Dark Mode Support** - Light/Dark/Auto, driven by Bootstrap's `data-bs-theme`
+- ♿ **Accessible** - Semantic markup, ARIA landmarks, keyboard navigation
+- 🎯 **TypeScript First** - Fully typed props, hooks, and the menu data model
+- 📱 **Responsive** - Mobile-first Bootstrap 5.3 design with an off-canvas sidebar
+- 🔌 **Lazy plugins** - ApexCharts, Tabulator, Quill, Flatpickr, Tom Select & jsVectorMap load on demand
+
+## Installation
+
+```bash
+npm install adminlte-react
+# or
+pnpm add adminlte-react
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom next
+```
+
+`react` and `react-dom` (18+) are required. **Next.js 14+** is required in practice — the
+sidebar uses `next/navigation` for active-link detection and the command palette uses the
+Next router. You also need **Bootstrap 5.3 JavaScript** (for dropdowns, modals, tooltips,
+toasts) and **Bootstrap Icons** (the components use `bi-*` classes); load both from a CDN
+or install them:
+
+```bash
+npm install bootstrap bootstrap-icons
+```
+
+### Optional Plugins
+
+Install only the libraries for the lazy components you use:
+
+```bash
+npm install apexcharts       # <ApexChart>, <SparklineChart>
+npm install tabulator-tables # <Datatable>
+npm install quill            # <Editor>
+npm install flatpickr        # <InputFlatpickr>
+npm install tom-select       # <InputTomSelect>
+npm install jsvectormap      # <WorldMap>
+npm install sortablejs       # useSortable()
+```
+
+Each also needs its own CSS loaded once. See the **Plugins & Dynamic Imports** docs page
+for the full matrix.
+
+## Quick Start
+
+### 1. Import CSS in your Next.js layout
+
+```tsx
+// app/layout.tsx
+import 'adminlte-react/css'
+import 'bootstrap-icons/font/bootstrap-icons.css'
+import './globals.css'
+
+export const metadata = {
+  title: 'Dashboard',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css"
+        />
+      </head>
+      <body>
+        {children}
+        {/* Bootstrap JS required for dropdowns, modals, etc */}
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+      </body>
+    </html>
+  )
+}
+```
+
+### 2. Create a dashboard layout
+
+```tsx
+// app/(dashboard)/layout.tsx
+import { DashboardLayout } from 'adminlte-react'
+import { menuItems } from '@/lib/menu'
+
+export default function Layout({ children }) {
+  return (
+    <DashboardLayout
+      menuItems={menuItems}
+      fixedHeader
+      fixedSidebar
+      colorModeToggle
+    >
+      {children}
+    </DashboardLayout>
+  )
+}
+```
+
+### 3. Define your menu
+
+```ts
+// lib/menu.ts
+import type { MenuNode } from 'adminlte-react'
+
+export const menuItems: MenuNode[] = [
+  {
+    type: 'group',
+    text: 'Dashboard',
+    icon: 'bi-speedometer',
+    children: [
+      {
+        type: 'item',
+        text: 'Dashboard v1',
+        href: '/',
+        icon: 'bi-circle',
+      },
+    ],
+  },
+  {
+    type: 'header',
+    text: 'UI ELEMENTS',
+  },
+  {
+    type: 'item',
+    text: 'Profile',
+    href: '/profile',
+    icon: 'bi-person',
+  },
+]
+```
+
+### 4. Build dashboard pages
+
+```tsx
+// app/(dashboard)/page.tsx
+import { AppContent, SmallBox, Card, Progress } from 'adminlte-react'
+
+export default function Dashboard() {
+  return (
+    <AppContent
+      title="Dashboard"
+      breadcrumbs={[
+        { label: 'Home', href: '/' },
+        { label: 'Dashboard' },
+      ]}
+    >
+      <div className="row">
+        <div className="col-lg-3 col-6">
+          <SmallBox
+            title="53"
+            text="New Orders"
+            theme="primary"
+            icon={<i className="bi bi-bag-check"></i>}
+            url="#"
+          />
+        </div>
+      </div>
+
+      <div className="row mt-4">
+        <div className="col-md-6">
+          <Card title="Sales Chart" theme="primary">
+            {/* Your chart here */}
+          </Card>
+        </div>
+      </div>
+    </AppContent>
+  )
+}
+```
+
+## Components
+
+### Layout
+
+- **`DashboardLayout`** - Main app shell (RSC) with sidebar, topbar, footer & command palette
+- **`AuthLayout`** - Standalone auth page layout (login, register)
+- **`AppContent`** - Page content wrapper with title and breadcrumbs
+- Lower-level pieces are also exported: `Topbar`, `Sidebar`, `SidebarBrand`, `SidebarNav`, `SidebarNavItem`, `SidebarOverlay`, `Footer`, `ColorModeToggle`
+
+### Widgets
+
+- **`SmallBox`** - Colored stat tile with footer link
+- **`InfoBox`** - Metric widget with optional progress bar
+- **`Card`** - Collapsible / maximizable / removable card container
+- **`Alert`** - Alert message with optional icon, title & dismiss
+- **`Callout`** - Highlighted informational block
+- **`Progress`** / **`ProgressGroup`** - Single bar / labeled group
+- **`Ratings`** - Star ratings display
+- **`ProfileCard`** - User profile card with social links
+- **`DescriptionBlock`** - Label/value blocks
+- **`Timeline`** - Chronological timeline
+- **`NavMessages`** / **`NavNotifications`** / **`NavTasks`** - Topbar dropdown widgets
+- **`DirectChat`** - Chat widget with contacts pane
+- **`ApexChart`** / **`SparklineChart`** - ApexCharts wrappers (dynamic import)
+- **`WorldMap`** - jsVectorMap world map (dynamic import)
+- **`CommandPalette`** - ⌘K searchable navigator (+ `flattenMenuToCommands` helper)
+- **`Accordion`** / **`Tabs`** - Collapsible panels & tab/pill switcher (state-driven, no Bootstrap JS)
+- **`Toast`** / **`Tooltip`** - Controlled toast notification & hover/focus tooltip
+
+### Forms
+
+- **`Button`** - Themed button with variants, sizes, icon
+- **`Input`** / **`Textarea`** - Text inputs with label, hint & error
+- **`Select`** - Dropdown select (options or children)
+- **`InputSwitch`** - Toggle switch
+- **`InputColor`** - Native color picker
+- **`InputFile`** - File input (single/multiple)
+- **`InputFlatpickr`** - Date/time picker (dynamic import)
+- **`InputTomSelect`** - Searchable / multi-select (dynamic import)
+
+### Tools
+
+- **`Modal`** - Bootstrap modal dialog
+- **`Datatable`** - Data grid with Tabulator (dynamic import)
+- **`Editor`** - Rich text editor with Quill (dynamic import)
+
+## Context & Hooks
+
+`DashboardLayout` provides three contexts. Each has a hook (use them in client components):
+
+- **`useSidebarContext()`** → `{ isCollapsed, isMobileOpen, isMiniMode, toggle, collapse, expand, sidebarBreakpoint }`
+- **`useColorModeContext()`** → `{ colorMode, setColorMode, resolvedMode }`
+- **`useCommandPalette()`** → `{ isOpen, open, close, toggle }` (or `undefined` outside the provider)
+
+Standalone hooks:
+
+- **`usePushMenu(options?)`** - Sidebar state machine (used by `SidebarProvider`)
+- **`useCardWidget(initialCollapsed?)`** - Card collapse / maximize / remove state
+- **`useDirectChat()`** - Toggle the chat contacts pane
+- **`useFullscreen()`** - Fullscreen API wrapper
+- **`useTreeviewAnimation(isOpen, speed?)`** - Animate a collapsible `<ul>` height
+- **`useSortable(enabled?)`** - Drag-and-drop on `.connectedSortable` lists (SortableJS)
+
+```tsx
+'use client'
+import { useSidebarContext, useColorModeContext } from 'adminlte-react'
+
+function Toolbar() {
+  const { toggle } = useSidebarContext()
+  const { setColorMode } = useColorModeContext()
+  return (
+    <>
+      <button onClick={toggle}>Toggle sidebar</button>
+      <button onClick={() => setColorMode('dark')}>Dark mode</button>
+    </>
+  )
+}
+```
+
+## Styling
+
+All components use Bootstrap 5.3 utility classes. Customize via CSS variables or override classes:
+
+```css
+:root {
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  /* ... other variables */
+}
+```
+
+## Type Safety
+
+Full TypeScript support with exported types:
+
+```tsx
+import type { DashboardLayoutProps, MenuNode, BootstrapTheme } from 'adminlte-react'
+
+const props: DashboardLayoutProps = {
+  menuItems: [],
+  colorModeToggle: true,
+}
+```
+
+## Dark Mode
+
+Dark mode is handled automatically by `ColorModeProvider` (inside `DashboardLayout`). It sets `data-bs-theme` on `<html>`, resolves `auto` from `prefers-color-scheme`, and persists the user's choice in localStorage under the key `lte-theme`.
+
+Set the starting mode with `initialColorMode` on `DashboardLayout`, or mount the provider directly:
+
+```tsx
+<ColorModeProvider initialMode="dark">
+  {children}
+</ColorModeProvider>
+```
+
+## Accessibility
+
+Components are built with accessibility in mind:
+
+- Semantic HTML and ARIA landmarks
+- Keyboard navigation (including the ⌘K command palette)
+- Focus management
+- Reduced-motion friendly animations
+
+## Browser Support
+
+Modern evergreen browsers — latest Chrome, Firefox, Safari, and Edge.
+
+## Performance
+
+- **RSC-optimized** - Presentational components render on the server; only interactive parts hydrate
+- **Lazy plugins** - Chart, map, datatable, editor, and advanced form libraries load on demand via dynamic `import()`
+- **CSS-in-JS free** - Plain Bootstrap classes and CSS variables
+- **Tree-shakeable** - ESM build with `sideEffects` scoped to the stylesheet, so unused components are dropped
+
+## Contributing
+
+Contributions are welcome! Open an issue or pull request on
+[GitHub](https://github.com/ColorlibHQ/adminlte-react). Build the library with
+`pnpm build` and run `pnpm type-check` before submitting.
+
+## Upgrade to a Premium Dashboard
+
+Need advanced features, more pages, and dedicated support? Explore Colorlib's collection of professional admin templates on [DashboardPack](https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react).
+
+<table>
+  <tr>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
+        <img src="docs/screenshots/dashboardpack/apex.png" alt="Apex Dashboard — Next.js admin template with shadcn/ui" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Apex Dashboard</strong></a>
+      <br>
+      <sub>Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. 5 dashboard variants, 20+ app pages, 125+ routes, full CRUD.</sub>
+    </td>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/zenith-shadcn/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
+        <img src="docs/screenshots/dashboardpack/zenith.png" alt="Zenith — minimal Next.js admin dashboard with shadcn/ui" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/zenith-shadcn/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Zenith Dashboard</strong></a>
+      <br>
+      <sub>Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. Achromatic design, 50+ pages, 6 dashboards, live theme customizer.</sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
+        <img src="docs/screenshots/dashboardpack/haze.png" alt="Haze — Nuxt 4 admin dashboard with 92+ pages" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Haze</strong></a>
+      <br>
+      <sub>Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer.</sub>
+    </td>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
+        <img src="docs/screenshots/dashboardpack/tailpanel.png" alt="TailPanel — React and Tailwind CSS admin panel" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>TailPanel</strong></a>
+      <br>
+      <sub>React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes.</sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
+        <img src="docs/screenshots/dashboardpack/admindek.png" alt="Admindek — feature-rich Bootstrap 5 dashboard" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>Admindek</strong></a>
+      <br>
+      <sub>Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets.</sub>
+    </td>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/svelteforge-premium/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react">
+        <img src="docs/screenshots/dashboardpack/svelteforge.png" alt="SvelteForge Premium — SvelteKit admin dashboard" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/svelteforge-premium/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>SvelteForge Premium</strong></a>
+      <br>
+      <sub>SvelteKit + Tailwind CSS v4. 30+ wired-up modules, multi-tenant from row zero, dark/light/system mode.</sub>
+    </td>
+  </tr>
+</table>
+
+<p align="center">
+  <a href="https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=adminlte-react"><strong>View All Premium Templates →</strong></a>
+</p>
+
+## License
+
+MIT © [Colorlib](https://colorlib.com)
+
+## Resources
+
+- [AdminLTE Documentation](https://adminlte.io)
+- [Bootstrap 5 Documentation](https://getbootstrap.com/docs/5.3/)
+- [Bootstrap Icons](https://icons.getbootstrap.com/)
+
+## Support
+
+For issues, feature requests, or questions:
+- [GitHub Issues](https://github.com/ColorlibHQ/adminlte-react/issues)
+- [GitHub Discussions](https://github.com/ColorlibHQ/adminlte-react/discussions)