StickyHeader() — supabase Function Reference

Source Code

apps/docs/features/docs/Reference.ui.tsx lines 98–122

export function StickyHeader({ title, monoFont = false, className }: StickyHeaderProps) {
  return (
    <h2
      tabIndex={-1} // For programmatic focus on auto-scroll to section
      className={cn(
        'sticky top-0 z-[1]',
        'w-full',
        // Enough padding to cover the background when stuck to the top,
        // then readjust with negative margin to prevent it looking too
        // spaced-out in regular position
        'pt-[calc(var(--header-height)+1rem)] -mt-[calc(var(--header-height)+1rem-2px)]',
        // Same for bottom
        'pb-8 -mb-3',
        'bg-gradient-to-b from-background from-85% to-transparent to-100%',
        'text-2xl font-medium text-foreground',
        'scroll-mt-[calc(var(--header-height)+1rem)]',
        'focus:outline-none',
        monoFont && 'font-mono',
        className
      )}
    >
      {title}
    </h2>
  )
}