iOS-style large title header with greeting, actions and an inline search field.
npx shadcn@latest add @lokalhost/app-headerThe source is copied to components/blocks/app-header.tsx — it’s yours to edit.
import { AppHeader } from "@/components/blocks/app-header";
import { Avatar } from "@/components/ui/avatar";
<AppHeader
eyebrow={today}
title="Today"
onSearch={setQuery}
searchPlaceholder="Search tasks, notes, people"
right={
<>
<Pressable accessibilityLabel="Notifications" hitSlop={8}>
<Ionicons name="notifications-outline" size={22} />
</Pressable>
<Avatar name="Hilal Ahmad" size={36} />
</>
}
/>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | — | Large title. |
eyebrow | string | undefined | Small line above the title, e.g. a greeting. |
onSearch | (q: string) => void | undefined | Shows a search field when set. |
searchPlaceholder | string | "Search" | Search field placeholder. |
right | React.ReactNode | undefined | Trailing actions. |