Project Banner

CTAs 12

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";

const Warning = () => (
  <svg
    height="16"
    stroke-linejoin="round"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M8.55846 2H7.44148L1.88975 13.5H14.1102L8.55846 2ZM9.90929 1.34788C9.65902 0.829456 9.13413 0.5 8.55846 0.5H7.44148C6.86581 0.5 6.34092 0.829454 6.09065 1.34787L0.192608 13.5653C-0.127943 14.2293 0.355835 15 1.09316 15H14.9068C15.6441 15 16.1279 14.2293 15.8073 13.5653L9.90929 1.34788ZM8.74997 4.75V5.5V8V8.75H7.24997V8V5.5V4.75H8.74997ZM7.99997 12C8.55226 12 8.99997 11.5523 8.99997 11C8.99997 10.4477 8.55226 10 7.99997 10C7.44769 10 6.99997 10.4477 6.99997 11C6.99997 11.5523 7.44769 12 7.99997 12Z"
    />
  </svg>
);

export default function ErrorDemo() {
  return <ProjectBanner
          callToAction={{
            label: "Add Credit Card",
            href: `/$`
          }}
          icon={<Warning />}
          label={
            <>
              Payment failed, update credit card information before your
              account is shut down
            </>
          }
          variant="error"
        />;
}