50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T2f27,'use client'; import React, { useState, useRef, useEffect, useCallback } from 'react'; import { createPortal } from 'react-dom'; import type { ComponentProps, HTMLAttributes, ReactNode } from 'react'; import { Badge } from '@/components/ui/badge'; import { cn } from '@/lib/utils'; import { motion, AnimatePresence, useAnimationFrame, useMotionTemplate, useMotionValue, useTransform, } from 'motion/react'; import { ChevronDown } from 'lucide-react'; import LustreText from '@/components/ui/lustretext'; const EXPANDABLE_CONTENT_SYMBOL = Symbol.for('AnnouncementExpandedContent'); const MovingBorder = ({ children, duration = 3000, rx, ry, ...otherProps }: { children: React.ReactNode; duration?: number; rx?: string; ry?: string; } & React.SVGProps) => { const pathRef = useRef(null); const progress = useMotionValue(0); useAnimationFrame((time) => { const length = pathRef.current?.getTotalLength?.(); if (length) { const pxPerMillisecond = length / duration; progress.set((time * pxPerMillisecond) % length); } }); const x = useTransform( progress, (val) => pathRef.current?.getPointAtLength(val).x ?? 0, ); const y = useTransform( progress, (val) => pathRef.current?.getPointAtLength(val).y ?? 0, ); const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`; return ( <> {children} ); }; export type AnnouncementProps = Omit, 'ref'> & { styled?: boolean; animation?: 'fade'; icon?: ReactNode; iconPosition?: 'left' | 'right'; shiny?: boolean; movingBorder?: boolean; movingBorderDuration?: number; movingBorderClassName?: string; }; function AnnouncementComponent({ variant = 'outline', styled = false, animation = 'fade', icon, iconPosition = 'left', shiny = false, movingBorder = false, movingBorderDuration = 3000, movingBorderClassName, className, children, ...props }: AnnouncementProps) { const [isOpen, setIsOpen] = useState(false); const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0, }); const containerRef = useRef(null); const dropdownRef = useRef(null); const isMounted = typeof window !== 'undefined'; const { expandedContent, mainContent, hasExpandable } = React.useMemo(() => { const childArray = React.Children.toArray(children); const main: ReactNode[] = []; let expanded: ReactNode = null; let found = false; childArray.forEach((child) => { if ( React.isValidElement(child) && (child.type as unknown as { [key: symbol]: boolean })?.[ EXPANDABLE_CONTENT_SYMBOL ] ) { expanded = (child.props as { children?: ReactNode }).children; found = true; } else { main.push(child); } }); return { expandedContent: expanded, mainContent: main, hasExpandable: found, }; }, [children]); const updatePosition = useCallback(() => { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect(); setDropdownPosition({ top: rect.bottom + window.scrollY, left: rect.left + window.scrollX, width: rect.width, }); } }, []); useEffect(() => { if (!isOpen || !hasExpandable) return; updatePosition(); const handleClickOutside = (event: MouseEvent) => { const target = event.target as Node; if ( containerRef.current && !containerRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target) ) { setIsOpen(false); } }; const handleEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') { setIsOpen(false); } }; const handleScroll = () => { updatePosition(); }; const handleResize = () => { updatePosition(); }; document.addEventListener('mousedown', handleClickOutside); document.addEventListener('keydown', handleEscape); window.addEventListener('scroll', handleScroll, true); window.addEventListener('resize', handleResize); return () => { document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('keydown', handleEscape); window.removeEventListener('scroll', handleScroll, true); window.removeEventListener('resize', handleResize); }; }, [isOpen, hasExpandable, updatePosition]); const animations = { fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, }, }; const displayContent = shiny ? React.Children.map(mainContent, (child) => typeof child === 'string' ? : child, ) : mainContent; const handleToggle = useCallback((e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); setIsOpen((prev) => !prev); }, []); const badgeContent = (

{icon && iconPosition === 'left' && ( {icon} )}

{displayContent}

{icon && iconPosition === 'right' && ( {icon} )} {hasExpandable ? ( ) : null}

); return ( <> {movingBorder ? (

{badgeContent}

) : ( badgeContent )} {isMounted && hasExpandable && createPortal( {isOpen && ( )} , document.body, )} ); } export const Announcement = AnnouncementComponent; export type AnnouncementTagProps = HTMLAttributes & { lustre?: boolean; movingBorder?: boolean; movingBorderDuration?: number; movingBorderClassName?: string; }; export function AnnouncementTag({ className, lustre = false, movingBorder = false, movingBorderDuration = 3000, movingBorderClassName, children, ...props }: AnnouncementTagProps) { const tagContent = ( {React.Children.map(children, (child) => lustre && typeof child === 'string' ? ( ) : ( child ), )} ); if (movingBorder) { return (

{tagContent} ); } return tagContent; } export type AnnouncementTitleProps = HTMLAttributes & { multiTags?: boolean; lustre?: boolean; }; export function AnnouncementTitle({ className, multiTags = false, lustre = false, children, ...props }: AnnouncementTitleProps) { return ( {React.Children.map(children, (child) => lustre && typeof child === 'string' ? ( ) : ( child ), )} ); } export type AnnouncementContainerProps = HTMLAttributes; export function AnnouncementContainer({ className, ...props }: AnnouncementContainerProps) { return (

); } export function AnnouncementExpandedContent({ children, }: { children: ReactNode; }) { return null; } (AnnouncementExpandedContent as unknown as { [key: symbol]: boolean })[ EXPANDABLE_CONTENT_SYMBOL ] = true; 54:T901,import * as React from 'react'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const badgeVariants = cva( 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', outline: 'text-foreground', }, shiny: { true: 'relative overflow-hidden', false: '', }, }, defaultVariants: { variant: 'default', shiny: false, }, }, ); export interface BadgeProps extends React.HTMLAttributes, VariantProps { shiny?: boolean; shinySpeed?: number; } function Badge({ className, variant, shiny = false, shinySpeed = 5, children, ...props }: BadgeProps) { const animationDuration = `${shinySpeed}s`; return (

{children} {shiny && ( )} {shiny && ( )}

); } export { Badge, badgeVariants }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@scrollxui/badge","@scrollxui/lustretext"]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/announcement.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/announcement","itemId":"@scrollxui/announcement"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/announcement.tsx","content":"$53","type":"registry:ui"},{"path":"components/ui/badge.tsx","content":"$54","type":"registry:ui"},{"path":"components/ui/lustretext.tsx","content":"import React from \"react\";\n\ninterface LustreTextProps {\n text: string;\n disabled?: boolean;\n speed?: number;\n className?: string;\n}\n\nconst LustreText: React.FC = ({\n text,\n disabled = false,\n speed = 5,\n className = \"\",\n}) => {\n const animationStyle = {\n animationDuration: `${speed}s`,\n animationTimingFunction: \"linear\",\n animationIterationCount: \"infinite\",\n animationFillMode: \"forwards\",\n };\n\n return (\n \n {text}\n \n );\n};\n\nexport default LustreText;\n","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}]}]]}],"$L55"]}]

Announcement

Installation

Files

components

lib

Styles