Notification Stack

ProNew

A group of notification cards that sits collapsed with cards peeking behind the newest one and springs open into a list.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/notification-stack

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	`Notification` elements, newest first. Give each a stable `key`.
`expanded`	`boolean`	-	Controlled expanded state.
`defaultExpanded`	`boolean`	`false`	Initial expanded state when uncontrolled.
`onExpandedChange`	`(expanded: boolean) => void`	-	Called when the stack expands or collapses.
`onClearAll`	`() => void`	-	Shows a clear-all button when set.
`label`	`string`	`"Notifications"`	Heading above the expanded list and the region's accessible name.

Also accepts all <section> props.

Prop	Type	Default	Description
`title`	`React.ReactNode`	-	Bold first line.
`icon`	`React.ReactNode`	-	App icon in a 36px rounded tile.
`iconClassName`	`string`	-	Classes for the icon tile.
`time`	`React.ReactNode`	-	Short relative time, such as "now".
`onDismiss`	`() => void`	-	Shows a dismiss button on hover and focus.
`dismissLabel`	`string`	`"Dismiss"`	Accessible label of the dismiss button.

Also accepts all <div> props. children is the body text.

Collapsed, one button covers the stack and reads "Show all N notifications"; the cards behind it are inert.
Escape collapses an expanded stack and focus returns to the expand button.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/notification-stack

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	`Notification` elements, newest first. Give each a stable `key`.
`expanded`	`boolean`	-	Controlled expanded state.
`defaultExpanded`	`boolean`	`false`	Initial expanded state when uncontrolled.
`onExpandedChange`	`(expanded: boolean) => void`	-	Called when the stack expands or collapses.
`onClearAll`	`() => void`	-	Shows a clear-all button when set.
`label`	`string`	`"Notifications"`	Heading above the expanded list and the region's accessible name.

Also accepts all <section> props.

Prop	Type	Default	Description
`title`	`React.ReactNode`	-	Bold first line.
`icon`	`React.ReactNode`	-	App icon in a 36px rounded tile.
`iconClassName`	`string`	-	Classes for the icon tile.
`time`	`React.ReactNode`	-	Short relative time, such as "now".
`onDismiss`	`() => void`	-	Shows a dismiss button on hover and focus.
`dismissLabel`	`string`	`"Dismiss"`	Accessible label of the dismiss button.

Also accepts all <div> props. children is the body text.

Collapsed, one button covers the stack and reads "Show all N notifications"; the cards behind it are inert.
Escape collapses an expanded stack and focus returns to the expand button.