# Installation

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

![Yumma UI](/ui-og.png)

## What Is Yumma UI?

A set of ready-to-use UI components based on [Base UI](https://base-ui.com/) 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. Create Project**

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

```bash title="Vite"
pnpm create vite my-app --template react-ts
```

```bash title="Next.js"
pnpm create next-app@latest my-app
```

**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.

```bash
pnpm dlx yummaui init
```

**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.

```bash
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.

```js title="yumma.config.mjs"
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; }",
    },
  },
});
```

> A project that already has a `yumma.config.mjs` keeps it. `init` & `add` name any of these it lacks, for you to add to its `theme`.

To set up the plugin by hand instead, follow [Installation](/docs/installation), then add the `theme` above.

## Icons

Components draw their icons from [Solar](https://github.com/480-Design/Solar-Icon-Set) by 480 Design, licensed [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), through `@solar-icons/react`: Outline for checks, arrows and operators, Bold Duotone for objects.