Components
Place the element at the top of your root layout to display announcements. By default, the banner uses a style tag to modify Fumadocs layouts, such as reducing the sidebar height. You can disable this feature with: To enable users to close the banner, assign it an ID. The state will be automatically saved.
npx shadcn@latest add https://21st.dev/r/fuma-nama/bannerLoading preview...
import Image from "next/image"
import { Banner } from "@/components/ui/banner"
function RainbowBannerDemo() {
return (
<div className="relative w-full">
<Banner
message="🎉 New features coming soon!"
height="2rem"
variant="rainbow"
className="mb-4"
/>
<div className="relative w-full aspect-[16/9] rounded-lg overflow-hidden">
<Image
src="https://www.launchuicomponents.com/app-light.png"
alt="Application screenshot"
fill
className="object-cover"
priority
/>
</div>
</div>
)
}
function BannerDemo() {
return (
<div className="relative w-full">
<Banner
message="🎉 New features coming soon!"
height="2rem"
className="mb-4"
/>
<div className="relative w-full aspect-[16/9] rounded-lg overflow-hidden">
<Image
src="https://www.launchuicomponents.com/app-light.png"
alt="Application screenshot"
fill
className="object-cover"
priority
/>
</div>
</div>
)
}
export { RainbowBannerDemo, BannerDemo }