Installation

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

Getting started

Yumma UI components are designed to be copied and pasted into your project. To ensure everything works correctly, you need to set up the necessary dependencies and configuration.

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
```
npx create-next-app@latest my-app
```
2
Install dependencies
Install the core dependencies for Yumma UI.
Terminal
```
pnpm add yummacss @base-ui/react motion
```
3
Initialize Yumma CSS
Create a configuration file in your project.
Terminal
```
pnpm yummacss init
```

Configure Yumma CSS

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

export default {
  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>
  );
}

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
```
pnpm create vite my-app --template react-ts
```
2
Install dependencies
Install the core dependencies for Yumma UI.
Terminal
```
pnpm add yummacss @base-ui/react motion
```
3
Initialize Yumma CSS
Create a configuration file in your project.
Terminal
```
pnpm yummacss init
```

Configure Yumma CSS

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

export default {
  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>
);