This is the full developer documentation for Dreamy UI.
---
title: Introduction
---
# Introduction
Dreamy UI is a React UI library that provides a set of customizable components and utilities to build performant, websites with ease.
## Motivation
Many UI libraries are built on top of CSS-in-JS libraries like [Styled Components](https://styled-components.com/) or [Emotion](https://emotion.sh/). These libraries provide a great developer experience, but they come with a cost: they use runtime CSS styles, which slow down rendering, performance and limit some features, like streaming.
Dreamy UI is built on top of [Panda CSS](https://panda-css.com/), which is a CSS-in-JS library that provides strongly typed CSS styles, that are generated at **build time**, incredibly improving website performance and not decreasing developer experience.
As a developer, I've always been frustrated by needing to do some hacks to achieve what I wanted to do. That's why I made Dreamy UI modular. Every component, recipe and pattern is fully customizable. Multipart components are built on top of other base components, for eg. `` is built on top of `` and ``. In this way, while modifying an `` recipe, you also modify the style of ``, without having to copy and paste the code. This keeps the codebase cleaner, easier to maintain and extend and reduces redundancy.
```tsx
// as base
// as base
```
## Solution
Introducing Dreamy UI, a library that allows you to write your favorite CSS-in-JS code, while still enjoying native CSS performance. Dreamy UI comes with many utilities to write your website even faster with Boolean style props. Let's say you are sure your flex component will be column, so instead of typing `flexDir="column"`, it is possible to write `col` or `column` as prop π. You can mix and use any styling style to your preference.
Dreamy UI is highly customizable, meaning you can modify any component recipe in panda config.
If you have had used any CSS-in-JS library before, you are fully familiar with styling components and you'll have no problem with Dreamy UI.
---
## FAQ
### What's the difference between Dreamy UI and tailwind/panda CSS?
Dreamy UI is a component library, which uses Panda CSS and it's peer dependency. Tailwind and panda CSS are not component libraries, they are styling engines that provide a set of utilities to write CSS styles.
### Does Dreamy UI support SSR?
Yes, Dreamy UI supports SSR. You can use it with Next.js, React Router, etc. However some components like `Popover` will throw a hydration warning, as they inject HTML via js, that can't be injected on the server (you can use `suppressHydrationWarning` prop in the root `` tag to ignore it).
### Why does Dreamy UI use motion?
[motion](https://motion.dev/) is a great library for animations, which provides ease of using animations in React. It is well tested and makes working with animations a breeze.
### Does Dreamy UI support React Server Components?
Yes, Dreamy UI supports React Server Components. You can use it with Next.js or React Router, etc. Non-client components DO NOT use `"use client"` directive. Only components that need to use client-side functionality are marked with `"use client"` on the top of the file. This makes Dreamy UI use the real React Server Components, by not making whole page a client components that don't need it.
### Does Dreamy UI work in other libraries like Vue, Solid, etc?
No, Dreamy UI is a React library. It is not designed to work with other libraries.
---
title: Installation
---
# Install Dreamy UI
## Quick Start (Recommended)
Use the automated CLI to set up Dreamy UI in your project:
```bash
npx @dreamy-ui/cli init
```
Use `--yes` to accept all defaults without prompts:
```bash
npx @dreamy-ui/cli init --yes
```
---
The CLI will automatically:
1. Detect your framework (React Router v7, Next.js, TanStack Start, or Vite)
2. Install required dependencies:
- Dev: `@pandacss/dev`, `@pandacss/postcss`, `@dreamy-ui/cli`
- Prod: `@dreamy-ui/react`, `@dreamy-ui/panda-preset`, `motion`
3. Create and configure `panda.config.ts` with the Dreamy preset, patterns, and recipes
4. Add a `prepare` script (`panda codegen`) to `package.json`
5. Configure PostCSS (`postcss.config.mjs`) β Next.js only
6. Update `vite.config` with the Panda CSS PostCSS plugin β Vite, React Router, and TanStack Start (removes Tailwind if present)
7. Remove the default Tailwind CSS setup when detected
8. Set up your CSS file with Panda layers and import it in your app entry
9. Update `tsconfig.json` β add `styled-system/**/*` to `include` and an `@/ui` path alias (Next.js also gets `styled-system/*`)
10. Create a `components/dreamy-provider.tsx` wrapper component
11. Wire up `DreamyProvider` in your app root (with SSR color mode for React Router, Next.js, and TanStack Start)
12. Add recommended starter components (`button`, `flex`, `text`, `heading`)
13. Run Panda CSS codegen to generate `styled-system`
**Options:**
- `--yes, -y` β Skip all prompts and use defaults
- `--skip-install` β Skip dependency installation
- `--skip-components` β Skip adding recommended components
## Manual Installation
If you prefer manual installation or need more control, follow the framework-specific guides:
- [Next.js](/docs/frameworks/next.js)
- [React Router](/docs/frameworks/react-router)
- [TanStack Start](/docs/frameworks/tanstack)
- [Remix](/docs/frameworks/remix)
- [Vite](/docs/frameworks/vite)
### 1. Install dependencies
Install Panda CSS dev dependencies and Dreamy UI packages:
```bash
pnpm add -D @pandacss/dev @pandacss/postcss @dreamy-ui/cli
pnpm add @dreamy-ui/react @dreamy-ui/panda-preset motion
```
### 2. Configure `panda.config.ts`
Configure your Panda config with the Dreamy preset. The `patterns` and `recipes` imports are created automatically when you add components with the CLI β for a fresh manual setup, add at least one component first (`npx dreamy add button`) or create the `components/patterns` and `components/recipes` index files yourself.
```ts {1-3, 7-16}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { patterns } from "./components/patterns";
import { recipes } from "./components/recipes";
export default defineConfig({
// ...
jsxFactory: "dreamy",
include: [
"./app/**/*.{js,jsx,ts,tsx}" // Adjust for your framework β see guides below
],
presets: [createDreamyPreset()],
plugins: [dreamyPlugin()],
patterns,
theme: {
extend: {
recipes
}
}
});
```
The `include` path and build-tool setup (Vite PostCSS plugin, PostCSS config, CSS layers) differ per framework β see the linked guides above.
### 3. Add a `prepare` script
Add Panda codegen to your `package.json` so types are generated after install:
```json
{
"scripts": {
"prepare": "panda codegen"
}
}
```
### 4. Configure TypeScript
Add `styled-system/**/*` to the `include` array and an `@/ui` path alias in `tsconfig.json`:
```json
{
"compilerOptions": {
"paths": {
"@/ui": ["./components/ui"]
}
},
"include": ["**/*.ts", "**/*.tsx", "styled-system/**/*"]
}
```
Next.js projects also need a `styled-system/*` path alias β see the [Next.js guide](/docs/frameworks/next.js).
### 5. Add `DreamyProvider`
Create `components/dreamy-provider.tsx` and wrap your app root. The exact setup depends on your framework (SSR color mode for React Router and Next.js, client-only for Vite). See the framework guides for copy-paste examples.
### 6. Add components and run codegen
Add the components you need, then generate the styled-system:
```bash
npx dreamy add button flex text heading
npx panda codegen
```
### 7. Start using Dreamy UI
Import components from `@/ui` β they are copied into your project by the CLI:
```tsx
import { Button } from "@/ui";
export default function Index() {
return