Notification bell
Pixel notification bell that swings with a lagging clapper and pops its badge on new items; clicking it clears the badge in a spray of pixels.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxBell count={2} />Installation
pnpm dlx shadcn@latest add @lumesec/px-bellFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-bell.jsonUsage
import { PxBell } from "@/components/lumesec/px-bell";
export function Example() {
return (
<PxBell count={2} />
);
}Behaviour
A new notification swings the bell on its pivot with a lagging clapper, sends sound waves out both sides and pops the badge. Clicking the bell clears it in a spray of pixels.
API reference
Attributes
countReact propcountTypenumberDefault2Starting unread count. Read once on first connect.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
notifyReact proponNotifyDetail{ unread: number }Fires on each new notification with the new unread count.
readReact proponReadDetail{}Fires when the bell is clicked while there are unread notifications.
Methods
Call them on the element, for example through a React ref.
notify()Adds one unread notification, rings the bell and fires notify.
clearAll()Marks everything as read and fires read. Does nothing when the count is already zero.
Accessibility
- The bell is a native button with
aria-label="Notifications. Click to mark all as read."; the label does not include the count. - The "N unread" / "All caught up" text is an
aria-live="polite"region. - "Notify" is a native button.
- Reduced motion: the bell and clapper do not swing and the clearing sparks are skipped; the sound waves and badge pop still play.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground and --lumesec.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent and --ui-fg.
Notes
- The badge count is drawn in the monospace font and shows
9+above nine. The bell canvas is a fixed 180 by 116px.
Related
Was this page helpful?