Shell

A component with a collapsible sidebar, theme and language toggles, and optional OAuth2 authentication.

Minimal Header Variant

Use the variant="minimal" prop to render a horizontal header layout instead of the default sidebar.

Features

Optional OAuth2 Authentication: Plug-and-play authorization code flow with PKCE
Theme Toggle: Built-in light/dark mode support
Language Toggle: Built-in language switcher for internationalization
User Profile: Dropdown menu with user information and sign-out

Installation


npx shadcn@latest add @uipath/shell

Usage

The shell works out of the box without authentication. Just provide layout props:


import { Home, Settings } from 'lucide-react';
import { ApolloShell } from '@/components/ui/shell';
 
const navItems = [
  { path: '/dashboard', label: 'dashboard', icon: Home },
  { path: '/settings', label: 'settings', icon: Settings },
];
 
function App() {
  return (
    <ApolloShell
      companyName="Your Company"
      productName="Your Product"
      navItems={navItems}
    >
      <YourApp />
    </ApolloShell>
  );
}

Adding Authentication

To enable built-in OAuth2 authentication with PKCE, wrap the shell with ShellAuthProvider. Both ShellAuthProvider and ApolloShell must be inside a QueryClientProvider from @tanstack/react-query.

When a ShellAuthProvider is present, the shell automatically shows a login screen until the user is authenticated.


import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Home, Settings } from 'lucide-react';
import { ApolloShell } from '@/components/ui/shell';
import { ShellAuthProvider } from '@/components/ui/shell-auth-provider';
 
const queryClient = new QueryClient();
 
const navItems = [
  { path: '/dashboard', label: 'dashboard', icon: Home },
  { path: '/settings', label: 'settings', icon: Settings },
];
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ShellAuthProvider
        clientId="your-client-id"
        scope="openid profile email offline_access"
        baseUrl={window.location.origin}
      >
        <ApolloShell
          companyName="Your Company"
          productName="Your Product"
          navItems={navItems}
        >
          <YourApp />
        </ApolloShell>
      </ShellAuthProvider>
    </QueryClientProvider>
  );
}