Project Banner

Component 14

About

Used for temporary, project-wide notifications that require resolution

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Project Banner to your project and fits it to your theme.

Code

How Project Banner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ProjectBanner } from "@/components/ui/project-banner";
import { Tooltip } from "@/components/ui/tooltip-1";

const RotateCounterClockwise = () => (
  <svg
    height="16"
    strokeLinejoin="round"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M13.5 8C13.5 4.96643 11.0257 2.5 7.96452 2.5C5.42843 2.5 3.29365 4.19393 2.63724 6.5H5.25H6V8H5.25H0.75C0.335787 8 0 7.66421 0 7.25V2.75V2H1.5V2.75V5.23347C2.57851 2.74164 5.06835 1 7.96452 1C11.8461 1 15 4.13001 15 8C15 11.87 11.8461 15 7.96452 15C5.62368 15 3.54872 13.8617 2.27046 12.1122L1.828 11.5066L3.03915 10.6217L3.48161 11.2273C4.48831 12.6051 6.12055 13.5 7.96452 13.5C11.0257 13.5 13.5 11.0336 13.5 8Z"
    />
  </svg>
);

export default function WarningDemo() {
  return <ProjectBanner
          callToAction={{
            label: "Undo Rollback",
            onClick: () => {
              alert("Button clicked");
            }
          }}
          icon={<RotateCounterClockwise />}
          label={
            <div className="flex gap-1">
              This project was rolled back by
              <Tooltip
                className="underline decoration-dashed underline-offset-[5px]"
                text="Yesterday for project marketing-website"
              >
                @johnphamous
              </Tooltip>
            </div>
          }
          variant="warning"
        />;
}