Sonner gallery

A stack of updates, one at a time.

Preview

A little room for the weekend

Your Friday plans are all wrapped up.

Installation

Install the local ghost-kit source bundle while the registry runs at localhost:3110. It contains this component and its source dependencies. Prepare the local registry first so token dependencies also resolve locally.

Install

npx shadcn@latest add http://localhost:3110/r/ghost-kit.json

Basic usage

123import { SonnerGallery } from "@/components/ui/components";

<SonnerGallery notices={[{ id: "saved", title: "Saved", description: "Changes saved." }]} />

Use the exported component in the composition shown above. Keep labels, data, and callbacks in the consuming application.

Structure

Examples

Variants

Tones

Notices carry neutral, success, or warning tones with their own icon and segment label.

A little room for the weekend

Your Friday plans are all wrapped up.

Auto-advance

Auto-advance walks the stack on a timer with a pause control. Hover, focus, and reduced motion pause it automatically.

A little room for the weekend

Your Friday plans are all wrapped up.

Empty state

Dismissing every notice reaches an honest empty state with a way back.

No updates yet.

API reference

sonner-gallery properties
Prop	Type	Description
`notices`required	`SonnerNotice[]`	Sets notices.
`label`	`string \| undefined`	Sets label.
`value`	`string \| undefined`	Sets value.
`defaultValue`	`string \| undefined`	Sets default value.
`onValueChange`	`((value: string) => void) \| undefined`	Sets on value change.
`autoAdvance`	`boolean \| undefined`	Sets auto advance.
`advanceDelay`	`number \| undefined`	Sets advance delay.