@pancakeswap/shell

Official PancakeSwap shell components for shared header, footer, navigation, and page frame.

Install

pnpm add @pancakeswap/shell @pancakeswap/uikit react react-dom styled-components

Usage

import { PancakeShell } from "@pancakeswap/shell";

export function AppShell({ children }) {
  return (
    <PancakeShell locale="en-US" currentPath="/swap">
      {children}
    </PancakeShell>
  );
}

currentPath is optional in browser-only usage. SSR apps should pass it explicitly to avoid hydration mismatches.

@pancakeswap/shell uses PancakeSwap UIKit tokens and components. Host apps should load the UIKit styles once at the app entry point, or provide the same theme variables through their existing PancakeSwap setup.

Slots

Wallet, search, and settings are app-owned features. Pass them as slots:

<PancakeShell
  slots={{
    search: <Search />,
    settings: <Settings />,
    wallet: <WalletMenu />,
  }}
>
  {children}
</PancakeShell>

Storybook

pnpm --filter @pancakeswap/shell storybook