ui Architecture Docs
Home / File/ site-header.tsx — ui Source File

site-header.tsx — ui Source File

Architecture documentation for site-header.tsx, a tsx file in the ui codebase. 6 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  13e537cf_8db5_06d8_7231_5e92a2b29d7c["site-header.tsx"]
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  13e537cf_8db5_06d8_7231_5e92a2b29d7c --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  619c136b_3154_bb65_c5ba_2aa8a37f6f8d["search-form"]
  13e537cf_8db5_06d8_7231_5e92a2b29d7c --> 619c136b_3154_bb65_c5ba_2aa8a37f6f8d
  07986cfc_fcd6_a023_4225_355f24adb9e8["breadcrumb"]
  13e537cf_8db5_06d8_7231_5e92a2b29d7c --> 07986cfc_fcd6_a023_4225_355f24adb9e8
  d418ad18_b947_f4e5_6e4c_01100d7a63e4["button"]
  13e537cf_8db5_06d8_7231_5e92a2b29d7c --> d418ad18_b947_f4e5_6e4c_01100d7a63e4
  f62242a3_a602_4828_25a4_56635bc469ef["separator"]
  13e537cf_8db5_06d8_7231_5e92a2b29d7c --> f62242a3_a602_4828_25a4_56635bc469ef
  742f06fb_c1e8_243e_1fc4_8b1cf11704c2["sidebar"]
  13e537cf_8db5_06d8_7231_5e92a2b29d7c --> 742f06fb_c1e8_243e_1fc4_8b1cf11704c2
  style 13e537cf_8db5_06d8_7231_5e92a2b29d7c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { SidebarIcon } from "lucide-react"

import { SearchForm } from "@/registry/default/blocks/sidebar-16/components/search-form"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/default/ui/breadcrumb"
import { Button } from "@/registry/default/ui/button"
import { Separator } from "@/registry/default/ui/separator"
import { useSidebar } from "@/registry/default/ui/sidebar"

export function SiteHeader() {
  const { toggleSidebar } = useSidebar()

  return (
    <header className="flex sticky top-0 z-50 w-full items-center border-b bg-background">
      <div className="flex h-[--header-height] w-full items-center gap-2 px-4">
        <Button
          className="h-8 w-8"
          variant="ghost"
          size="icon"
          onClick={toggleSidebar}
        >
          <SidebarIcon />
        </Button>
        <Separator orientation="vertical" className="mr-2 h-4" />
        <Breadcrumb className="hidden sm:block">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">
                Building Your Application
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <SearchForm className="w-full sm:ml-auto sm:w-auto" />
      </div>
    </header>
  )
}

Domain

Subdomains

Functions

Dependencies

  • breadcrumb
  • button
  • lucide-react
  • search-form
  • separator
  • sidebar

Source

Frequently Asked Questions

What does site-header.tsx do?
site-header.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in site-header.tsx?
site-header.tsx defines 1 function(s): SiteHeader.
What does site-header.tsx depend on?
site-header.tsx imports 6 module(s): breadcrumb, button, lucide-react, search-form, separator, sidebar.
Where is site-header.tsx in the architecture?
site-header.tsx is located at deprecated/www/registry/default/blocks/sidebar-16/components/site-header.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: deprecated/www/registry/default/blocks/sidebar-16/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free