How to Use Shadcn New Sidebar?

[nuluh]

I saw fuma_nama has exciting tweet about this available to install through CLI, but it seems didnt take any effects after fumadocs add. Thanks

[fuma-nama]

Fumadocs CLI isn't exactly Shadcn UI, it's mainly for customising Fumadocs UI by installing the component onto your codebase similar to Shadcn UI.

You can see https://fumadocs.vercel.app/docs/cli#installation to install the CLI and run pnpm fumadocs add (or your own package manager), it should display a select to choose which components to install. Press space to select and enter to install btw!

On v14, you can use the sidebar.component prop of DocsLayout to replace default sidebar.

[nuluh]

Thanks for replying.

Yeah, I was thinking that layout/sidebar that is available on Fumadocs CLI was built on top of Shadcn's new sidebar which has been "fine-tuned" for Fumadocs, but I don't know how to use it.

I have done passing ReactNode into sidebar.component which is a prop of DocsLayout like this before, but it gives me error.

// /app/docs/layout.tsx

import { Sidebar } from '@/components/layout/sidebar'

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout tree={source.pageTree} {...baseOptions} sidebar={{
      component: <Sidebar />
    }}>
      {children}
    </DocsLayout>
  );
}

Gives unhandled runtime error

TypeError: (0 , fumadocs_ui_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n) is not a function

components/layout/search-toggle.tsx (38:27) @ useI18n

  36 | ): React.ReactElement {
  37 |   const { hotKey, setOpenSearch } = useSearchContext();
> 38 |   const { text } = useI18n();
     |                           ^
  39 |
  40 |   return (
  41 |     <button

Temporary Workaround

I tried to comment <LargeSearchToggle ... /> on component/layout/sidebar.tsx and it works fine. Should I push an issue or am I missing something?

[fuma-nama]

I confirmed the issue, "use client" isn't added by default. You can add back the directive which should fix the error