@intecnopt/admin-shell

A production-ready React + TypeScript admin dashboard shell with beautiful themes, authentication screens, and responsive layouts.

🎨 Preview

Dashboard Shell

Authentication Screen

✨ 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

npm install @intecnopt/admin-shell

🚀 Quick Start

1. Add the Tailwind Preset

Update your tailwind.config.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):

/* 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):

import '@intecnopt/admin-shell/styles';

3. Use the Components

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:

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)

import Link from 'next/link';

<AdminShell LinkComponent={Link} basePath="/admin" />

React Router

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

🤝 Support

• 🌐 Website: intecnopt.com
• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues