Installation

Get started with Yumma UI in your Vite or Next.js project.

Yumma UI

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 for pasting into your project, and you need to set up dependencies and configuration to ensure correct functioning.

Vite (React)

If you're using Vite for your React project, follow these steps to get started.

  1. 1

    Create Project

    Initialize a new React project with Vite.

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

    Install Dependencies

    Install the core dependencies for Yumma UI.

    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
    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
    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.css
    @yummacss;
    import "./styles.css";import React from "react";import ReactDOM from "react-dom/client";import App from "./App";ReactDOM.createRoot(document.getElementById("root")).render(  <React.StrictMode>    <App />  </React.StrictMode>);

Next.js (App Router)

The recommended way to use Yumma UI with Next.js is by using the App Router.

  1. 1

    Create Project

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

    pnpx create-next-app@latest my-app
  2. 2

    Install Dependencies

    Install the core dependencies for Yumma UI.

    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
    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
    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.css
    @yummacss;
    import "./globals.css";export default function RootLayout({ children }) {  return (    <html lang="en">      <body>{children}</body>    </html>  );}