# Header Simple

> Bloco minimal SaaS: brand + nav desktop + search + actions + mobile drawer.

A shadcn/ui block from the [@lema-ds](https://ds.lema.ufpb.br) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/lema-ds/ds-header-simple).

- Page, with a live preview: https://shadcn.exchange/r/lema-ds/ds-header-simple
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/lema-ds/ds-header-simple-light-de13ec9e98fe5b21.png
- Registry item: https://ds.lema.ufpb.br/r/ds-header-simple.json
- Categories: header
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ds.lema.ufpb.br/r/ds-header-simple.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `class-variance-authority`, `lucide-react`
- Registry items: `@lema-ds/ds-header`, `@lema-ds/ds-header-brand`, `@lema-ds/ds-header-nav`, `@lema-ds/ds-header-actions`, `@lema-ds/ds-header-mobile-drawer`, `@lema-ds/ds-header-search`, `@lema-ds/ui-i18n`, `@lema-ds/ds-locale-provider`

## Files

### `components/ds/ds-header-simple.tsx`

```tsx
"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { type UILocale } from "@/lib/ui-i18n"
import { useUILocale } from "@/components/ui/ds-locale-provider"
import { Header, HeaderContainer } from "./ds-header"
import { HeaderBrand, type HeaderBrandProps } from "./ds-header-brand"
import { HeaderNav, type HeaderNavItem } from "./ds-header-nav"
import { HeaderActions, type HeaderActionItem } from "./ds-header-actions"
import { HeaderMobileDrawer } from "./ds-header-mobile-drawer"
import { HeaderSearch } from "./ds-header-search"

// ── Types ──────────────────────────────────────────────────────────────────

export interface HeaderSimpleProps
  extends
    React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof headerSimpleVariants> {
  brand: HeaderBrandProps
  navItems?: HeaderNavItem[]
  actions?: HeaderActionItem[]
  showSearch?: boolean
  onSearch?: (value: string) => void
  searchPlaceholder?: string
  locale?: UILocale
  loading?: boolean
  sticky?: boolean
}

// ── Variants ───────────────────────────────────────────────────────────────

export const headerSimpleVariants = cva("", {
  variants: {
    size: {
      sm: "",
      md: "",
      lg: "",
    },
  },
  defaultVariants: {
    size: "md",
  },
})

// ── Component ──────────────────────────────────────────────────────────────

export function HeaderSimple({
  className,
  brand,
  navItems = [],
  actions = [],
  showSearch = false,
  onSearch,
  searchPlaceholder,
  locale: localeProp,
  loading = false,
  size = "md",
  variant = "default",
  sticky = true,
  ...props
}: HeaderSimpleProps & {
  variant?: "default" | "blurred" | "transparent" | "solid"
}) {
  const locale = useUILocale(localeProp)
  return (
    <Header
      variant={variant}
      size={size}
      sticky={sticky}
      locale={locale}
      className={cn(headerSimpleVariants({ size }), className)}
      {...props}
    >
      <HeaderContainer size={size}>
        <HeaderBrand {...brand} size={size} loading={loading} />

        {navItems.length > 0 && (
          <HeaderNav
            items={navItems}
            size={size}
            loading={loading}
            className="hidden lg:flex"
          />
        )}

        <div className="flex items-center gap-2">
          {showSearch && (
            <HeaderSearch
              onSearch={onSearch}
              placeholder={searchPlaceholder}
              locale={locale}
              className="hidden sm:flex"
            />
          )}

          {actions.length > 0 && (
            <HeaderActions
              actions={actions}
              loading={loading}
              className="hidden sm:flex"
            />
          )}

          <HeaderMobileDrawer
            items={navItems}
            actions={actions}
            brand={<HeaderBrand {...brand} size="md" />}
            locale={locale}
            className="lg:hidden"
          />
        </div>
      </HeaderContainer>
    </Header>
  )
}
```