Hello Yumma UI!

What Is Yumma UI?

Building polished UIs with utility CSS means rebuilding the same buttons, alerts & layouts every time. Yumma UI provides production-ready blocks so you start from a real interface instead of an empty file.

It ships 36 components with 450 ready-made examples, from a plain button through to command palettes, comboboxes & onboarding flows.

How It Is Built

Every component is Base UI underneath, styled entirely with Yumma CSS utilities.

That split matters. Base UI handles the parts that are genuinely hard to get right: focus management, keyboard navigation, screen reader semantics & portal behavior. Yumma UI handles how it looks. You get accessible behavior without inheriting somebody else's design opinions.

Because the styling is only utility classes, restyling a component is editing the class string. There is no theme object to learn, no CSS to override & no specificity fight.

Not a Dependency

Yumma UI is not a package you install. You copy the component into your project & it becomes your code.

That means no version to keep up with, no breaking change to absorb & no wrapper API standing between you & the markup. If a component is 90% right, change the other 10% directly instead of working around the parts you cannot reach.

Get Started

Getting started with Yumma UI requires Yumma CSS.

1. 1

   Install Yumma CSS

   Set up Yumma CSS in your project.

   pnpmnpm

   Copy

   pnpm add yummacss
   

2. 2

   Browse Components

   Visit the UI documentation to browse available components.

3. 3

   Copy & Paste

   Use component code as is or customize it for your brand.

Every component page shows a live preview with its full source next to it, so you can see what you are copying before you take it.

Start Building Today

Yumma UI gives you production-ready components. Skip the setup & focus on what makes your project unique.

Browse components to get started.