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

Theme UI Gallery

Theme UI is a library for building "consistent, themeable React apps based on constraint-based design principles".
The @theme-ui/components package contains useful components that will automatically be styled by tokens in your Theme UI configuration. This site contains pre-built compositions of those components as a launchpad to start building your own components using Theme UI. You can modify the theme for the site in the editor on the right and watch changes propagate across the page.
Get Started

Theme Editor

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