npm package: @intecnopt/admin-shell
Description: A production-ready React + TypeScript admin dashboard shell with beautiful themes, authentication screens, and responsive layouts.
Author: Intecno
Latest version: 1.0.1

# @intecnopt/admin-shell

A **production-ready React + TypeScript admin dashboard shell** with beautiful themes, authentication screens, and responsive layouts.

## 🎨 Preview

### Dashboard Shell
![IntecnoManager Dashboard](./src/Images/theme_1.png)

### Authentication Screen
![IntecnoManager Login](./src/Images/login_1.png)

---

## ✨ Features

- 🎨 **4 Beautiful Themes** - Intecno Navy, Dark Mode, Red, and Green
- 🔐 **Authentication Shell** - Professional login/register pages
- 📱 **Fully Responsive** - Mobile-first design with collapsible sidebar
- 🎯 **TypeScript First** - Full type safety out of the box
- ⚡ **Tailwind CSS** - Easy customization with utility classes
- 🔧 **Framework Agnostic** - Works with Next.js, Vite, CRA, Remix, and more

---

## 📦 Installation

```bash
npm install @intecnopt/admin-shell
```

---

## 🚀 Quick Start

### 1. Add the Tailwind Preset

Update your `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // Add this line to include IntecnoManager components
    "./node_modules/@intecnopt/admin-shell/**/*.{js,mjs}"
  ],
  presets: [require('@intecnopt/admin-shell/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### 2. Import the Styles

In your main CSS file (e.g., `globals.css` or `index.css`):

```css
/* Tailwind base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* IntecnoManager theme styles - MUST come after Tailwind */
@import '@intecnopt/admin-shell/styles';
```

**Or** import directly in your entry file (e.g., `main.tsx`):

```tsx
import '@intecnopt/admin-shell/styles';
```

### 3. Use the Components

```tsx
import { AdminShell, AuthShell } from '@intecnopt/admin-shell';
import type { AdminTab } from '@intecnopt/admin-shell';
import { LayoutDashboard, Users, Settings } from 'lucide-react';

// Define your navigation tabs
const tabs: AdminTab[] = [
  { key: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={18} />, group: 'Main' },
  { key: 'users', label: 'Users', icon: <Users size={18} />, group: 'Main' },
  { key: 'settings', label: 'Settings', icon: <Settings size={18} />, group: 'System' },
];

// Dashboard Layout
function Dashboard() {
  return (
    <AdminShell
      tabs={tabs}
      activeKey="dashboard"
      brandName="MyApp"
      userLabel="John Doe"
      onLogout={() => console.log('Logout')}
      currentTheme="default"
      onThemeChange={(theme) => console.log('Theme:', theme)}
    >
      <div>Your dashboard content here</div>
    </AdminShell>
  );
}

// Login Page
function Login() {
  return (
    <AuthShell brandName="MyApp">
      <form>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <button type="submit">Sign In</button>
      </form>
    </AuthShell>
  );
}
```

---

## 🎨 Theming

IntecnoManager comes with 4 built-in themes. Switch themes by setting the `data-theme` attribute:

```tsx
useEffect(() => {
  document.documentElement.setAttribute('data-theme', currentTheme);
}, [currentTheme]);
```

| Theme | Value | Description |
|-------|-------|-------------|
| Intecno Navy | `default` | Deep blue professional look |
| Dark Mode | `dark` | True black/zinc neutral |
| Red | `red` | Bold red/crimson theme |
| Green | `green` | Forest green light mode |

---

## 📚 API Reference

### AdminShell Props

| Prop | Type | Description |
|------|------|-------------|
| `tabs` | `AdminTab[]` | Navigation items |
| `activeKey` | `string` | Currently active tab key |
| `children` | `ReactNode` | Main content |
| `brandName` | `string` | App name in sidebar |
| `logo` | `ReactNode` | Logo element |
| `userLabel` | `string` | Current user name |
| `onLogout` | `() => void` | Logout handler |
| `currentTheme` | `string` | Active theme ID |
| `onThemeChange` | `(theme: string) => void` | Theme change handler |
| `LinkComponent` | `React.ComponentType` | Custom link component |
| `basePath` | `string` | Base URL path for links |

### AuthShell Props

| Prop | Type | Description |
|------|------|-------------|
| `children` | `ReactNode` | Login form content |
| `brandName` | `string` | App name |
| `logo` | `ReactNode` | Logo element |
| `quote` | `string` | Inspirational quote |
| `quoteAuthor` | `string` | Quote author |

---

## 🔗 Framework Integration

### Next.js (App Router)

```tsx
import Link from 'next/link';

<AdminShell LinkComponent={Link} basePath="/admin" />
```

### React Router

```tsx
import { Link } from 'react-router-dom';

<AdminShell LinkComponent={Link} basePath="" />
```

---

## 📋 Requirements

- **React** ≥ 18.0.0
- **React DOM** ≥ 18.0.0
- **Tailwind CSS** ≥ 3.0.0

---

## 📄 License

MIT © [Intecno](https://intecnopt.com)

---

## 🤝 Support

- 🌐 Website: [intecnopt.com](https://intecnopt.com)
- 📧 Email: contact@intecnopt.com
- 🐛 Issues: [GitHub Issues](https://github.com/intecnopt/admin-shell/issues)