Search docs

Type at least 3 characters to search

All pages

Layout

The site header provides navigation, language and theme controls, and account links based on the current sign-in state.

src/lib/docs/showcase/header.tsx

import { Header } from '@/components/Header/Header'

export function HeaderDemo() {
  return <Header />
}

The site footer, four columns, on every marketing surface. Its links are checked by the typed router, so a renamed route breaks the build here.

src/lib/docs/showcase/footer.tsx

import { Footer } from '@/components/Footer/Footer'

export function FooterDemo() {
  return <Footer />
}

Panel

Waiting

Refused

This could not be loaded. Reload the page to try again.

Answered

boilerplatelifetime-updates

The card every Dashboard panel renders in, in all three of the states its signature forces a caller to supply: waiting, refused, and answered.

src/lib/docs/showcase/panel.tsx

import { Panel } from '@/components/Dashboard/Panel/Panel'

const UNREACHABLE = new Error('unreachable')

export function PanelDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Panel title="Waiting" isPending={true} error={null}>
        {null}
      </Panel>

      <Panel title="Refused" isPending={false} error={UNREACHABLE}>
        {null}
      </Panel>

      <Panel
        title="Answered"
        action={
          <button type="button" className="btn btn-sm btn-ghost border-base-300">
            Manage
          </button>
        }
        isPending={false}
        error={null}
      >
        <div className="flex flex-wrap gap-1.5">
          <span className="badge badge-ghost badge-sm font-mono">boilerplate</span>
          <span className="badge badge-ghost badge-sm font-mono">
            lifetime-updates
          </span>
        </div>
      </Panel>
    </div>
  )
}

Not shown here

NavigationBar and AuthShell are the two page shells, and neither can appear in this gallery: both render a <main>, and the documentation page you are reading is itself a <main>. A nested one is invalid HTML.

NavigationBar is the marketing shell, and it is the three lines above composed: <Header />, your page in a <main>, <Footer />. AuthShell is the frame around /auth/login, where signing in and signing up are one flow. Read both at src/components/.

Updated