From 404c2d4923d6e1e46423c4865ee9402bf205cebb Mon Sep 17 00:00:00 2001
From: Aigars Silkalns
Date: Wed, 10 Jun 2026 18:02:33 +0300
Subject: [PATCH] Rename package to @colorlib/adminlte-react
The unscoped adminlte-react npm name is squatted (an unpublished 2016
package), so the README's install command never worked. Publish under
the @colorlib scope instead: package renamed, publishConfig access
public, and every install command and import in the README, docs and
demo updated.
Co-Authored-By: Claude Fable 5
---
CHANGELOG.md | 4 +-
CLAUDE.md | 6 +--
README.md | 44 +++++++++----------
demo/app/(auth)/examples/login-v2/page.tsx | 2 +-
demo/app/(auth)/examples/login/page.tsx | 2 +-
demo/app/(auth)/examples/register-v2/page.tsx | 2 +-
demo/app/(auth)/examples/register/page.tsx | 2 +-
demo/app/(dashboard)/UI/general/page.tsx | 4 +-
demo/app/(dashboard)/UI/icons/page.tsx | 2 +-
demo/app/(dashboard)/UI/timeline/page.tsx | 2 +-
.../(dashboard)/docs/command-palette/page.tsx | 4 +-
.../docs/components/elements/page.tsx | 2 +-
.../docs/components/forms/page.tsx | 2 +-
.../docs/components/tools/page.tsx | 2 +-
.../docs/components/widgets/page.tsx | 4 +-
demo/app/(dashboard)/docs/hooks/page.tsx | 6 +--
.../(dashboard)/docs/installation/page.tsx | 12 ++---
.../(dashboard)/docs/introduction/page.tsx | 4 +-
demo/app/(dashboard)/docs/layout/page.tsx | 2 +-
demo/app/(dashboard)/docs/page.tsx | 4 +-
demo/app/(dashboard)/docs/plugins/page.tsx | 2 +-
.../app/(dashboard)/docs/quick-start/page.tsx | 6 +--
demo/app/(dashboard)/docs/theming/page.tsx | 2 +-
demo/app/(dashboard)/forms/elements/page.tsx | 2 +-
demo/app/(dashboard)/forms/layout/page.tsx | 2 +-
.../app/(dashboard)/forms/validation/page.tsx | 2 +-
demo/app/(dashboard)/forms/wizard/page.tsx | 2 +-
demo/app/(dashboard)/generate/theme/page.tsx | 2 +-
demo/app/(dashboard)/index2/page.tsx | 2 +-
demo/app/(dashboard)/index3/page.tsx | 2 +-
demo/app/(dashboard)/mailbox/compose/page.tsx | 2 +-
demo/app/(dashboard)/mailbox/inbox/page.tsx | 2 +-
demo/app/(dashboard)/mailbox/read/page.tsx | 2 +-
demo/app/(dashboard)/page.tsx | 2 +-
demo/app/(dashboard)/pages/404/page.tsx | 2 +-
demo/app/(dashboard)/pages/500/page.tsx | 2 +-
demo/app/(dashboard)/pages/calendar/page.tsx | 2 +-
demo/app/(dashboard)/pages/chat/page.tsx | 2 +-
demo/app/(dashboard)/pages/faq/page.tsx | 2 +-
.../(dashboard)/pages/file-manager/page.tsx | 2 +-
demo/app/(dashboard)/pages/invoice/page.tsx | 2 +-
demo/app/(dashboard)/pages/kanban/page.tsx | 2 +-
.../(dashboard)/pages/maintenance/page.tsx | 2 +-
demo/app/(dashboard)/pages/pricing/page.tsx | 2 +-
demo/app/(dashboard)/pages/profile/page.tsx | 2 +-
demo/app/(dashboard)/pages/projects/page.tsx | 2 +-
demo/app/(dashboard)/pages/settings/page.tsx | 2 +-
demo/app/(dashboard)/tables/data/page.tsx | 2 +-
demo/app/(dashboard)/tables/simple/page.tsx | 2 +-
demo/app/(dashboard)/widgets/cards/page.tsx | 2 +-
.../app/(dashboard)/widgets/info-box/page.tsx | 2 +-
.../(dashboard)/widgets/small-box/page.tsx | 2 +-
.../collapsed-sidebar-without-hover/page.tsx | 2 +-
.../layout/collapsed-sidebar/page.tsx | 2 +-
.../(fullpage)/layout/fixed-complete/page.tsx | 2 +-
.../(fullpage)/layout/fixed-footer/page.tsx | 2 +-
.../(fullpage)/layout/fixed-header/page.tsx | 2 +-
.../(fullpage)/layout/fixed-sidebar/page.tsx | 2 +-
.../layout/layout-custom-area/page.tsx | 2 +-
.../app/(fullpage)/layout/layout-rtl/page.tsx | 2 +-
.../(fullpage)/layout/logo-switch/page.tsx | 2 +-
.../(fullpage)/layout/sidebar-mini/page.tsx | 2 +-
.../layout/unfixed-sidebar/page.tsx | 2 +-
demo/app/layout.tsx | 2 +-
demo/components/demo-form.tsx | 2 +-
demo/components/demo-layout.tsx | 4 +-
demo/components/docs/docs-page.tsx | 2 +-
demo/components/faq.tsx | 2 +-
demo/components/nav-link.tsx | 2 +-
demo/components/react-widgets-demo.tsx | 2 +-
demo/components/showcase-primitives.tsx | 2 +-
demo/components/showcase-table.tsx | 2 +-
demo/lib/chart-data.ts | 2 +-
demo/lib/menu.ts | 2 +-
demo/lib/projects-data.ts | 2 +-
demo/package.json | 4 +-
demo/types/adminlte-react-css.d.ts | 4 +-
package.json | 8 +++-
pnpm-lock.yaml | 2 +-
79 files changed, 125 insertions(+), 121 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c33021e..90f5ecb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
# Changelog
-All notable changes to **adminlte-react** are documented in this file.
+All notable changes to **@colorlib/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).
@@ -112,7 +112,7 @@ Next.js App Router and React Server Components.
- 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.
+ AdminLTE stylesheet ships under the `@colorlib/adminlte-react/css` export.
- Heavy third-party libraries are never bundled eagerly — they load via dynamic
`import()` inside the components that use them.
diff --git a/CLAUDE.md b/CLAUDE.md
index 50abb19..a6bc235 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,9 +4,9 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
## What this is
-`adminlte-react` — an AdminLTE 4 / Bootstrap 5.3 component library built for Next.js 14+ App Router (React Server Components). **The repo root _is_ the library** (the published npm package). It's also a small pnpm workspace: the root package is the library, and `demo/` is a Next.js 14 App Router app that dogfoods it via `"adminlte-react": "workspace:*"` (pnpm symlinks `demo/node_modules/adminlte-react` → repo root).
+`@colorlib/adminlte-react` — an AdminLTE 4 / Bootstrap 5.3 component library built for Next.js 14+ App Router (React Server Components). **The repo root _is_ the library** (the published npm package). It's also a small pnpm workspace: the root package is the library, and `demo/` is a Next.js 14 App Router app that dogfoods it via `"@colorlib/adminlte-react": "workspace:*"` (pnpm symlinks `demo/node_modules/adminlte-react` → repo root).
-- Root (`src/`, `package.json` named `adminlte-react`, `tsup.config.ts`, `dist/`) — the publishable library
+- Root (`src/`, `package.json` named `@colorlib/adminlte-react`, `tsup.config.ts`, `dist/`) — the publishable library
- `demo/` — demo + dev playground; consumes the library through the workspace link
There is no test framework configured. `pnpm lint` runs ESLint (`eslint.config.mjs`: typescript-eslint + react-hooks) over `src/`; `pnpm type-check` (`tsc --noEmit`) is the strict type gate. Both pass clean — keep them that way.
@@ -74,7 +74,7 @@ Heavy third-party libs are **never** statically imported. Each wrapper component
`next` is declared an **optional** peer dependency, but `layout/sidebar-nav.tsx` imports `usePathname` from `next/navigation` for active-link detection — so the sidebar in practice requires Next. Navigation uses plain `` (full page loads), not `next/link`.
### What the library ships vs. what the consumer provides
-The library ships JS + **only** `dist/css/adminlte.css` (import via `'adminlte-react/css'`). Everything else is the consumer's responsibility, loaded via CDN in `demo/app/layout.tsx`: **Bootstrap JS bundle** (required for dropdowns/modals — the library does not bundle it), Popper, OverlayScrollbars, Bootstrap Icons, Source Sans 3 font, and the plugin CSS (ApexCharts, jsVectorMap, Tabulator). When adding a component that needs runtime JS or CSS the library doesn't bundle, document the CDN/import requirement and mirror it in the demo's root layout.
+The library ships JS + **only** `dist/css/adminlte.css` (import via `'@colorlib/adminlte-react/css'`). Everything else is the consumer's responsibility, loaded via CDN in `demo/app/layout.tsx`: **Bootstrap JS bundle** (required for dropdowns/modals — the library does not bundle it), Popper, OverlayScrollbars, Bootstrap Icons, Source Sans 3 font, and the plugin CSS (ApexCharts, jsVectorMap, Tabulator). When adding a component that needs runtime JS or CSS the library doesn't bundle, document the CDN/import requirement and mirror it in the demo's root layout.
### Demo route groups
`demo/app` uses route groups: `(dashboard)` (main shell via `demo/components/demo-layout.tsx`, which wraps `DashboardLayout` with shared brand/user/topbar), `(auth)` (login/register via `AuthLayout`), `(fullpage)` (layout-flag demos: fixed header/sidebar/footer, RTL, mini, etc.).
diff --git a/README.md b/README.md
index cb68728..797e5f9 100644
--- a/README.md
+++ b/README.md
@@ -60,9 +60,9 @@ A modern React/Next.js component library for building admin dashboards and web a
## Installation
```bash
-npm install adminlte-react
+npm install @colorlib/adminlte-react
# or
-pnpm add adminlte-react
+pnpm add @colorlib/adminlte-react
```
### Peer Dependencies
@@ -104,7 +104,7 @@ for the full matrix.
```tsx
// app/layout.tsx
-import 'adminlte-react/css'
+import '@colorlib/adminlte-react/css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import './globals.css'
@@ -135,7 +135,7 @@ export default function RootLayout({ children }) {
```tsx
// app/(dashboard)/layout.tsx
-import { DashboardLayout } from 'adminlte-react'
+import { DashboardLayout } from '@colorlib/adminlte-react'
import { menuItems } from '@/lib/menu'
export default function Layout({ children }) {
@@ -156,7 +156,7 @@ export default function Layout({ children }) {
```ts
// lib/menu.ts
-import type { MenuNode } from 'adminlte-react'
+import type { MenuNode } from '@colorlib/adminlte-react'
export const menuItems: MenuNode[] = [
{
@@ -189,7 +189,7 @@ export const menuItems: MenuNode[] = [
```tsx
// app/(dashboard)/page.tsx
-import { AppContent, SmallBox, Card, Progress } from 'adminlte-react'
+import { AppContent, SmallBox, Card, Progress } from '@colorlib/adminlte-react'
export default function Dashboard() {
return (
@@ -289,7 +289,7 @@ Standalone hooks:
```tsx
'use client'
-import { useSidebarContext, useColorModeContext } from 'adminlte-react'
+import { useSidebarContext, useColorModeContext } from '@colorlib/adminlte-react'
function Toolbar() {
const { toggle } = useSidebarContext()
@@ -320,7 +320,7 @@ All components use Bootstrap 5.3 utility classes. Customize via CSS variables or
Full TypeScript support with exported types:
```tsx
-import type { DashboardLayoutProps, MenuNode, BootstrapTheme } from 'adminlte-react'
+import type { DashboardLayoutProps, MenuNode, BootstrapTheme } from '@colorlib/adminlte-react'
const props: DashboardLayoutProps = {
menuItems: [],
@@ -368,65 +368,65 @@ Contributions are welcome! Open an issue or pull request on
## 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).
+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=@colorlib/adminlte-react).
-
+
- Apex Dashboard
+ Apex Dashboard
Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. 5 dashboard variants, 20+ app pages, 125+ routes, full CRUD.
|
-
+
- Zenith Dashboard
+ Zenith Dashboard
Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. Achromatic design, 50+ pages, 6 dashboards, live theme customizer.
|
-
+
- Haze
+ Haze
Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer.
|
-
+
- TailPanel
+ TailPanel
React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes.
|
-
+
- Admindek
+ Admindek
Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets.
|
-
+
- SvelteForge Premium
+ SvelteForge Premium
SvelteKit + Tailwind CSS v4. 30+ wired-up modules, multi-tenant from row zero, dark/light/system mode.
|
@@ -434,7 +434,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
- View All Premium Templates →
+ View All Premium Templates →
## License
diff --git a/demo/app/(auth)/examples/login-v2/page.tsx b/demo/app/(auth)/examples/login-v2/page.tsx
index 2846f89..a1d249a 100644
--- a/demo/app/(auth)/examples/login-v2/page.tsx
+++ b/demo/app/(auth)/examples/login-v2/page.tsx
@@ -1,4 +1,4 @@
-import { AuthLayout } from 'adminlte-react'
+import { AuthLayout } from '@colorlib/adminlte-react'
import { DemoForm } from '@/components/demo-form'
export const metadata = { title: "Login v2" }
diff --git a/demo/app/(auth)/examples/login/page.tsx b/demo/app/(auth)/examples/login/page.tsx
index a0d4df1..3b1cb34 100644
--- a/demo/app/(auth)/examples/login/page.tsx
+++ b/demo/app/(auth)/examples/login/page.tsx
@@ -1,4 +1,4 @@
-import { AuthLayout } from 'adminlte-react'
+import { AuthLayout } from '@colorlib/adminlte-react'
import { DemoForm } from '@/components/demo-form'
export const metadata = { title: "Login" }
diff --git a/demo/app/(auth)/examples/register-v2/page.tsx b/demo/app/(auth)/examples/register-v2/page.tsx
index 4693458..32e1027 100644
--- a/demo/app/(auth)/examples/register-v2/page.tsx
+++ b/demo/app/(auth)/examples/register-v2/page.tsx
@@ -1,4 +1,4 @@
-import { AuthLayout } from 'adminlte-react'
+import { AuthLayout } from '@colorlib/adminlte-react'
import { DemoForm } from '@/components/demo-form'
export const metadata = { title: "Register v2" }
diff --git a/demo/app/(auth)/examples/register/page.tsx b/demo/app/(auth)/examples/register/page.tsx
index 8c72727..68e2a66 100644
--- a/demo/app/(auth)/examples/register/page.tsx
+++ b/demo/app/(auth)/examples/register/page.tsx
@@ -1,4 +1,4 @@
-import { AuthLayout } from 'adminlte-react'
+import { AuthLayout } from '@colorlib/adminlte-react'
import { DemoForm } from '@/components/demo-form'
export const metadata = { title: "Register" }
diff --git a/demo/app/(dashboard)/UI/general/page.tsx b/demo/app/(dashboard)/UI/general/page.tsx
index 2ddf8b8..3e1dca5 100644
--- a/demo/app/(dashboard)/UI/general/page.tsx
+++ b/demo/app/(dashboard)/UI/general/page.tsx
@@ -1,5 +1,5 @@
import type { CSSProperties } from 'react'
-import { AppContent } from 'adminlte-react'
+import { AppContent } from '@colorlib/adminlte-react'
import { ReactWidgetsDemo } from '@/components/react-widgets-demo'
export const metadata = { title: "General UI" }
@@ -14,7 +14,7 @@ export default function Page() {
]}
>
AdminLTE React components
- Typed, state-driven components from the adminlte-react library — no jQuery, no Bootstrap JS required.
+ Typed, state-driven components from the @colorlib/adminlte-react library — no jQuery, no Bootstrap JS required.
diff --git a/demo/app/(dashboard)/UI/icons/page.tsx b/demo/app/(dashboard)/UI/icons/page.tsx
index 29207b3..6033a95 100644
--- a/demo/app/(dashboard)/UI/icons/page.tsx
+++ b/demo/app/(dashboard)/UI/icons/page.tsx
@@ -1,4 +1,4 @@
-import { AppContent, Card } from 'adminlte-react'
+import { AppContent, Card } from '@colorlib/adminlte-react'
export const metadata = { title: "Icons" }
diff --git a/demo/app/(dashboard)/UI/timeline/page.tsx b/demo/app/(dashboard)/UI/timeline/page.tsx
index 06d9de7..c35560b 100644
--- a/demo/app/(dashboard)/UI/timeline/page.tsx
+++ b/demo/app/(dashboard)/UI/timeline/page.tsx
@@ -1,6 +1,6 @@
import Image from 'next/image'
import { withBase } from '@/lib/base'
-import { AppContent } from 'adminlte-react'
+import { AppContent } from '@colorlib/adminlte-react'
export const metadata = { title: "Timeline" }
diff --git a/demo/app/(dashboard)/docs/command-palette/page.tsx b/demo/app/(dashboard)/docs/command-palette/page.tsx
index 3896a8d..724c853 100644
--- a/demo/app/(dashboard)/docs/command-palette/page.tsx
+++ b/demo/app/(dashboard)/docs/command-palette/page.tsx
@@ -38,7 +38,7 @@ import {
CommandPalette,
flattenMenuToCommands,
useCommandPalette,
-} from 'adminlte-react'
+} from '@colorlib/adminlte-react'
import { menuItems } from '@/lib/menu'
function SearchButton() {
@@ -64,7 +64,7 @@ export function Shell({ children }: { children: React.ReactNode }) {
onShow / onHide callbacks fire on Bootstrap's modal
events.
- flattenMenuToCommands or supply your own{' '}
CommandItem[].
-