Your next favorite frontend framework

Abbreviated Syntax

Abbreviated naming utility classes help you build more with fewer words, while respecting CSS naming conventions.

Learn more

button.js

<button className="bg-black tc-white">
    Button
</button>

Tiny and Lightweight

Yumma helps you create the smallest CSS bundle. It scans your CSS file and removes unused utility classes.

Learn more

Terminal

npx yummacss build

Responsive By Design

Use media queries and conditions to change the look of your Yumma CSS project.

Learn more

SM

page.js

<div className="bg-black sm:w-full">
    Button
</div>

MD

page.js

<div className="bg-black md:w-full">
    Button
</div>

LG

page.js

<div className="bg-black lg:w-full">
    Button
</div>

XL

page.js

<div className="bg-black xl:w-full">
    Button
</div>

XXL

page.js

<div className="bg-black xxl:w-full">
    Button
</div>

Components

We have the best reusable Yumma CSS components! They’re gorgeous, mobile-friendly, and customizable.

Learn more

src/app.js

import React from "react";
import { Button, Footer, Navbar } from "yumma-ui";