Announcement Pill
NewInstallation
npx shadcn@latest add https://uibrik.com/r/announcement-pill.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/announcement-pill/announcement-pill.tsx"use client"; // The small "New · ..." link that sits above a hero heading. A thin band of // light runs once along its border when it appears and again on hover, and // the arrow grows a stem as it steps forward, so the pill reads as a link // without shouting. import { motion, useReducedMotion } from "motion/react"; import { useEffect, useRef, useState, type ReactNode } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1]; export type AnnouncementPillProps = { /** Short tag on the left, e.g. "New". Empty hides it. */ tag?: string; children?: ReactNode; /** Renders a link when set, a button otherwise. */ href?: string; onClick?: () => void; /** Muted tag, or filled with the foreground colour. */ tagStyle?: "soft" | "solid"; /** When the light runs along the border. */ shimmer?: "once" | "hover" | "off";
Adds the files to
components/uibrik/announcement-pill and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/announcement-pill.Props
AnnouncementPill- tag
- Type string
- "New"
- Short tag on the left. Empty hides it.
- children
- Type string
- "Introducing the v2 components"
- The announcement.
- tagStyle
- Type "soft" | "solid"
- "soft"
- Muted tag, or filled with the foreground colour.
- shimmer
- Type "once" | "hover" | "off"
- "once"
- When the light runs along the border.
- href
- Type string
- –
- Renders a link when set, a button otherwise.
- onClick
- Type () => void
- –
- Called when pressed.
- className
- Type string
- –
- Classes for the pill.
