Installation

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

What is Yumma UI?

A set of ready-to-use UI components based on Base UI for accessibility and keyboard navigation, styled with atomic classes from Yumma CSS, 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.

React (Vite)

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

1
Create project
Initialize a new React project with Vite.
Terminal window
```
pnpm create vite my-app --template react-ts
```
2
Install dependencies
Install the core dependencies for Yumma UI.
Terminal window
```
pnpm add yummacss @base-ui/react motion
```
3
Initialize Yumma CSS
Create a configuration file in your project.
Terminal window
```
pnpm yummacss init
```

Configure Yumma CSS

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

import { defineConfig } from "yummacss";

export default defineConfig({
  source: ["./src/**/*.{ts,tsx}"],
  output: "./src/styles.css",
  buildOptions: {
    reset: true,
  },
});

Import styles

Import the generated CSS file in your root entry file.

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
Create project
Initialize a new Next.js project if you haven't already.
Terminal window
```
pnpx create-next-app@latest my-app
```
2
Install dependencies
Install the core dependencies for Yumma UI.
Terminal window
```
pnpm add yummacss @base-ui/react motion
```
3
Initialize Yumma CSS
Create a configuration file in your project.
Terminal window
```
pnpm yummacss init
```

Configure Yumma CSS

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

import { defineConfig } from "yummacss";

export default defineConfig({
  source: ["./src/**/*.{ts,tsx}"],
  output: "./src/styles.css",
  buildOptions: {
    reset: true,
  },
});

Import styles

Import the generated CSS file in your root layout.

import "./styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}