Skip to content
Theme UI Gallery
View Source
View Theme
Made by @gill_kyle


Examples of combining @theme-ui/components to create and style Alerts and Messages.

With Close

Including Theme UI component's Close component at the end of the alert.

This is a notice

Rounded with Badge

Nesting a Badge inside of an Alert.

There's a big deal that ends soon!


Adjusting styles to create an outline rather than a filled in Alert.

Verify your account to see additional information

Theme Editor

Editing your theme will update all elements styled on the page by Theme UI.
Font Sizes
Font Weights
Line Heights
Color Mode
Space is used by margin, padding, and CSS grid gaps.
Edit the Theme to see changes!