# Banner Top

> Bloco topo sticky com badge, título e CTA — blockus banners #01-04.

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-banner-top).

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

## Install

```bash
npx shadcn@latest add https://ds.lema.ufpb.br/r/ds-banner-top.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-banner`, `@lema-ds/ds-locale-provider`

## Files

### `components/ds/ds-banner-top.tsx`

```tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { Banner, type BannerProps } from "./ds-banner"
import { useUILocale } from "@/components/ui/ds-locale-provider"

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

export interface BannerTopProps extends Omit<
  BannerProps,
  "position" | "title" | "description"
> {
  badge?: string
  title?: string
  description?: React.ReactNode
  position?: "inline" | "top"
}

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

export function BannerTop({
  className,
  badge,
  title,
  description,
  action,
  secondaryAction,
  intent = "default",
  variant = "default",
  size = "md",
  position = "top",
  dismissible = true,
  locale: localeProp,
  ...props
}: BannerTopProps) {
  const locale = useUILocale(localeProp)
  return (
    <Banner
      intent={intent}
      variant={variant}
      size={size}
      position={position}
      dismissible={dismissible}
      locale={locale}
      title={
        badge ? (
          <span className="inline-flex items-center gap-2">
            <span className="rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-primary-foreground">
              {badge}
            </span>
            {title && <span className="truncate">{title}</span>}
          </span>
        ) : (
          title
        )
      }
      description={description}
      action={action}
      secondaryAction={secondaryAction}
      className={cn(className)}
      {...props}
    />
  )
}
```