Banner

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

export default function Example() {
  return (
    <div style={{ width: "100%" }}>
      <Banner type="brand" action={<Button size="sm" variant="outline">See the list</Button>}>Eid sale: 15% off every gift box until Friday.</Banner>
    </div>
  );
}

#Installation

$ npx uix-ui@latest add banner

This copies the file into components/ui/banner.tsx in your project. npx shadcn@latest add @uix/banner works too.

#Usage

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

<div style={{ width: "100%" }}>
  <Banner type="brand" action={<Button size="sm" variant="outline">See the list</Button>}>Eid sale: 15% off every gift box until Friday.</Banner>
</div>

#Props

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

#Dependencies

Installed for you by the CLI.

• class-variance-authority
• clsx
• tailwind-merge

• lib/utils.ts
• components/ui/icons.tsx