Shell

A component that includes UiPath authentication and a collapsible sidebar.

Minimal Header Variant

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

Features

UiPath Authentication: Built-in authentication flow with @uipath/auth-react
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


import { ApolloShell } from '@/components/ui/shell';
import { onCallback, type AuthConfiguration } from '@uipath/auth-react';
import { useNavigate } from '@tanstack/react-router';
 
function App() {
  const navigate = useNavigate();
 
  const configuration: AuthConfiguration = {
    authority: 'https://your-org.cloud.uipath.com/identity_',
    redirect_uri: 'http://localhost:3000/auth_callback',
    post_logout_redirect_uri: 'http://localhost:3000',
  };
 
  return (
    <ApolloShell
      configuration={configuration}
      companyName="Your Company"
      productName="Your Product"
      onSigninCallback={(user) => {
        onCallback(user, (to) => {
          navigate({ to: to });
        });
      }}
    >
      {/* ... your authenticated app content ... */}
      <YourApp />
    </ApolloShell>
  );
}