Appshell

Navigation

About

Appshell component from Efferdui

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Appshell to your project and fits it to your theme.

Code

How Appshell is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

  
  import { SidebarInset, SidebarProvider } from "@/components/blocks/sidebar";
  import { AppHeader } from "@/components/ui/sidebar-header";
  import { AppSidebar } from "@/components/ui/sidebar-one";
  import type { AppBreadcrumbPage } from "@/components/ui/breadcrumb-efferdui";

  type AppShellProps = { 
    children: React.ReactNode;
    currentPage?: AppBreadcrumbPage | null;
  };
  
  export function AppShell({ children, currentPage }: AppShellProps) {
    return (
      <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
          <AppHeader currentPage={currentPage} />
          <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 md:p-6">
            {children}
          </div>
        </SidebarInset>
      </SidebarProvider>
    );
  }

  export default AppShell;