Svelte notification blocks.

The 100 notification blocks cover how an app tells people things: toasts, floating cards, bell panels, inboxes, activity feeds, incident alerts, preferences and digests. Each shows the surface and what pressing its controls does to the unread count and the list.

There are 21 groups: Toasts, Floating cards, Bells and panels, Unread and counts, Sort and find, Tables, and more. Some are transient messages (toasts), some are places to catch up (bells, inboxes, feeds) and some are settings, such as preferences and do not disturb.

Promise Toast Notification, Toast Stack Notification and Undo Toast Notification raise real toasts. Bell Dropdown Notification is the bell with a popover list and count. Tabbed Inbox Notification has All, Mentions and Alerts tabs with their own counts. Project Activity Feed Notification is a filterable timeline with Load earlier events.

A comment describes the surface, then a typed list of notifications (a title, a time and a read flag each), with times fixed from one constant, and the component with its state. The toast blocks create a toaster from the shared toast component.

The lists are typed arrays, so nothing arrives by itself. Lift the array into state seeded from your API, then add new items from your socket, server-sent events or polling, newest first, and recompute the unread count from the list. Keep the polite status line so new items are announced.

The toast blocks call the shared toast component's createToaster and render its Toaster once. Raise a toast from your own code with that toaster, for example for a promise with loading, success and error states. Promise Toast Notification shows that flow.

Blocks that show a surface open in place for the preview also include a drawn copy and a state for it. Their comments say what to remove in your app: keep the real Popover, Dialog or Toaster and drop the in-place copy, its state and the Escape effect.

Bell Dropdown Notification keeps the read ids in state, marks a row read when its title is pressed and lowers the count on the bell, whose accessible name follows (Notifications, 3 unread). Persist the read flag by calling your API where the row is marked, and refetch or update the count from the response.

Unread is shown by a dot, heavier text and a spoken word, never colour alone. Do Not Disturb Notification and the preference blocks hold their choices in state, so save them to your user settings. Keep the live region and focus handling when you change the data.

This page lists 100 of the category's 100 notification blocks for Svelte. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Svelte notification blocks are the React ones ported to Svelte, on Ark UI's Svelte primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-svelte (/r/svelte/notification-achievement.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Svelte needs svelte @ark-ui/svelte lucide-svelte installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-svelte@latest add` with the block's registry URL, such as /r/svelte/notification-achievement.json for Achievement Notification. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 21 kinds of notification block, led by builds and jobs (10), toasts (8), incidents and alerts (6) and rewards and progress (6), and sort by popular or name. A good first look: Achievement Notification, Project Activity Feed Notification and Alert Banner Notification. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a notification block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the where it appears, inbox and alerts and status kinds.

Open its page and use the full-screen viewer (/view/notification/svelte/achievement) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each notification block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the notification blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 notification blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a notification block, read it with get_block and install it on your Svelte stack.

Pass `category: "notification"` to search_blocks to search only the 100 notification blocks, or to list_blocks for the 21 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "notification", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.