AppShell

Overview

The AppShell component provides a complete application frame.
It offers slots for brand/logo, navigation, user profile, sidebar, footer, and the main content area, with built-in responsive handling.

This makes it ideal for dashboards, admin panels, and single-page apps.

---

Preview

Preview

My App

U

Hello User

Welcome to the Dashboard

This is the main content area of your application.

© 2025 My App

Code

import AppShell from './components/ui/app-shell';
import AppShellDemo from './components/Demo/AppShellDemo';
import Logo from './components/Logo';
import UserProfile from './components/UserProfile';
import MainContent from './components/MainContent';

export default function Demo() {
  const menu = [
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'Analytics', href: '/analytics' },
    { label: 'Settings', href: '/settings' },
  ];

  return (
    <AppShell
      navigation="side"
      theme="light"
      responsive={true}
      sidebarWidth="normal"
      brand={<Logo />}
      menu={menu}
      user={<UserProfile />}
      footer={<div>© 2025 My App</div>}
    >
      <MainContent />
    </AppShell>
  );
}

---

Installation

npm

npx @mindfiredigital/ignix-ui add app-shell

Yarn

yarn @mindfiredigital/ignix-ui add app-shell

pnpm

pnpm @mindfiredigital/ignix-ui add app-shell

manual

// Minimal AppShell example (manual)
import React from 'react';
import AppShell from './components/ui/app-shell';
import Logo from './components/Logo';
import UserProfile from './components/UserProfile';

const menu = [
  { label: 'Dashboard', href: '/dashboard' },
  { label: 'Projects', href: '/projects' },
];

export default function AppShellManualDemo() {
  return (
    <AppShell
      navigation="side"
      brand={<Logo />}
      menu={menu}
      user={<UserProfile />}
      responsive
      sidebarWidth="normal"
      theme="light"
    >
      <div className="p-6">Main content goes here</div>
    </AppShell>
  );
}

---

Variants

Preview

My App

U

User Name

• Dashboard
• Analytics
• Settings

• Dashboard
• Analytics
• Settings

Welcome to the Dashboard

© 2025 My App

Code

import AppShell from './components/ui/app-shell';
import Logo from './components/Logo';
import UserProfile from './components/UserProfile';
import NavItems from './components/NavItems';

<AppShell
  navigation="side"
  responsive={true}
  sidebarWidth="normal"
  theme="modern"
  brand={<Logo />}
  menu={<NavItems />}
  user={<UserProfile />}
>
  <div className="p-6">
    <h2 className="text-2xl font-semibold">Welcome to the Dashboard</h2>
    <p className="mt-2 text-gray-600">This is the main content area of your application.</p>
  </div>
</AppShell>

---

Usage Examples

Side Navigation with Footer

<AppShell 
  navigation="side" 
  footer={<Footer />} 
  brand={<Logo />} 
  menu={menu} 
  user={user}
>
  {children}
</AppShell>

---

Top Navigation

<AppShell 
  navigation="top" 
  brand={<Logo />} 
  menu={menu} 
  user={user}
>
  {children}
</AppShell>

---

Drawer (Mobile Friendly)

<AppShell 
  navigation="drawer" 
  responsive 
  brand={<Logo />} 
  menu={menu}
>
  {children}
</AppShell>

---

Theming

Switch layout styles using the theme prop:

<AppShell theme="light" ... />
<AppShell theme="dark" ... />
<AppShell theme="corporate" ... />

---

Props

Prop	Type	Default	Description
navigation	"top" | "side" | "bottom" | "drawer"	"top"	Navigation placement
brand	ReactNode	null	Brand/logo slot
menu	Array<{ label: string, href?: string, icon?: ReactNode, children?: any[] }> | ReactNode	[]	Menu items (JSON or custom JSX)
user	ReactNode	null	User profile/avatar
footer	ReactNode	null	Footer slot
responsive	boolean	true	Enables mobile drawer on small screens
sidebarWidth	"narrow" | "normal" | "wide"	"normal"	Sidebar width
theme	"light" | "dark" | "modern" | "custom"	"dark"	Built-in theme support
className	string	""	Custom classes
children	ReactNode	—	Main content

---