What Is Yumma UI?

A set of ready-to-use UI components based on Base UI for accessibility and keyboard navigation, styled with Yumma CSS utility classes, giving you full control over the final look and feel without any hidden abstractions.

Getting Started

Yumma UI components are copied into your project rather than installed as a dependency — once a component is in your codebase, it is yours to edit. Set up Yumma CSS first, then use the CLI to copy in whatever you need.

---

Vite (React)

1. 1

   Create Project

   Initialize a new React project with Vite.

   pnpmnpm

   Copy

   pnpm create vite my-app --template react-ts
   

2. 2

   Install Dependencies

   Install the core dependencies for Yumma UI.

   pnpmnpm

   Copy

   pnpm add yummacss @yummacss/vite @base-ui/react iconoir-react motion
   

3. 3

   Add the Plugin

   Register the Yumma CSS plugin in your Vite configuration.

   vite.config.ts

   Copy

   import react from "@vitejs/plugin-react";import { defineConfig } from "vite";import yummacss from "@yummacss/vite";
   export default defineConfig({  plugins: [react(), yummacss()],});
   

4. 4

   Configure Yumma CSS

   Specify the locations of all your project files in the config file.

   yumma.config.mjs

   Copy

   import { defineConfig } from "yummacss";
   export default defineConfig({  source: ["./src/**/*.{ts,tsx}"],});
   

5. 5

   Import Styles

   Create a CSS file containing the @yummacss; marker & import it in your root entry file. The plugin replaces the marker with generated CSS.

   src/styles.csssrc/main.tsx

   Copy

   @yummacss;
   

6. 6

   Add Components

   Set up yummaui.json, then copy in whatever you need. init detects your framework, package manager & import alias, and asks where components should live.

   pnpmnpm

   Copy

   pnpm dlx yummaui init
   pnpm dlx yummaui add button
   

   Each component lands as a single file you own. Run yummaui list to see everything available.

---

Next.js (App Router)

1. 1

   Create Project

   Initialize a new Next.js project if you haven't already.

   pnpmnpm

   Copy

   pnpm create next-app@latest my-app
   

2. 2

   Install Dependencies

   Install the core dependencies for Yumma UI.

   pnpmnpm

   Copy

   pnpm add yummacss @yummacss/postcss @base-ui/react iconoir-react motion
   

3. 3

   Configure PostCSS

   Register the Yumma CSS plugin in your PostCSS configuration. It works with both Turbopack & Webpack.

   postcss.config.mjs

   Copy

   export default {  plugins: {    "@yummacss/postcss": {},  },};
   

4. 4

   Configure Yumma CSS

   Specify the locations of all your project files in the config file.

   yumma.config.mjs

   Copy

   import { defineConfig } from "yummacss";
   export default defineConfig({  source: ["./src/**/*.{ts,tsx}"],});
   

5. 5

   Import Styles

   Create a global CSS file containing the @yummacss; marker & import it in your root layout. The plugin replaces the marker with generated CSS.

   globals.csslayout.tsx

   Copy

   @yummacss;
   

6. 6

   Add Components

   Set up yummaui.json, then copy in whatever you need. init detects your framework, package manager & import alias, and asks where components should live.

   pnpmnpm

   Copy

   pnpm dlx yummaui init
   pnpm dlx yummaui add button
   

   Each component lands as a single file you own. Run yummaui list to see everything available.