What is Yumma UI?

Building polished UIs with utility CSS can still mean wiring the same buttons, alerts, and layouts from scratch over and over. Yumma UI gives you production-ready blocks so you can start from a real interface instead of an empty file.

Get Started

Getting started with Yumma UI is easy. You just need to have Yumma CSS installed in your project.

1. Install Yumma CSS

First, ensure you have Yumma CSS set up.

npm install yummacss

1. Browse Components

Visit the UI documentation to browse the available components.

1. Copy and Paste

You can use the component code as it is or customize it to match your brand.

What you can build?

You don’t have to use Yumma UI as-is since it’s built on top of Yumma CSS, so you can easily customize it to match your brand identity.

For example, we just created a landing page for an imaginary brand called Lightbox. We used stock components from Yumma UI, making just a few minor changes. Here’s what it looks like:

Creating design choices

Want to make something that’s unique to your brand? Since Yumma UI is based on Yumma CSS, you can control any type of style, such as colors, radii, margins, typography, and more. The power is all yours!

Start building with Yumma UI

Our entire catalog of components is available in the UI documentation.

We’re so excited to finally release Yumma UI to the public! We can’t wait to see what you build with all of this!