Large Title Header
NewCustomize
Center
Large size32px
Small size17px
Bar height52px
Installation
npx shadcn@latest add https://uibrik.com/r/large-title-header.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/large-title-header/large-title-header.tsx"use client"; import { motion, useMotionValue, useReducedMotion, useScroll, useTransform } from "motion/react"; import { useEffect, useLayoutEffect, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; // Space around the large title, in px. const PAD_X = 16; const PAD_TOP = 4; const PAD_BOTTOM = 12; const LINE = 1.2; export type LargeTitleHeaderProps = { title: string; /** Content for the start of the bar, such as a back button. */ leading?: ReactNode; /** Content for the end of the bar, such as actions. */ trailing?: ReactNode; /** The scrolling content under the title. */ children?: ReactNode; /** Where the title docks in the bar. */ align?: "center" | "leading"; /** Font size of the large title in px. */ largeSize?: number;
Adds the files to
components/uibrik/large-title-header and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/large-title-header.Usage
import { LargeTitleHeader } from "@/components/uibrik/large-title-header/large-title-header";const leading = <button type="button" className="flex h-10 cursor-pointer items-center gap-0.5 rounded-full pl-1.5 pr-3 text-[15px] text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-neutral-400"> <IconChevronLeft size={20} stroke={1.75} /> Folders</button>;const trailing = <button type="button" aria-label="New note" className="grid size-10 cursor-pointer place-items-center rounded-full text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-neutral-400"> <IconEdit size={19} stroke={1.75} /></button>;<LargeTitleHeader title="Notes" align="center" largeSize={32} smallSize={17} barHeight={52} snap leading={leading} trailing={trailing}> …</LargeTitleHeader>Props
LargeTitleHeader- title
- Type string
- "Notes"
- Page title.
- align
- Type "center" | "leading"
- "center"
- Where the title docks in the bar.
- largeSize
- Type number
- 32
- Font size of the large title.
- smallSize
- Type number
- 17
- Font size of the docked title.
- barHeight
- Type number
- 52
- Height of the top bar.
- snap
- Type boolean
- true
- When scrolling stops halfway, settle fully open or fully docked.
- children
- Type ReactNode
- –
- The scrolling content under the title.
- leading
- Type ReactNode
- –
- Start of the bar, such as a back button.
- trailing
- Type ReactNode
- –
- End of the bar, such as actions.
- className
- Type string
- –
- Classes for the scroller. Give it a height.
