Header with Search

1import {
2  HeaderWithSearch,
3  type HeaderLink,
4  type HeaderSearchResult,
5} from "@/registry/ui/header-with-search";
6
7const demoLinks: HeaderLink[] = [
8  { label: "Docs", href: "/docs" },
9  { label: "Components", href: "/components" },
10  { label: "Blocks", href: "/blocks" },
11  { label: "Changelog", href: "/docs/changelog" },
12];
13
14const demoSearchResults: HeaderSearchResult[] = [
15  { title: "Getting started", href: "/docs", section: "Docs" },
16  { title: "Installation", href: "/docs/installation", section: "Docs" },
17  {
18    title: "Line charts",
19    href: "/components/line-charts",
20    section: "Components",
21    description: "Charts",
22  },
23  {
24    title: "Header with search",
25    href: "/components/header-with-search",
26    section: "Components",
27    description: "Navigation",
28  },
29  {
30    title: "Chat UI 01",
31    href: "/blocks/chat-ui-01",
32    section: "Blocks",
33    description: "Communication",
34  },
35];
36
37export function HeaderWithSearchEmbedExample() {
38  return (
39    <div className="w-full space-y-3">
40      <div className="relative isolate min-h-[500px] overflow-hidden rounded-lg border bg-linear-to-b from-muted/30 to-background">
41        <HeaderWithSearch
42          className="absolute! inset-x-0 top-0 z-10"
43          siteName="Acme UI"
44          links={demoLinks}
45          searchResults={demoSearchResults}
46          searchPlaceholder="Search docs, components, blocks…"
47          githubUrl="https://github.com"
48          ctaText="Get Started"
49          ctaHref="/docs"
50        />
51        <div className="space-y-3 px-6 pb-6 pt-20">
52          <div className="space-y-1">
53            <p className="text-sm font-medium text-foreground">Page content</p>
54            <p className="text-sm text-muted-foreground">
55              The header stays pinned while you scroll this preview area.
56            </p>
57          </div>
58          <div className="grid gap-2 sm:grid-cols-2">
59            {["Overview", "Settings", "Billing", "Team"].map((label) => (
60              <div
61                key={label}
62                className="h-16 rounded-md border border-dashed bg-muted/40"
63                aria-hidden
64              />
65            ))}
66          </div>
67        </div>
68      </div>
69      <p className="text-xs text-muted-foreground">
70        Pass a list of <code className="text-foreground">links</code> and{" "}
71        <code className="text-foreground">searchResults</code> (each with a{" "}
72        <code className="text-foreground">section</code> for grouping). Press{" "}
73        <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono">
74          ⌘K
75        </kbd>{" "}
76        or{" "}
77        <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono">
78          Ctrl K
79        </kbd>{" "}
80        to open search.
81      </p>
82    </div>
83  );
84}

1import {
2  HeaderWithSearch,
3  type HeaderLink,
4  type HeaderSearchResult,
5} from "@/registry/ui/header-with-search";
6
7const demoLinks: HeaderLink[] = [
8  { label: "Docs", href: "/docs" },
9  { label: "Components", href: "/components" },
10  { label: "Blocks", href: "/blocks" },
11  { label: "Changelog", href: "/docs/changelog" },
12];
13
14const demoSearchResults: HeaderSearchResult[] = [
15  { title: "Getting started", href: "/docs", section: "Docs" },
16  { title: "Installation", href: "/docs/installation", section: "Docs" },
17  {
18    title: "Line charts",
19    href: "/components/line-charts",
20    section: "Components",
21    description: "Charts",
22  },
23  {
24    title: "Header with search",
25    href: "/components/header-with-search",
26    section: "Components",
27    description: "Navigation",
28  },
29  {
30    title: "Chat UI 01",
31    href: "/blocks/chat-ui-01",
32    section: "Blocks",
33    description: "Communication",
34  },
35];
36
37export function HeaderWithSearchMinimalExample() {
38  return (
39    <div className="w-full space-y-3">
40      <HeaderWithSearch
41        className="absolute! inset-x-0 top-0 z-10"
42        siteName="Acme UI"
43        links={demoLinks}
44        searchResults={demoSearchResults}
45      />
46    </div>
47  );
48}