Installation

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. init sets up Yumma CSS for you, in a Vite or a Next.js project.

1. 1

   Create Project

   Start a React project with Vite, or with Next.js.

   ViteNext.js

   Copy

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

2. 2

   Run init

   init detects your framework, package manager & import alias, asks where components should live, then sets up Yumma CSS: it installs yummacss & the plugin for your framework, registers the plugin, writes yumma.config.mjs & adds @yummacss; to the stylesheet your app loads.

   ​

   Copy

   pnpm dlx yummaui init
   

3. 3

   Add Components

   Name a component, or run add on its own to search the list. Anything a component needs from npm, such as @base-ui/react, is installed with it.

   ​

   Copy

   pnpm dlx yummaui add button
   

   Each component lands as a single file you own.

The Config It Writes

yumma.config.mjs points at your project files and holds the names the components animate with: opening and closing for enter and exit transitions, swiping for a Drawer being dragged, and pulse, slide and spin for Skeleton, Progress and Autocomplete.

import { defineConfig } from "yummacss";

export default defineConfig({
  source: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
  theme: {
    states: {
      closing: "[data-ending-style]",
      opening: "[data-starting-style]",
      swiping: "[data-swiping]",
    },
    keyframes: {
      pulse: "0%, 100% { opacity: .5; } 50% { opacity: 1; }",
      slide: "from { translate: -100% 0; } to { translate: 100% 0; }",
      spin: "to { rotate: 360deg; }",
    },
  },
});

To set up the plugin by hand instead, follow Installation, then add the theme above.

Icons

Components draw their icons from Solar by 480 Design, licensed CC BY 4.0, through @solar-icons/react: Outline for checks, arrows and operators, Bold Duotone for objects.