Banner

A banner is a full-width component that can be used to show a message and action to the user.

Powered by

Lucide

Important message

Installation

npx pal-ui@latest add banner

Features

Controlled and uncontrolled visibility state
Customizable close handler
Optional inset variant with rounded corners
Composable API with Icon, Title, Action and Close components
Customizable via className prop
Adapts to primary color tokens

Examples

Inset

Important message

Different primary colors

Something's gone horribly wrong.

You're almost out of disk space.

You've been selected for a secret mission.

Announcement

A compound badge designed to display an announcement.

Color Picker

Allows users to select a color. Modeled after the color picker in Figma.