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). @@ -434,7 +434,7 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
- + Apex Dashboard — Next.js admin template with shadcn/ui
- 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 — minimal Next.js admin dashboard with shadcn/ui
- Zenith Dashboard + Zenith Dashboard
Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. Achromatic design, 50+ pages, 6 dashboards, live theme customizer.
- + Haze — Nuxt 4 admin dashboard with 92+ pages
- Haze + Haze
Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer. 		- + TailPanel — React and Tailwind CSS admin panel
- TailPanel + TailPanel
React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes.
- + Admindek — feature-rich Bootstrap 5 dashboard
- Admindek + Admindek
Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets. 		- + SvelteForge Premium — SvelteKit admin dashboard
- SvelteForge Premium + SvelteForge Premium
SvelteKit + Tailwind CSS v4. 30+ wired-up modules, multi-tenant from row zero, dark/light/system mode.

- 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[].

- useSidebarContext()

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

useCommandPalette()

Open or close the ⌘K command palette programmatically.

1. Install the package

2. Install peer dependencies

@@ -44,7 +44,7 @@ yarn add adminlte-react`}

@@ -56,7 +56,7 @@ import './globals.css'`}

What it is

- adminlte-react packages the AdminLTE 4 admin theme (built on Bootstrap + @colorlib/adminlte-react packages the AdminLTE 4 admin theme (built on Bootstrap 5.3) as a set of typed React components: a full dashboard shell, widgets, form controls, and tool components. It is designed for the Next.js App Router and React Server Components, but works in any React 18+ application. diff --git a/demo/app/(dashboard)/docs/layout/page.tsx b/demo/app/(dashboard)/docs/layout/page.tsx index cf93321..74d27fd 100644 --- a/demo/app/(dashboard)/docs/layout/page.tsx +++ b/demo/app/(dashboard)/docs/layout/page.tsx @@ -81,7 +81,7 @@ export default function LayoutDocsPage() {

These docs cover installation, the layout shell, theming, the dynamic-import diff --git a/demo/app/(dashboard)/docs/plugins/page.tsx b/demo/app/(dashboard)/docs/plugins/page.tsx index ee8e65b..e244c1b 100644 --- a/demo/app/(dashboard)/docs/plugins/page.tsx +++ b/demo/app/(dashboard)/docs/plugins/page.tsx @@ -71,7 +71,7 @@ export default function PluginsPage() { load once (CDN or a bundler import). Libraries marked Required are listed as external in the build, so you must install the npm package for the JavaScript to resolve. Libraries marked Bundled ship inside{' '} - adminlte-react's code-split chunks — installing them is optional + @colorlib/adminlte-react's code-split chunks — installing them is optional for the JS, but you still need their CSS.

diff --git a/demo/app/(dashboard)/docs/quick-start/page.tsx b/demo/app/(dashboard)/docs/quick-start/page.tsx index 483b6dc..1f5c1ab 100644 --- a/demo/app/(dashboard)/docs/quick-start/page.tsx +++ b/demo/app/(dashboard)/docs/quick-start/page.tsx @@ -21,7 +21,7 @@ export default function QuickStartPage() {

diff --git a/demo/app/(dashboard)/widgets/cards/page.tsx b/demo/app/(dashboard)/widgets/cards/page.tsx index ba7df73..7147274 100644 --- a/demo/app/(dashboard)/widgets/cards/page.tsx +++ b/demo/app/(dashboard)/widgets/cards/page.tsx @@ -1,4 +1,4 @@ -import { Card, AppContent } from 'adminlte-react' +import { Card, AppContent } from '@colorlib/adminlte-react' const abilities = [ { theme: 'primary' as const, title: 'Expandable', collapsible: true, defaultCollapsed: true }, diff --git a/demo/app/(dashboard)/widgets/info-box/page.tsx b/demo/app/(dashboard)/widgets/info-box/page.tsx index 79ea560..b9feab8 100644 --- a/demo/app/(dashboard)/widgets/info-box/page.tsx +++ b/demo/app/(dashboard)/widgets/info-box/page.tsx @@ -1,4 +1,4 @@ -import { AppContent } from 'adminlte-react' +import { AppContent } from '@colorlib/adminlte-react' export const metadata = { title: "Info Box" } diff --git a/demo/app/(dashboard)/widgets/small-box/page.tsx b/demo/app/(dashboard)/widgets/small-box/page.tsx index 951226f..8f13afd 100644 --- a/demo/app/(dashboard)/widgets/small-box/page.tsx +++ b/demo/app/(dashboard)/widgets/small-box/page.tsx @@ -1,4 +1,4 @@ -import { SmallBox, AppContent } from 'adminlte-react' +import { SmallBox, AppContent } from '@colorlib/adminlte-react' export const metadata = { title: "Small Box" } diff --git a/demo/app/(fullpage)/layout/collapsed-sidebar-without-hover/page.tsx b/demo/app/(fullpage)/layout/collapsed-sidebar-without-hover/page.tsx index d64bf50..2026033 100644 --- a/demo/app/(fullpage)/layout/collapsed-sidebar-without-hover/page.tsx +++ b/demo/app/(fullpage)/layout/collapsed-sidebar-without-hover/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Collapsed Sidebar (no hover)" } diff --git a/demo/app/(fullpage)/layout/collapsed-sidebar/page.tsx b/demo/app/(fullpage)/layout/collapsed-sidebar/page.tsx index 6a5261e..3a76ca8 100644 --- a/demo/app/(fullpage)/layout/collapsed-sidebar/page.tsx +++ b/demo/app/(fullpage)/layout/collapsed-sidebar/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Collapsed Sidebar" } diff --git a/demo/app/(fullpage)/layout/fixed-complete/page.tsx b/demo/app/(fullpage)/layout/fixed-complete/page.tsx index 704df01..7589a95 100644 --- a/demo/app/(fullpage)/layout/fixed-complete/page.tsx +++ b/demo/app/(fullpage)/layout/fixed-complete/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Fixed Complete" } diff --git a/demo/app/(fullpage)/layout/fixed-footer/page.tsx b/demo/app/(fullpage)/layout/fixed-footer/page.tsx index 266277e..961039f 100644 --- a/demo/app/(fullpage)/layout/fixed-footer/page.tsx +++ b/demo/app/(fullpage)/layout/fixed-footer/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Fixed Footer" } diff --git a/demo/app/(fullpage)/layout/fixed-header/page.tsx b/demo/app/(fullpage)/layout/fixed-header/page.tsx index 6446627..3b00149 100644 --- a/demo/app/(fullpage)/layout/fixed-header/page.tsx +++ b/demo/app/(fullpage)/layout/fixed-header/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Fixed Header" } diff --git a/demo/app/(fullpage)/layout/fixed-sidebar/page.tsx b/demo/app/(fullpage)/layout/fixed-sidebar/page.tsx index cf6abb2..00d49ad 100644 --- a/demo/app/(fullpage)/layout/fixed-sidebar/page.tsx +++ b/demo/app/(fullpage)/layout/fixed-sidebar/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Fixed Sidebar" } diff --git a/demo/app/(fullpage)/layout/layout-custom-area/page.tsx b/demo/app/(fullpage)/layout/layout-custom-area/page.tsx index aa9cbd4..c2dcd84 100644 --- a/demo/app/(fullpage)/layout/layout-custom-area/page.tsx +++ b/demo/app/(fullpage)/layout/layout-custom-area/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Custom Content Area" } diff --git a/demo/app/(fullpage)/layout/layout-rtl/page.tsx b/demo/app/(fullpage)/layout/layout-rtl/page.tsx index 165ef8a..d6ee51b 100644 --- a/demo/app/(fullpage)/layout/layout-rtl/page.tsx +++ b/demo/app/(fullpage)/layout/layout-rtl/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' import { RtlStyles } from '@/components/rtl-styles' diff --git a/demo/app/(fullpage)/layout/logo-switch/page.tsx b/demo/app/(fullpage)/layout/logo-switch/page.tsx index 35161c7..42081c0 100644 --- a/demo/app/(fullpage)/layout/logo-switch/page.tsx +++ b/demo/app/(fullpage)/layout/logo-switch/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Logo Switch" } diff --git a/demo/app/(fullpage)/layout/sidebar-mini/page.tsx b/demo/app/(fullpage)/layout/sidebar-mini/page.tsx index 978a9a6..00dd05e 100644 --- a/demo/app/(fullpage)/layout/sidebar-mini/page.tsx +++ b/demo/app/(fullpage)/layout/sidebar-mini/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Sidebar Mini" } diff --git a/demo/app/(fullpage)/layout/unfixed-sidebar/page.tsx b/demo/app/(fullpage)/layout/unfixed-sidebar/page.tsx index e06b017..2ab3347 100644 --- a/demo/app/(fullpage)/layout/unfixed-sidebar/page.tsx +++ b/demo/app/(fullpage)/layout/unfixed-sidebar/page.tsx @@ -1,4 +1,4 @@ -import { AppContent, Card } from 'adminlte-react' +import { AppContent, Card } from '@colorlib/adminlte-react' import { DemoLayout } from '@/components/demo-layout' export const metadata = { title: "Default Sidebar" } diff --git a/demo/app/layout.tsx b/demo/app/layout.tsx index e74f223..dd6c413 100644 --- a/demo/app/layout.tsx +++ b/demo/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from 'next' -import 'adminlte-react/css' +import '@colorlib/adminlte-react/css' import './globals.css' import { SubpathLinks } from '@/components/subpath-links' import { InertLinks } from '@/components/inert-links' diff --git a/demo/components/demo-form.tsx b/demo/components/demo-form.tsx index 87fbb4d..2556286 100644 --- a/demo/components/demo-form.tsx +++ b/demo/components/demo-form.tsx @@ -1,7 +1,7 @@ 'use client' import { useState } from 'react' -import { Toast } from 'adminlte-react' +import { Toast } from '@colorlib/adminlte-react' /** * Wraps form fields with HTML5 validation (Bootstrap `was-validated` styling) and a diff --git a/demo/components/demo-layout.tsx b/demo/components/demo-layout.tsx index efab133..ee4b7ba 100644 --- a/demo/components/demo-layout.tsx +++ b/demo/components/demo-layout.tsx @@ -1,5 +1,5 @@ -import { DashboardLayout, NavMessages, NavNotifications } from 'adminlte-react' -import type { DashboardLayoutProps } from 'adminlte-react' +import { DashboardLayout, NavMessages, NavNotifications } from '@colorlib/adminlte-react' +import type { DashboardLayoutProps } from '@colorlib/adminlte-react' import { menuItems } from '@/lib/menu' import { withBase } from '@/lib/base' import { NavLink } from '@/components/nav-link' diff --git a/demo/components/docs/docs-page.tsx b/demo/components/docs/docs-page.tsx index d51e598..8c98f66 100644 --- a/demo/components/docs/docs-page.tsx +++ b/demo/components/docs/docs-page.tsx @@ -1,4 +1,4 @@ -import { AppContent } from 'adminlte-react' +import { AppContent } from '@colorlib/adminlte-react' import { DocsNav } from './docs-nav' interface DocsPageProps { diff --git a/demo/components/faq.tsx b/demo/components/faq.tsx index db55611..1c8517b 100644 --- a/demo/components/faq.tsx +++ b/demo/components/faq.tsx @@ -1,7 +1,7 @@ 'use client' import { useMemo, useState } from 'react' -import { Accordion } from 'adminlte-react' +import { Accordion } from '@colorlib/adminlte-react' import { faqCategories } from '@/lib/faq-data' /** Searchable FAQ — filters questions live and renders each category with the library Accordion. */ diff --git a/demo/components/nav-link.tsx b/demo/components/nav-link.tsx index 8fff7e7..075590b 100644 --- a/demo/components/nav-link.tsx +++ b/demo/components/nav-link.tsx @@ -1,7 +1,7 @@ 'use client' import Link from 'next/link' -import type { LinkComponent } from 'adminlte-react' +import type { LinkComponent } from '@colorlib/adminlte-react' import { BASE } from '@/lib/base' /** diff --git a/demo/components/react-widgets-demo.tsx b/demo/components/react-widgets-demo.tsx index de9c1fa..9c8887e 100644 --- a/demo/components/react-widgets-demo.tsx +++ b/demo/components/react-widgets-demo.tsx @@ -1,7 +1,7 @@ 'use client' import { useState } from 'react' -import { Accordion, Tabs, Toast, Tooltip, Button } from 'adminlte-react' +import { Accordion, Tabs, Toast, Tooltip, Button } from '@colorlib/adminlte-react' /** Live showcase of the typed React components (Accordion, Tabs, Toast, Tooltip). */ export function ReactWidgetsDemo() { diff --git a/demo/components/showcase-primitives.tsx b/demo/components/showcase-primitives.tsx index fbdd0dc..2e66d54 100644 --- a/demo/components/showcase-primitives.tsx +++ b/demo/components/showcase-primitives.tsx @@ -1,7 +1,7 @@ 'use client' import { useState } from 'react' -import { Pagination, Stepper } from 'adminlte-react' +import { Pagination, Stepper } from '@colorlib/adminlte-react' const steps = [ { label: 'Account', description: 'Your details', icon: 'bi-person' }, diff --git a/demo/components/showcase-table.tsx b/demo/components/showcase-table.tsx index 5d70bf9..144f734 100644 --- a/demo/components/showcase-table.tsx +++ b/demo/components/showcase-table.tsx @@ -1,6 +1,6 @@ 'use client' -import { Table, Badge } from 'adminlte-react' +import { Table, Badge } from '@colorlib/adminlte-react' interface Person { name: string diff --git a/demo/lib/chart-data.ts b/demo/lib/chart-data.ts index e2e2bda..f47891d 100644 --- a/demo/lib/chart-data.ts +++ b/demo/lib/chart-data.ts @@ -1,4 +1,4 @@ -import type { DirectChatContact, DirectChatMessage } from 'adminlte-react' +import type { DirectChatContact, DirectChatMessage } from '@colorlib/adminlte-react' import { withBase } from './base' // ApexCharts Revenue Chart Config diff --git a/demo/lib/menu.ts b/demo/lib/menu.ts index c392dd3..c70e46e 100644 --- a/demo/lib/menu.ts +++ b/demo/lib/menu.ts @@ -1,4 +1,4 @@ -import type { MenuNode } from 'adminlte-react' +import type { MenuNode } from '@colorlib/adminlte-react' import { withBase } from './base' const rawMenu: MenuNode[] = [ diff --git a/demo/lib/projects-data.ts b/demo/lib/projects-data.ts index 9a5f59f..8056125 100644 --- a/demo/lib/projects-data.ts +++ b/demo/lib/projects-data.ts @@ -1,4 +1,4 @@ -import type { BootstrapTheme } from 'adminlte-react' +import type { BootstrapTheme } from '@colorlib/adminlte-react' export interface ProjectMember { initials: string diff --git a/demo/package.json b/demo/package.json index fe4e1e4..fb0e3fa 100644 --- a/demo/package.json +++ b/demo/package.json @@ -1,5 +1,5 @@ { - "name": "adminlte-react-demo", + "name": "@colorlib/adminlte-react-demo", "version": "0.1.0", "private": true, "type": "module", @@ -15,7 +15,7 @@ "test:a11y": "playwright test a11y" }, "dependencies": { - "adminlte-react": "workspace:*", + "@colorlib/adminlte-react": "workspace:*", "apexcharts": "^5.13.0", "jsvectormap": "^1.7.0", "next": "^16.2.6", diff --git a/demo/types/adminlte-react-css.d.ts b/demo/types/adminlte-react-css.d.ts index 846134f..18c1734 100644 --- a/demo/types/adminlte-react-css.d.ts +++ b/demo/types/adminlte-react-css.d.ts @@ -1,3 +1,3 @@ -// The `adminlte-react/css` subpath export points at a .css file; declare it so +// The `@colorlib/adminlte-react/css` subpath export points at a .css file; declare it so // TypeScript 6 accepts the side-effect import (TS2882). -declare module 'adminlte-react/css' +declare module '@colorlib/adminlte-react/css' diff --git a/package.json b/package.json index 515d9ec..e07d3ed 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "adminlte-react", + "name": "@colorlib/adminlte-react", "version": "0.1.0", "description": "AdminLTE 4 React/Next.js component library", "license": "MIT", @@ -84,5 +84,9 @@ "typescript": "^6.0.3", "typescript-eslint": "^8.60.0", "vitest": "^4.1.7" - } + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://adminlte.io/themes/next-react/" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8563a61..8ede68e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,7 +84,7 @@ importers: demo: dependencies: - adminlte-react: + '@colorlib/adminlte-react': specifier: workspace:* version: link:.. apexcharts: