Rename package to @colorlib/adminlte-react

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.
 

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 `<a href>` (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.).

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,73 +368,73 @@ 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).
 
 <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">
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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>
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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">
+      <a href="https://dashboardpack.com/theme-details/zenith-shadcn/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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>
+      <a href="https://dashboardpack.com/theme-details/zenith-shadcn/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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">
+      <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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>
+      <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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">
+      <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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>
+      <a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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">
+      <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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>
+      <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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">
+      <a href="https://dashboardpack.com/theme-details/svelteforge-premium/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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>
+      <a href="https://dashboardpack.com/theme-details/svelteforge-premium/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/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>
+  <a href="https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=@colorlib/adminlte-react"><strong>View All Premium Templates →</strong></a>
 </p>
 
 ## License

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" }

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" }

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" }

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" }

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() {
       ]}
     >
       <h4 className="mb-1">AdminLTE React components</h4>
-      <p className="text-secondary">Typed, state-driven components from the <code>adminlte-react</code> library — no jQuery, no Bootstrap JS required.</p>
+      <p className="text-secondary">Typed, state-driven components from the <code>@colorlib/adminlte-react</code> library — no jQuery, no Bootstrap JS required.</p>
       <ReactWidgetsDemo />
 
       <hr className="my-4" />

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" }
 

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" }
 

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 }) {
       </p>
       <CodeBlock
         language="tsx"
-        code={`import type { CommandItem } from 'adminlte-react'
+        code={`import type { CommandItem } from '@colorlib/adminlte-react'
 
 const commands: CommandItem[] = [
   ...flattenMenuToCommands(menuItems),

demo/app/(dashboard)/docs/components/elements/page.tsx

@@ -11,7 +11,7 @@ import {
   Carousel,
   Offcanvas,
   OffcanvasTrigger,
-} from 'adminlte-react'
+} from '@colorlib/adminlte-react'
 import { DocsPage } from '@/components/docs/docs-page'
 import { ShowcasePrimitives } from '@/components/showcase-primitives'
 import { ShowcaseTable } from '@/components/showcase-table'

demo/app/(dashboard)/docs/components/forms/page.tsx

@@ -7,7 +7,7 @@ import {
   InputSwitch,
   InputColor,
   InputFile,
-} from 'adminlte-react'
+} from '@colorlib/adminlte-react'
 import { DocsPage } from '@/components/docs/docs-page'
 import { CodeBlock } from '@/components/docs/code-block'
 import { PropsTable } from '@/components/docs/props-table'

demo/app/(dashboard)/docs/components/tools/page.tsx

@@ -24,7 +24,7 @@ export default function ToolsPage() {
         <code>onShow</code> / <code>onHide</code> callbacks fire on Bootstrap&apos;s modal
         events.
       </p>
-      <CodeBlock code={`import { Modal, Button } from 'adminlte-react'
+      <CodeBlock code={`import { Modal, Button } from '@colorlib/adminlte-react'
 
 export function Example() {
   return (

demo/app/(dashboard)/docs/components/widgets/page.tsx

@@ -11,7 +11,7 @@ import {
   Timeline,
   DescriptionBlock,
   ProfileCard,
-} from 'adminlte-react'
+} from '@colorlib/adminlte-react'
 import { DocsPage } from '@/components/docs/docs-page'
 import { CodeBlock } from '@/components/docs/code-block'
 import { PropsTable } from '@/components/docs/props-table'
@@ -438,7 +438,7 @@ export default function WidgetsPage() {
         To build a custom set, use <code>flattenMenuToCommands</code> or supply your own{' '}
         <code>CommandItem[]</code>.
       </p>
-      <CodeBlock code={`import { CommandPalette, flattenMenuToCommands } from 'adminlte-react'
+      <CodeBlock code={`import { CommandPalette, flattenMenuToCommands } from '@colorlib/adminlte-react'
 
 const items = flattenMenuToCommands(menuItems)
 // items: { label, href, icon?, section? }[]

demo/app/(dashboard)/docs/hooks/page.tsx

@@ -25,7 +25,7 @@ export default function HooksPage() {
       <h3 id="use-sidebar-context">useSidebarContext()</h3>
       <p>Read and control the sidebar (desktop collapse + mobile off-canvas).</p>
       <CodeBlock code={`'use client'
-import { useSidebarContext } from 'adminlte-react'
+import { useSidebarContext } from '@colorlib/adminlte-react'
 
 function CollapseButton() {
   const { isCollapsed, toggle } = useSidebarContext()
@@ -52,7 +52,7 @@ function CollapseButton() {
       <h3 id="use-command-palette">useCommandPalette()</h3>
       <p>Open or close the ⌘K command palette programmatically.</p>
       <CodeBlock code={`'use client'
-import { useCommandPalette } from 'adminlte-react'
+import { useCommandPalette } from '@colorlib/adminlte-react'
 
 function SearchButton() {
   const palette = useCommandPalette()       // may be undefined outside the provider
@@ -151,7 +151,7 @@ function SearchButton() {
         and reorderable card columns.
       </p>
       <CodeBlock code={`'use client'
-import { useSortable } from 'adminlte-react'
+import { useSortable } from '@colorlib/adminlte-react'
 
 function Board() {
   useSortable()   // pass false to disable

demo/app/(dashboard)/docs/installation/page.tsx

@@ -4,7 +4,7 @@ import { CodeBlock } from '@/components/docs/code-block'
 
 export const metadata: Metadata = {
   title: 'Installation',
-  description: 'Install adminlte-react, its peer dependencies, and wire up CSS and Bootstrap JS.',
+  description: 'Install @colorlib/adminlte-react, its peer dependencies, and wire up CSS and Bootstrap JS.',
 }
 
 export default function InstallationPage() {
@@ -16,11 +16,11 @@ export default function InstallationPage() {
       <h2>1. Install the package</h2>
       <CodeBlock
         language="bash"
-        code={`pnpm add adminlte-react
+        code={`pnpm add @colorlib/adminlte-react
 # or
-npm install adminlte-react
+npm install @colorlib/adminlte-react
 # or
-yarn add adminlte-react`}
+yarn add @colorlib/adminlte-react`}
       />
 
       <h2>2. Install peer dependencies</h2>
@@ -44,7 +44,7 @@ yarn add adminlte-react`}
       </p>
       <CodeBlock
         filename="app/layout.tsx"
-        code={`import 'adminlte-react/css'
+        code={`import '@colorlib/adminlte-react/css'
 import './globals.css'`}
       />
 
@@ -56,7 +56,7 @@ import './globals.css'`}
       <CodeBlock
         filename="app/layout.tsx"
         code={`import type { Metadata } from 'next'
-import 'adminlte-react/css'
+import '@colorlib/adminlte-react/css'
 import './globals.css'
 
 export const metadata: Metadata = {