# Header Centered

> Header com brand centralizado e nav abaixo, com split actions laterais.

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-centered).

- Page, with a live preview: https://shadcn.exchange/r/lema-ds/ds-header-centered
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/lema-ds/ds-header-centered-light-de13ec9e98fe5b21.png
- Registry item: https://ds.lema.ufpb.br/r/ds-header-centered.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-centered.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`
- 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/ui-i18n`, `@lema-ds/ds-locale-provider`

## Files

### `components/ds/ds-header-centered.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"

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

export interface HeaderCenteredProps
  extends
    React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof headerCenteredVariants> {
  brand: HeaderBrandProps
  navItems?: HeaderNavItem[]
  leftActions?: HeaderActionItem[]
  rightActions?: HeaderActionItem[]
  locale?: UILocale
  loading?: boolean
  sticky?: boolean
}

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

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

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

export function HeaderCentered({
  className,
  brand,
  navItems = [],
  leftActions = [],
  rightActions = [],
  locale: localeProp,
  loading = false,
  size = "md",
  variant = "default",
  sticky = true,
  ...props
}: HeaderCenteredProps & {
  variant?: "default" | "blurred" | "transparent" | "solid"
}) {
  const locale = useUILocale(localeProp)
  return (
    <Header
      variant={variant}
      size={size}
      sticky={sticky}
      locale={locale}
      className={cn(headerCenteredVariants({ size }), className)}
      {...props}
    >
      {/* Top row: actions — brand centered — actions */}
      <HeaderContainer size={size}>
        <div className="hidden flex-1 items-center justify-start gap-2 lg:flex">
          {leftActions.length > 0 && (
            <HeaderActions actions={leftActions} loading={loading} />
          )}
        </div>

        <div className="flex flex-1 items-center justify-start lg:justify-center">
          <HeaderBrand {...brand} size={size} loading={loading} />
        </div>

        <div className="flex flex-1 items-center justify-end gap-2">
          {rightActions.length > 0 && (
            <HeaderActions
              actions={rightActions}
              loading={loading}
              className="hidden sm:flex"
            />
          )}
          <HeaderMobileDrawer
            items={navItems}
            actions={[...leftActions, ...rightActions]}
            brand={<HeaderBrand {...brand} size="md" />}
            locale={locale}
            className="lg:hidden"
          />
        </div>
      </HeaderContainer>

      {/* Bottom row: centered nav */}
      {navItems.length > 0 && (
        <div className="hidden border-t border-border lg:flex lg:justify-center">
          <div className="flex h-12 items-center">
            <HeaderNav items={navItems} size={size} loading={loading} />
          </div>
        </div>
      )}
    </Header>
  )
}
```