Banner

CTAs

About

This is banner

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

Code

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

Usage.tsx

import { Banner } from "@/components/ui/banner";

import React from 'react';
import { useState } from "react";
import { Sparkles } from 'lucide-react';
import {Button} from "@/components/ui/button"


export default function DemoOne() {
  const [show, setShow] = useState(true);
  return <Banner
          show={show}
          onHide={() => setShow(false)}
          variant="aurora"
          title="✨ New Feature Available"
          description="Experience our redesigned dashboard with advanced analytics"
          closable={true}
          icon={<Sparkles className="h-6 w-6" />}
          action={
            <Button className="bg-violet-600 hover:bg-violet-700 text-white text-xs px-4 py-1.5 rounded-lg">
              Explore Now →
            </Button>
          }
        />
}