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
> info: Note: this isn't about which library is better, every library has its own pros and cons.
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.
## Solution
Introducing Dreamy UI, a library that allows you to write your favorite CSS-in-JS code, while still enjoying native CSS performance. Dream 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.
Dream 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 Dream.
---
## FAQ
### What's the difference between Dream and tailwind/panda CSS?
Dream 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, Remix, etc.
### 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 Remix, etc. Most basic components are supported and Dream provides set of RSC component alternatives for client ones, for example `Input` component has a RSC version called `InputRSC`, which works the same, but doesn't offer support for `Field` usage.
### 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
```
---
The CLI will automatically:
1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install all required dependencies (Panda CSS + Dreamy UI)
3. Create and configure `panda.config.ts`
4. Update `vite.config.ts` or `postcss.config.mjs` with Panda CSS PostCSS plugin
5. Remove default Tailwind CSS (React Router v7 and Next.js only)
6. Set up CSS files with proper imports
7. Create a `DreamyProvider` component
8. Update your `tsconfig.json` with `@/*` path alias and styled-system (if using TypeScript)
9. Next.js also gets `styled-system/*` path alias for proper type resolution
10. Run Panda CSS codegen to generate the styled-system
11. Add recommended components (button, flex, text, heading) to get you started
12. Prints out code to add to the root of your application
## 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)
- [Remix](/docs/frameworks/remix)
- [Vite](/docs/frameworks/vite)
### 1. Follow panda CSS installation steps
Install panda by following the [panda CSS installation](https://panda-css.com/docs/overview/getting-started#installation) for your framework.
### 2. Install Dreamy UI
```bash
pnpm install @dreamy-ui/react @dreamy-ui/panda-preset @dreamy-ui/cli motion
```
### 3. Add Dream preset
After installing, you should configure your panda config with Dream preset. Copy and paste the following code into your `panda.config.ts` file:
```ts {1-4, 9-25}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
import { patterns } from "./app/components/patterns";
import { recipes } from "./app/components/recipes";
export default defineConfig({
preflight: true,
watch: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
jsxFactory: "dreamy",
include: [
"./app/**/*.{js,jsx,ts,tsx}" // Replace with your app source directory
],
presets: [createDreamyPreset()],
plugins: [dreamyPlugin()],
patterns: {
extend: patterns
},
theme: {
extend: {
recipes
}
},
globalCss: {
extend: {}
},
staticCss: {
extend: {}
},
});
```
Note: The `patterns` and `recipes` imports are automatically configured by the CLI based on your framework. The paths will be adjusted for Next.js (`./src/components` or `./components`) or Vite (`./src/components`).
### 4. Add Dream Provider
Add `DreamyProvider` to the root of your app. It is a wrapper for your app, which provides Dreamy UI with all the necessary context.
```tsx
import { DreamyProvider } from "@dreamy-ui/react";
import domMax from "motion/react";
export default function App() {
return (
);
}
```
### 5. Try and see Dream in action
Create a new component and use some Dreamy UI components!
```tsx
import { Button } from "@dreamy-ui/react";
export default function Index() {
return ;
}
```
---
title: LLMs
---
# LLMs
Dreamy UI has a `llms.txt` file that contains a whole documentation, you can use with your own LLM.
## LLMs.txt
- [/llms.txt](https://dreamy-ui.com/llms.txt): The main LLMs.txt file
## Usage
Copy paste the following URL into your custom docs field in your editor:
<>https://dreamy-ui.com/llms.txt
### Cursor
Use `@Docs` feature in Cursor to include the LLMs.txt files in your project.
[Read more](https://docs.cursor.com/context/@-symbols/@-docs)
### Windstatic
Reference the LLMs.txt files using `@` or in your `.windsurfrules` files.
[Read more](https://docs.windsurf.com/windsurf/memories#memories-and-rules)
---
title: MCP Server
---
# MCP Server
Dreamy UI has a MCP server that you can use to get information about the components and patterns.
## Usage
The Dreamy UI has a
[Model Context Protocol](https://modelcontextprotocol.io/introduction) server
that provides AI assistants (like Claude Code, Cursor, and Copilot) with access
to the Dreamy UI component library.
## Tools
The Dreamy UI MCP exposes the following tools to AI agents:
### Component Tools
- **`get_components`**: Get a complete list of all available components
- **`get_component`**: Get detailed props, types, and configuration options
for any component
- **`get_component_example`**: Get example code for a specific Dreamy UI component
## Setup
The MCP server currently supports only
[stdio transport](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio)
and is published at `@dreamy-ui/mcp`.
### Cursor
In the `.cursor/mcp.json` file at the root of your project, add the following
configuration:
```json
{
"mcpServers": {
"dreamy-ui": {
"command": "npx",
"args": ["-y", "@dreamy-ui/mcp"]
}
}
}
```
> If Cursor doesn't automatically detect the changes, restart the editor or
> manually enable the Dreamy UI server via "MCP Tools."
### Visual Studio Code
> Make sure you have the
> [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
> and
> [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat)
> extensions installed.
In the `.vscode/mcp.json` file at the root of your project, add the MCP server
block:
```json
{
"servers": {
"dreamy-ui": {
"command": "npx",
"args": ["-y", "@dreamy-ui/mcp"]
}
}
}
```
The MCP server is now ready to use. Click on Start on the MCP server.
### Claude Code
> Make sure you have Claude Code installed. Visit
> [Anthropic docs](https://docs.anthropic.com/en/docs/claude-code/mcp) for
> installation instructions.
Run the following command in your terminal to add the Dreamy UI MCP server:
```bash
claude mcp add dreamy-ui -- npx -y @dreamy-ui/mcp
```
The MCP server is now ready to use. Start a Claude Code session by running
`claude`.
### Windsurf
1. <>Navigate to "Settings" > "Windsurf Settings" > "Cascade"
2. <>Click the "Manage MCPs" button, then click the "View raw config" button.
3. <>Add the following to the MCP configuration file (`.codeium/windsurf/mcp_config.json`):
```json
{
"mcpServers": {
"dreamy-ui": {
"command": "npx",
"args": ["-y", "@dreamy-ui/mcp"]
}
}
}
```
> You might need to click the "Refresh" button to see the MCP server in the
> list.
### Zed
1. <>Go to Settings > Open Settings
2. <>In the `settings.json` file, add MCP server as a new **context server**
```json
{
"context_servers": {
"dreamy-ui": {
"source": "custom",
"command": "npx",
"args": ["-y", "@dreamy-ui/mcp"]
}
}
}
```
### Custom MCP Client
To run the MCP server in a local or development environment using a custom MCP
client, you need to add the MCP server to the client's configuration file.
```json
{
"mcpServers": {
"dreamy-ui": {
"command": "npx",
"args": ["-y", "@dreamy-ui/mcp"]
}
}
}
```
---
title: CLI Reference
---
# Dreamy UI CLI
The Dreamy UI CLI helps you initialize and manage your Dreamy UI project with ease.
## Installation
The CLI is included when you install the `@dreamy-ui/cli` package:
```bash
pnpm add -D @dreamy-ui/cli
```
## Commands
### init
Initialize Dreamy UI in your project with automatic setup.
```bash
pnpm dreamy init
```
**What it does:**
1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install all required dependencies (Panda CSS + Dreamy UI)
3. Create and configure `panda.config.ts`
4. Update `vite.config.ts` or `postcss.config.mjs` with Panda CSS PostCSS plugin
5. Remove default Tailwind CSS (React Router v7 and Next.js only)
6. Set up CSS files with proper imports
7. Create a `DreamyProvider` component
8. Update your `tsconfig.json` with `@/*` path alias and styled-system (if using TypeScript)
9. Next.js also gets `styled-system/*` path alias for proper type resolution
10. Run Panda CSS codegen to generate the styled-system
11. Add recommended components (button, flex, text, heading) to get you started
12. Prints out code to add to the root of your application
**Options:**
- `--yes, -y` - Skip all prompts and use defaults
- `--skip-install` - Skip dependency installation (useful if you want to install manually)
- `--skip-components` - Skip adding recommended components (button, flex, text, heading)
**Examples:**
```bash
# Interactive setup with prompts
dreamy init
# Skip all prompts
dreamy init --yes
# Skip dependency installation
dreamy init --skip-install
# Skip adding default components
dreamy init --skip-components
```
---
### add
Add Dreamy UI components to your project.
```bash
dreamy add [components...]
```
**Examples:**
```bash
# Add a single component
dreamy add button
# Add multiple components
dreamy add button input card
# Add all components
dreamy add --all
# Add components interactively
dreamy add
```
**Options:**
- `--all` - Add all available components
- `--force, -f` - Overwrite existing files
- `--dry-run, -d` - Preview changes without writing files
- `--outdir ` - Specify output directory for components
- `--tsx` - Force TypeScript output
**What it does:**
1. Downloads component files from the registry
2. Installs component dependencies (other components)
3. Adds required recipes and patterns
4. Runs Panda CSS codegen
---
### list
List all available components in the Dreamy UI registry.
```bash
dreamy list
```
Shows a table of all available components with their names and descriptions.
---
### diff
Compare your local components with the registry versions.
```bash
dreamy diff [component]
```
**Examples:**
```bash
# Check differences for a specific component
dreamy diff button
# Check all components
dreamy diff
```
**What it shows:**
- Files that are up-to-date ✓
- Files that differ from registry ✗
- Files that don't exist locally →
- A detailed diff of changes
---
## Troubleshooting
### CLI not found
If you get a "command not found" error, try installing the command again:
```bash
pnpm install -D @dreamy-ui/cli
```
### Framework not detected
If the CLI can't detect your framework:
1. Make sure you have a config file (`next.config.js`, `react-router.config.ts`, or `vite.config.ts`)
2. The file should be in the root of your project
3. Try running from your project root directory
### TypeScript errors after init
After running `init`, you might need to:
1. Restart your TypeScript server (VS Code: Cmd/Ctrl + Shift + P → "Restart TS Server")
2. Run `npx panda codegen` to generate types
3. Check that `styled-system/**/*` is in your `tsconfig.json` include array
### Dependency installation fails
If dependency installation fails during `init`, run without installing dependencies:
```md
dreamy init --skip-install
# Then manually install dependencies
pnpm add -D @pandacss/dev @pandacss/postcss @dreamy-ui/cli
pnpm add @dreamy-ui/react @dreamy-ui/panda-preset motion
```
---
## Environment Variables
The CLI respects these environment variables:
- `HTTPS_PROXY` - Use a proxy for fetching components from the registry
- `REGISTRY_URL` - Override the default registry URL (for development)
---
## Getting Help
For more help with any command:
```md
dreamy --help
dreamy [command] --help
```
Visit our [documentation](https://dreamy-ui.com/docs) for more information.
---
title: Using Next.js
---
# Using Dreamy UI with Next.js
## Quick Start (Recommended)
Use the automated CLI to set up Dreamy UI in your project:
```bash
npx @dreamy-ui/cli init
```
---
The CLI will automatically:
1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install all required dependencies (Panda CSS + Dreamy UI)
3. Create and configure `panda.config.ts`
4. Update `vite.config.ts` or `postcss.config.mjs` with Panda CSS PostCSS plugin
5. Remove default Tailwind CSS (React Router v7 and Next.js only)
6. Set up CSS files with proper imports
7. Create a `DreamyProvider` component
8. Update your `tsconfig.json` with `@/*` path alias and styled-system (if using TypeScript)
9. Next.js also gets `styled-system/*` path alias for proper type resolution
10. Run Panda CSS codegen to generate the styled-system
11. Add recommended components (button, flex, text, heading) to get you started
12. Prints out code to add to the root of your application
## Manual Installation
### 1. Follow the Panda CSS installation guide
Follow the [Panda CSS installation guide](https://panda-css.com/docs/installation/nextjs) to set up Panda CSS in your Next.js project.
### 2. Install Dreamy UI
Install Dreamy UI in your project:
```bash
pnpm add @dreamy-ui/react @dreamy-ui/panda-preset motion
```
### 2. Configure panda.config.ts
Configure environment and panda presets in your `panda.config.ts` file:
```ts {1, 10-16}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...,
preflight: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
include: [
"./src/**/*.{js,jsx,ts,tsx}",
],
presets: [
createDreamyPreset()
],
plugins: [dreamyPlugin],
theme: {
extend: {}
},
globalCss: {
extend: {}
},
staticCss: {
extend: {}
}
});
```
### 3. Add styled-system to tsconfig.json
Add the following configuration to your `tsconfig.json` file:
```json {6, 13-14}
{
"compilerOptions": {
...
"paths": {
"@/*": ["./components/ui/*"],
"styled-system/*": ["./styled-system/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"styled-system/**/*",
".next/types/**/*.ts"
],
"exclude": ["node_modules"]
}
```
**Note:** Next.js requires both the `styled-system/*` path alias AND the include entry for proper type resolution. The CLI automatically configures both for you.
{/* Add the following alias to your `next.config.ts` file:
```ts {2,5-12}
import type { NextConfig } from "next";
import { resolve } from "node:path";
export default {
webpack: (config) => {
config.resolve.alias = {
...config.resolve.alias,
"styled-system": resolve(__dirname, "./styled-system"),
};
return config;
}
} satisfies NextConfig;
``` */}
### 4. Add Dreamy Provider
After configuring Panda CSS, finally we can add the main Dreamy Provider to your `app/layout.tsx`.
First create a `dreamy-provider.tsx` file in `components/dreamy-provider.tsx` (or `src/components/dreamy-provider.tsx` if using src directory):
```tsx
"use client";
import { DreamyProvider as BaseDreamyProvider } from "@dreamy-ui/react";
import type { ColorMode } from "@dreamy-ui/react";
const domMax = () => import("motion/react").then((mod) => mod.domMax);
interface DreamyProviderProps {
children: React.ReactNode;
colorMode?: ColorMode;
}
export function DreamyProvider({ children, colorMode }: DreamyProviderProps) {
return (
{children}
);
}
```
Next, add the `DreamyProvider` component to your `app/layout.tsx` file.
This way we pass the color mode from server-side cookies so the initial document request will have the correct user color mode without flashing:
```tsx {2-3, 12, 15-19}
...
import { DreamyProvider } from "@/components/dreamy-provider";
import { getSSRColorMode } from "@dreamy-ui/react/rsc";
import { cookies } from "next/headers";
...
export default async function RootLayout({
children
}: Readonly<{
children: React.ReactNode;
}>) {
const colorMode = getSSRColorMode((await cookies()).toString());
return (
{children}
);
}
```
### 5. Start using Dreamy UI
Let's write some Dreamy UI in `app/page.tsx`.
```tsx {1, 4}
import { Button } from "@dreamy-ui/react";
export default function Home() {
return ;
}
```
---
title: Using React Router
---
# Using Dreamy UI with React Router
## Quick Start (Recommended)
Use the automated CLI to set up Dreamy UI in your project:
```bash
npx @dreamy-ui/cli init
```
---
The CLI will automatically:
1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install all required dependencies (Panda CSS + Dreamy UI)
3. Create and configure `panda.config.ts`
4. Update `vite.config.ts` or `postcss.config.mjs` with Panda CSS PostCSS plugin
5. Remove default Tailwind CSS (React Router v7 and Next.js only)
6. Set up CSS files with proper imports
7. Create a `DreamyProvider` component
8. Update your `tsconfig.json` with `@/*` path alias and styled-system (if using TypeScript)
9. Next.js also gets `styled-system/*` path alias for proper type resolution
10. Run Panda CSS codegen to generate the styled-system
11. Add recommended components (button, flex, text, heading) to get you started
12. Prints out code to add to the root of your application
## Manual Installation
### 1. Follow the Panda CSS installation guide
Follow the [Panda CSS installation guide](https://panda-css.com/docs/installation/react-router) to set up Panda CSS in your React Router project.
### 2. Install Dreamy UI
Install Dreamy UI in your project:
```bash
pnpm install @dreamy-ui/react @dreamy-ui/panda-preset motion
```
### 2. Configure panda.config.ts
Configure environment and panda presets in your `panda.config.ts` file:
```ts {1, 10-16}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...,
preflight: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
include: [
"./src/**/*.{js,jsx,ts,tsx}",
],
presets: [
createDreamyPreset()
],
plugins: [dreamyPlugin],
theme: {
extend: {}
},
globalCss: {
extend: {}
},
staticCss: {
extend: {}
}
});
```
### 3. Add styled-system alias to tsconfig.json
Add the following alias to your `tsconfig.json` file:
```json {9}
{
"include": [
"**/*.ts",
"**/*.tsx",
"**/.server/**/*.ts",
"**/.server/**/*.tsx",
"**/.client/**/*.ts",
"**/.client/**/*.tsx",
"styled-system/*"
],
...
}
```
{/* Add the following alias to your `vite.config.ts` file:
```ts {1, 4-8}
import { resolve } from "node:path";
export default defineConfig({
resolve: {
alias: {
"styled-system": resolve(__dirname, "./styled-system")
}
},
...
})
``` */}
### 4. Add Dreamy Provider
After configuring Panda CSS, finally we can add the main Dreamy Provider to your `app/root.tsx`.
(Optional, only for Framework mode) To fix color mode flashing on document request, we need to get color mode from the loader, to render the correct color mode.
```tsx {2-4, 5, 9-13, 15, 18, 23, 32-39}
...
import { DreamyProvider } from "@dreamy-ui/react";
import { getColorModeHTMLProps, getSSRColorMode } from "@dreamy-ui/react/rsc";
import type { Route } from "./+types/root";
import { useRouteLoaderData } from "react-router";
// Loaders only work for Framework mode,
// you can skip this, if you are using React Router as library mode.
export function loader({ request }: Route.LoaderArgs) {
return {
colorMode: getSSRColorMode(request)
};
}
const domMax = () => import("motion/react").then((mod) => mod.domMax);
export function Layout({ children }: { children: React.ReactNode }) {
const { colorMode } = useRouteLoaderData("root") ?? {};
return (
{children}
);
}
...
```
### 5. Start using Dreamy UI
Let's write some Dreamy UI in `app/routes/_index.tsx`.
```tsx {1, 4}
import { Button } from "@dreamy-ui/react";
export default function Index() {
return ;
}
```
---
title: Using Remix
---
# Using Dreamy UI with Remix
## Quick Start (Recommended)
Use the automated CLI to set up Dreamy UI in your project:
```bash
npx @dreamy-ui/cli init
```
---
The CLI will automatically:
1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install all required dependencies (Panda CSS + Dreamy UI)
3. Create and configure `panda.config.ts`
4. Update `vite.config.ts` or `postcss.config.mjs` with Panda CSS PostCSS plugin
5. Remove default Tailwind CSS (React Router v7 and Next.js only)
6. Set up CSS files with proper imports
7. Create a `DreamyProvider` component
8. Update your `tsconfig.json` with `@/*` path alias and styled-system (if using TypeScript)
9. Next.js also gets `styled-system/*` path alias for proper type resolution
10. Run Panda CSS codegen to generate the styled-system
11. Add recommended components (button, flex, text, heading) to get you started
12. Prints out code to add to the root of your application
## Manual Installation
### 1. Follow the Panda CSS installation guide
Follow the [Panda CSS installation guide](https://panda-css.com/docs/installation/remix) to set up Panda CSS in your Remix project.
### 2. Install Dreamy UI
Install Dreamy UI in your project:
```bash
pnpm install @dreamy-ui/react @dreamy-ui/panda-preset motion
```
### 2. Configure panda.config.ts
Configure environment and panda presets in your `panda.config.ts` file:
```ts {1, 10-16}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...,
preflight: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
include: [
"./src/**/*.{js,jsx,ts,tsx}",
],
presets: [
createDreamyPreset()
],
plugins: [dreamyPlugin],
theme: {
extend: {}
},
globalCss: {
extend: {}
},
staticCss: {
extend: {}
}
});
```
### 3. Add styled-system alias to tsconfig.json and vite.config.ts
Add the following alias to your `tsconfig.json` file:
```json {4}
{
"include": [
...
"styled-system/*"
],
...
}
```
{/* Add the following alias to your `vite.config.ts` file:
```ts {1, 4-8}
import { resolve } from "node:path";
export default defineConfig({
resolve: {
alias: {
"styled-system": resolve(__dirname, "./styled-system")
}
},
...
})
``` */}
### 4. Add Dreamy Provider
After configuring Panda CSS, finally we can add the main Dreamy Provider to your `app/root.tsx`.
To fix color mode flashing on document request, we need to get color mode from the loader, to render the correct color mode.
```tsx {2-4, 6-10, 12, 15, 20, 29-36}
...
import { DreamyProvider } from "@dreamy-ui/react";
import { getColorModeHTMLProps, getSSRColorMode } from "@dreamy-ui/react/rsc";
import type { LoaderFunctionArgs } from "@remix-run/node";
export function loader({ request }: LoaderFunctionArgs) {
return {
colorMode: getSSRColorMode(request)
};
}
const domMax = () => import("motion/react").then((mod) => mod.domMax);
export function Layout({ children }: { children: React.ReactNode }) {
const { colorMode } = useRouteLoaderData("root") ?? {};
return (
{children}
);
}
...
```
### 5. Start using Dreamy UI
Let's write some Dreamy UI in `app/routes/_index.tsx`.
```tsx {1, 4}
import { Button } from "@dreamy-ui/react";
export default function Index() {
return ;
}
```
---
title: Using Vite
---
# Using Dreamy UI with Vite
## Quick Start (Recommended)
Use the automated CLI to set up Dreamy UI in your project:
```bash
npx @dreamy-ui/cli init
```
---
The CLI will automatically:
1. Detect your framework (React Router v7, Next.js, or Vite)
2. Install all required dependencies (Panda CSS + Dreamy UI)
3. Create and configure `panda.config.ts`
4. Update `vite.config.ts` or `postcss.config.mjs` with Panda CSS PostCSS plugin
5. Remove default Tailwind CSS (React Router v7 and Next.js only)
6. Set up CSS files with proper imports
7. Create a `DreamyProvider` component
8. Update your `tsconfig.json` with `@/*` path alias and styled-system (if using TypeScript)
9. Next.js also gets `styled-system/*` path alias for proper type resolution
10. Run Panda CSS codegen to generate the styled-system
11. Add recommended components (button, flex, text, heading) to get you started
12. Prints out code to add to the root of your application
## Manual Installation
### 1. Follow the Panda CSS installation guide
Follow the [Panda CSS installation guide](https://panda-css.com/docs/installation/vite) to set up Panda CSS in your Vite project.
### 2. Install Dreamy UI
Install Dreamy UI in your project:
```bash
pnpm install @dreamy-ui/react @dreamy-ui/panda-preset motion
```
### 2. Configure panda.config.ts
Configure environment and panda presets in your `panda.config.ts` file:
```ts {1, 10-16}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...,
preflight: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
include: [
"./src/**/*.{js,jsx,ts,tsx}",
],
presets: [
createDreamyPreset()
],
plugins: [dreamyPlugin],
theme: {
extend: {}
},
globalCss: {
extend: {}
},
staticCss: {
extend: {}
}
});
```
### 3. Add styled-system alias to tsconfig.json and vite.config.ts
Add the following alias to your `tsconfig.json` file:
```json {4}
{
"include": [
...
"styled-system/*"
],
...
}
```
{/* Add the following alias to your `vite.config.ts` file:
```ts {1, 4-8}
import { resolve } from "node:path";
export default defineConfig({
resolve: {
alias: {
"styled-system": resolve(__dirname, "./styled-system")
}
},
...
})
``` */}
### 4. Add Dreamy Provider
After configuring Panda CSS, finally we can add the main Dreamy Provider to your app root:
```tsx {2-3, 6-10, 12}
...
import { DreamyProvider } from "@dreamy-ui/react";
import { domMax } from "motion/react";
ReactDOM.createRoot(document.getElementById("root")).render(
);
```
### 5. Start using Dreamy UI
Now you can start using Dreamy UI in your `src/App.tsx`.
```tsx
import { Button } from "@dreamy-ui/react";
function App() {
return ;
}
export default App;
```
---
title: Customization
---
# Customization
Dreamy UI depends on [pandaCSS](https://panda-css.com) as build-time css-in-js styling engine.
That means every customization related to styling should be done in panda config.
## Theming
Dream Preset contains only most basic styling options like background color, fonts, etc. If you want to customize more, you can extend the theme in panda config.
Most basic panda config would look like this. You can extend any theme property you want in `theme.extend` object.
```ts
export default defineConfig({
preflight: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
include: [
"./app/**/*.{js,jsx,ts,tsx}",
],
importMap: "@dreamy-ui/system",
presets: [
pandaPreset,
createDreamPreset()
],
theme: {
extend: {
/**
* Extend theme properties here
*/
}
}
})
```
> info: Tip: If body font is provided and heading font is not, Dream will automatically use body font for headings.
## Customizing Components
Every component in Dreamy UI has it's own recipe/slot recipe. Dreamy UI adds components to your project via CLI. That means you can go into recipes or patterns folder and manually edit the theme to your liking.
Do not forget to generate panda styled-system after changing the recipe or pattern.
```bash
pnpm panda codegen
```
---
title: Panda Preset
---
# Panda Preset
Dreamy UI comes with a preset for pandaCSS, which provides tokens, patterns, recipes and utilities that are required for components to be styled. Color values should be only hex, rgb or hsl values.
`createDreamyPreset` function accepts the object argument with following types:
```ts
interface LightDarkColor {
light: string;
dark: string;
}
interface PresetOptions {
/**
* The background color for your app.
*/
backgrounds: LightDarkColor;
/**
* Fonts for body, heading and mono. If heading font is not provided, it will use body font for headings.
*/
fonts: {
body: string;
heading: string;
mono: string;
};
/**
* Primary color for your app.
* @default "{ light: '#000000', dark: '#ffffff' }"
*/
primaryColor: string | LightDarkColor;
/**
* Secondary color for your app.
* @default "{ light: '#000000', dark: '#ffffff' }"
*/
secondaryColor: string | LightDarkColor;
/**
* Border radius for your app.
* @default "md"
*/
rounded: BorderRadius;
/**
* Color for the primary button. It depends on the `primaryColor` option.
* @default Dream will automatically resolve contrast to match the `primaryColor` option.
*/
buttonPrimaryTextColor: string | LightDarkColor;
/**
* Color for the secondary button. It depends on the `secondaryColor` option.
* @default Dream will automatically resolve contrast to match the `secondaryColor` option.
*/
buttonSecondaryTextColor: string | LightDarkColor;
}
```
Here's a preset configuration in `panda.config.ts` of Dreamy UI Docs:
```ts {2, 7-22}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...
presets: [
createDreamyPreset({
backgrounds: {
light: "#FFF"
dark: "#080808",
},
fonts: {
body: "Geist",
heading: "Manrope"
},
primaryColor: "#6056aa",
secondaryColor: "#d193bb",
rounded: "md"
})
],
plugins: [dreamyPlugin()]
});
```
In other words, that's how default preset args look like:
```ts {2, 7-29}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
...
presets: [
createDreamyPreset({
backgrounds: {
light: "#fff",
dark: "#0D0D0E"
},
fonts: {
body: "sans-serif",
heading: "sans-serif",
mono: "monospace"
},
primaryColor: {
light: "#000000",
dark: "#ffffff"
},
secondaryColor: {
light: "#000000",
dark: "#ffffff"
},
rounded: "md"
})
],
plugins: [dreamyPlugin()]
});
```
---
title: Tokens
---
# Tokens
Dreamy UI comes with a preset for Panda CSS, which provides tokens, patterns, recipes and utilities that are required for components to be styled.
Tokens are meant to be type safe way of using CSS, meaning your app stays consistent and they are easy to change.
### Typography
Use `size` or `textStyle` for typography instead of only `fontSize`. These properties will apply the correct font size, line height and font weight, including responsive sizes.
Small textMedium textLarge text
```tsx
Small textMedium textLarge text
```
Main colors for foreground are `fg`, `fg.max`, `fg.medium` and `fg.disabled`. Use these tokens for typography.
Max textMain textSecondary textDisabled text
```tsx
Max textMain textSecondary textDisabled text
```
### Background colors
Background colors are `bg`, which will be the current background color. `bg.light` and `bg.dark` are the light and dark background colors.
Current BackgroundLight backgroundDark background
```tsx
Current BackgroundLight backgroundDark background
```
### Action colors
Main action colors are `primary` and `secondary`, which you define in the dreamy preset in `panda.config.ts`. Use these colors for buttons, links, etc.
<>Primary
<>Secondary
```tsx
PrimarySecondary
```
Dreamy exports a `success`, `warning`, `error` and `info` semantic tokens to easily signalize the status of an action.
<>Success
<>Warning
<>Error
<>Info
```tsx
SuccessWarningErrorInfo
```
### Alphas
Alphas are easy way to create a slightly transparent color. These colors will be black alphas for light color mode and white alphas for dark.
*": {
p: 2
}
}}
>
Alpha 50Alpha 100Alpha 200Alpha 300Alpha 400Alpha 500Alpha 600Alpha 700Alpha 800Alpha 900Alpha 950
```tsx
Alpha 50Alpha 100Alpha 200Alpha 300Alpha 400Alpha 500Alpha 600Alpha 700Alpha 800Alpha 900Alpha 950
```
### Borders
Borders are `border`, `border.muted` and `border.hover`. Use these tokens for borders.
Default borderMuted borderHover border
```tsx
Default borderMuted borderHover border
```
### Radii
Use `l1` for small rounded, `l2` for medium rounded and `l3` for large rounded. Those are values that are generated from radius property in `createDreamyPreset`.
Semantic tokens
<>Extra Small rounded
<>Small rounded
<>Medium rounded
<>Large rounded
<>Padding 2
<>Padding 3
<>Padding 4
<>Padding 5
<>Padding 6
Design tokens
<>None rounded
<>XS rounded
<>SM rounded
<>MD rounded
<>LG rounded
<>XL rounded
<>2XL rounded
<>3XL rounded
<>Full rounded
```tsx
Semantic tokens
Extra Small rounded
Small rounded
Medium rounded
Large rounded
Padding 2
Padding 3
Padding 4
Padding 5
Padding 6
Design tokens
None rounded
XS rounded
SM rounded
MD rounded
LG rounded
XL rounded
2XL rounded
3XL rounded
Full rounded
```
### Other tokens
Using other blur, shadows, durations, etc.
When building your app, use tokens for consistency.
```tsx
Blurred boxShadowed boxFast transition
```
For more information visit [Panda CSS docs](https://panda-css.com/docs/customization/theme), since Dreamy UI extends Panda CSS default preset.
---
title: Gotchas
---
# Gotchas
In this document we'll list some gotchas about how to use Dreamy UI.
## Properly using tokens
See [Tokens docs](/docs/theming/tokens) page to learn about how to use type-safe tokens in your app.
## Lazy loading
Dreamy UI can be used with a lazily loaded motion/react. If your bundler supports lazy loading, you can do it like this:
#### 1. Create a `features.ts` file in your project root. Re-export there needed functions.
```ts
import { domMax } from "motion/react";
export default domMax;
```
#### 2. Lazily import the features in your app root.
```tsx {1, 14-18, 20}
const motionFeatures = () => import("./features").then((mod) => mod.default);
export function Layout({ children }: { children: React.ReactNode }) {
return (
...
{children}
);
}
```
## Fastest way to center a div
Dreamy UI provides various utilities to use, like `center`, which is a `alignItems="center"` and `justifyContent="center"`.
Centered
```tsx {1}
Centered
```
## Making Forms
The best practice is to use `` component to wrap your form elements with nice label, help text and error message. See [Field docs](/docs/components/field) page to learn more.
Name
<>Enter your preferred name
<>Name cannot be empty
```tsx
NameEnter your preferred nameName cannot be empty
```
Alternatively use props in Field for label, help text and error.
```tsx
```
## Boolean style props
Dreamy UI adds panda `utilities` for faster writing styles. Most used CSS properties are available as boolean props.
```tsx
// full -> width="full"
// nowrap -> wrap="nowrap"
// relative -> pos="relative"
// semibold -> fontWeight="semibold"
Boolean Box
```
## Polymorphic props
Of any of the Dreamy UI components, you can pass `as` prop to change the element type.
Use `asChild` prop to merge the component with the child component.
Use `asComp` to pass a custom component to the component. Same as `asChild`, but allows merging without the children component.
<>I render as section. Inspect to see the element type.
```tsx
I render as section. Inspect to see the element type.
}>
Google
```
## Customization
If you dislike any of the token, component recipe or default values of the patterns like `Flex`, you can customize it with:
- Components: Modify recipe and pattern files directly in the `recipes` and `patterns` folders.
- Tokens: Modify the panda tokens in the `panda.config.ts` file. See [Panda Docs](https://panda-css.com/docs/customization/theme) for more information.
Please note that Dreamy UI uses user's `styled-system` as design system, so any changes you make to the `panda.config.ts`, will be applied to all Dreamy UI components.
This means components are always in sync with variants, patterns and token types.
See [Customization](/docs/theming/customization) for more information. If you struggle, please do not hesitate to ask for help on Discord.
---
title: Accordion
description: Accordion is set of components that allow you to create toggleable content.
isServerComponent: false
source: /packages/react/src/components/accordion/accordion.tsx
themeSource: /packages/system/src/recipes/accordion.ts
---
## Installation
```bash
pnpm dreamy add accordion
```
## Usage
Accordion is a component that allows you to toggle the visibility of content.
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```tsx
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```
### Allow Multiple Open
You can allow multiple open items by using the `allowMultiple` prop.
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```tsx
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```
### Allow Toggle
You can allow toggle single item by using the `allowToggle` prop. With `allowMultiple` prop, it will be always possible to toggle them.
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```tsx
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```
### Controlled
You can control the Accordion by using the `onValueChange` prop.
```tsx
export function ControlledAccordion() {
const [value, setValue] = useState(0);
return (
setValue(i)}
>
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
);
}
```
### With icon
{Array.from({ length: 3 }).map((_, index) => (
} color="fg.medium" />
Item {index + 1}Hi!
))}
```tsx
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```
### Variants
You can change the variant of the Accordion by using the `variant` prop.
Outline
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Solid
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Subtle
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```tsx
Outline
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Solid
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Subtle
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```
### Sizes
You can change the size of the Accordion by using the `size` prop.
Small
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Medium
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Large
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```tsx
Small
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Medium
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
Large
{Array.from({ length: 3 }).map((_, index) => (
Item {index + 1}Hi!
))}
```
---
title: Action Bar
description: Action Bar is used to display a bottom action bar with a set of actions for selected items.
isServerComponent: false
source: /packages/react/src/components/action-bar/use-action-bar.ts
themeSource: /website/compositions/recipes/action-bar.ts
---
## Installation
```bash
pnpm dreamy add action-bar
```
## Usage
Action Bar is a component that displays a set of actions at the bottom of the screen, typically used for bulk operations on selected items.
```tsx
function ControlledActionBar() {
const { isOpen, onToggle, onClose } = useControllable();
return (
<>
Show Action Bar
2 items selected
}>
Delete
}>
Share
);
}
```
### With Close Trigger
Add a close button to allow users to dismiss the action bar manually.
```tsx
function ActionBarWithClose() {
const { isOpen, onToggle, onClose } = useControllable();
return (
<>
Show Action Bar
5 items selected
} size="sm" variant="outline">
Add to collection
} size="sm">
Delete items
);
}
```
### Multiple Actions
You can include multiple action buttons to provide various operations.
```tsx
function ActionBarMultiple() {
const { isOpen, onToggle, onClose } = useControllable();
return (
<>
Show Action Bar
12 files selected
} size="sm" variant="outline">
Download
} size="sm" variant="outline">
Share
} size="sm" variant="outline">
Move to folder
} size="sm">
Delete
);
}
```
### Sizes
You can change the size of the action bar using the `size` prop.
SmallMediumLarge
```tsx
function ActionBarSizes({ size = "md" }: { size?: ActionBarVariantProps["size"] }) {
const { isOpen, onToggle, onClose } = useControllable();
return (
<>
Show {size} Action Bar
2 selected
);
}
```
### With Table Integration
A common use case is integrating the action bar with table selections.
```tsx
interface User {
id: number;
name: string;
age: number;
gender: string;
isSelected: boolean;
}
function ActionBarTable() {
const [users, setUsers] = useState([
{ id: 1, name: "John Doe", age: 20, gender: "Male", isSelected: false },
{ id: 2, name: "Jane Doe", age: 22, gender: "Female", isSelected: false },
{ id: 3, name: "Jim Doe", age: 25, gender: "Male", isSelected: false }
]);
const { isOpen, onClose } = useControllable({
isOpen: users.some((user) => user.isSelected),
onClose: () => setUsers((prev) => prev.map((user) => ({ ...user, isSelected: false })))
});
const toggleSelection = useCallback((id: number) => {
setUsers((prev) =>
prev.map((user) => (user.id === id ? { ...user, isSelected: !user.isSelected } : user))
);
}, []);
const unselectAll = useCallback(() => {
setUsers((prev) => prev.map((user) => ({ ...user, isSelected: false })));
}, []);
const toggleSelectionAll = useCallback(() => {
setUsers((prev) =>
prev.map((user) => ({ ...user, isSelected: !prev.every((user) => user.isSelected) }))
);
}, []);
return (
<>
user.isSelected)}
isIndeterminate={
users.some((user) => user.isSelected) &&
!users.every((user) => user.isSelected)
}
onChangeValue={toggleSelectionAll}
/>
NameAgeGender
{users.map((user, index) => (
td:first-of-type": {
borderStartStartRadius: "l2"
},
"& > td:last-of-type": {
borderStartEndRadius: "l2"
}
}}
_hover={{
bg: "alpha.50"
}}
_last={{
"& > td:first-of-type": {
borderEndStartRadius: "l2"
},
"& > td:last-of-type": {
borderEndEndRadius: "l2"
}
}}
bg={user.isSelected ? "alpha.50" : "transparent"}
cursor={"pointer"}
key={index}
onClick={() => toggleSelection(user.id)}
>
toggleSelection(user.id)}
/>
{user.name}{user.age}{user.gender}
))}
{users.filter((user) => user.isSelected).length} selected
);
}
```
### Uncontrolled Usage
You can use the action bar in an uncontrolled mode with `defaultIsOpen`.
```tsx
console.log('closed')}>
1 selected
```
---
title: Alert
description: Alert signalizes the user about important information.
isServerComponent: true
source: /packages/react/src/components/alert/alert.tsx
themeSource: /packages/system/src/recipes/alert.ts
---
## Installation
```bash
pnpm dreamy add alert
```
## Usage
Alert signalizes the user about important information.
```tsx
```
### Status
The `status` prop changes the color of the alert and the icon.
```tsx
```
---
title: Avatar
description: Avatar is a simple `div` tag with styled system.
isServerComponent: false
source: /packages/react/src/components/Avatar/Avatar.tsx
themeSource: /packages/system/src/recipes/avatar.ts
---
## Installation
```bash
pnpm dreamy add avatar
```
## Usage
Avatar is a component that displays a user's profile picture without blocking navigation to load the image.
```tsx
```
### Sizes
You can set the size of the avatar by using the `size` prop.
```tsx
```
### Avatar Group
AvatarGroup is a wrapper around Avatars that displays a number of avatars grouped together in a stack.
Use `maxAvatars` prop to limit the number of avatars displayed.
```tsx
```
### Persona
Using more Dreamy UI components, you can create a nice looking persona component.
<>Alexandra
<>Dream
```tsx
Alexandra
Dream
```
---
title: Badge
description: Badge can be used to highlight important information.
isServerComponent: true
source: /packages/react/src/components/badge/badge.tsx
themeSource: /packages/system/src/recipes/badge.ts
---
## Installation
```bash
pnpm dreamy add badge
```
## Usage
Badge is a component that can be used to highlight important information.
Prime
```tsx
Prime
```
### Variants
You can change the variant of the Badge by using the `variant` prop.
OutlineSubtlePlain
```tsx
OutlineSubtlePlain
```
### (Color) Schemes
You can change the color scheme of the Badge by using the `scheme` prop. Don't mistake this with the css `colorScheme` property.
PrimarySecondarySuccessWarningErrorInfoNone
```tsx
PrimarySecondarySuccessWarningErrorInfoNone
```
### Schemes with variants
You can combine the `variant` and `scheme` props to create a badge with different variants and colors.
<>Primary
<>Secondary
<>Success
<>Warning
<>Error
<>Info
<>None
```tsx
Primary
Secondary
Success
Warning
Error
Info
None
```
---
title: Box
description: Box is a simple `div` tag with styled system.
isServerComponent: true
source: /packages/react/src/components/box/Box.tsx
---
## Installation
```bash
pnpm dreamy add box
```
## Usage
Box is the most fundamental layout component that provides basic styling capabilities. Use it as a building block for creating custom layouts and designs.
<>This is a box
```jsx
This is a box
```
---
title: Breadcrumb
description: Breadcrumb is used to display a page's location within a site's hierarchical structure.
isServerComponent: false
source: /packages/react/src/components/breadcrumb/use-breadcrumb.ts
themeSource: /website/compositions/recipes/breadcrumb.ts
---
## Installation
```bash
pnpm dreamy add breadcrumb
```
## Usage
Breadcrumb is a component that displays the current page location within a navigational hierarchy.
DocsComponentsBreadcrumb
```tsx
DocsComponentsBreadcrumb
```
### Custom Separator
You can customize the separator between breadcrumb items by passing children to `Breadcrumb.Separator`.
HomeCategoryProduct
```tsx
HomeCategoryProduct
```
### With Icons
Add icons to breadcrumb links by including them as children alongside the text.
<>Home
<>Products
Laptop
```tsx
Home
Products
Laptop
```
### With Ellipsis
Use `Breadcrumb.Ellipsis` to indicate collapsed breadcrumb items.
HomeCategorySubcategoryCurrent Page
```tsx
HomeCategorySubcategoryCurrent Page
```
### Sizes
You can change the size of the breadcrumb by using the `size` prop.
SmallHomeCategoryCurrentMediumHomeCategoryCurrentLargeHomeCategoryCurrent
```tsx
SmallHomeCategoryCurrentMediumHomeCategoryCurrentLargeHomeCategoryCurrent
```
### Variants
You can change the variant of the breadcrumb by using the `variant` prop.
PlainHomeCategoryCurrentUnderlineHomeCategoryCurrent
```tsx
PlainHomeCategoryCurrentUnderlineHomeCategoryCurrent
```
### With Router Integration
You can use breadcrumb with routing libraries by using the `asChild` prop or replacing the `href` with appropriate routing props.
```tsx
import { Link } from "react-router";
Home
Products
Laptop
```
---
title: Button
description: Button is a primary action element that performs an action when clicked.
isServerComponent: false
source: /packages/react/src/components/button/button.tsx
themeSource: /packages/system/src/recipes/button.ts
---
## Installation
```bash
pnpm dreamy add button
```
## Usage
Button is used to trigger an action or event, such as submitting a form or opening a dialog. It provides various styling options and supports different variants.
```tsx
```
### Variants
You can change the variant of the Button by using the `variant` prop.
```tsx
```
### Sizes
You can set the size of the Button by using the `size` prop.
```tsx
```
### Color
When using `solid`, `outline` and `ghost` variants, the button color will follow the current color scheme.
For `solid` and `ghost` variants, you can just use `color` property, it will work the same. However for `outline` variant, you need to use only `scheme` property.
```tsx
```
### Using Icons
You can add icons on left or right side of the Button by using the `leftIcon` or `rightIcon` prop.
**Left Icon**
}>Cancel
} variant="primary">Home
```tsx
}>Cancel
} variant="primary">Home
```
**Right Icon**
}>Cancel
} variant="primary">Home
```tsx
}>Cancel
} variant="primary">Home
```
### Disabled
You can disable the Button by using the `isDisabled` prop.
```tsx
```
### Loading State
You can show the loading state of the Button by using the `isLoading` prop.
```tsx
```
**With label**
```tsx
```
**With label and spinner on the right**
```tsx
```
### Disable ripple
You can disable the ripple effect of the Button by using the `disableRipple` prop. This can be provided in `DreamyProvider` as a global setting.
```tsx
```
### Group
Use the `Group` component to group multiple Buttons together.
```tsx
```
---
title: Card
description: Card is a component that displays content in a card format.
isServerComponent: false
source: /packages/react/src/components/card/card.tsx
themeSource: /packages/system/src/recipes/card.ts
---
## Installation
```bash
pnpm dreamy add card
```
## Usage
Card is a component that displays content in a card format, for example a blog post, a product, a user profile or a form.
Card Title
<>This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
```tsx
Card Title
This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
```
### Variants
You can change the variant of the card by using the `variant` prop.
Elevated
<>This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
Outline
<>This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
```tsx
Elevated
This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
Outline
This is the card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
```
### With Divider
Example of a card with a dividers layout.
Dreamy UIdreamy-ui.comCreate dream websites with next-gen DX and crispy UI. Powered by Panda CSS.
<>Visit source code on GitHub } />
```tsx
Dreamy UIdreamy-ui.comCreate dream websites with next-gen DX and crispy UI. Powered by Panda CSS.
Visit source code on GitHub
```
### Sizes
Example of a card with different sizes using the `size` prop.
Small Card
<>This is the small card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
Medium Card
<>This is the medium card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
Large Card
<>This is the large card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
```tsx
Small Card
This is the small card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
Medium Card
This is the medium card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
Large Card
This is the large card body. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum.
Curabitur nec odio vel dui euismod fermentum.
```
### With form
Example of a card with a multiple fields and a buttons.
> info: Tip: `full` is an alias for `width="full"`.
Form Card
<>Fill in the form below to create an account
```tsx
Form Card
Fill in the form below to create an account
```
### As Link
Example of a card as a link, that navigates to a different page.
} maxW="sm">
Dreamy UIdreamy-ui.comCreate dream websites with next-gen DX and crispy UI. Powered by Panda CSS.
<>Star on GitHub } />
```tsx
} maxW="sm">
Dreamy UIdreamy-ui.comCreate dream websites with next-gen DX and crispy UI. Powered by Panda CSS.
Star on GitHub } />
```
---
title: Checkbox Card
description: A selectable card component that behaves like a checkbox
isServerComponent: false
source: /packages/react/src/components/checkbox-card/checkbox-card.tsx
themeSource: /packages/system/src/recipes/checkbox-card.ts
---
## Installation
```bash
pnpm dreamy add checkbox-card
```
## Usage
Checkbox Card is a component that allows you to select a value from a list of options.
```tsx
```
### Variant
Change the variant of the checkbox card.
```tsx
```
### Checkbox variant
Change the checkbox variant of the checkbox card.
```tsx
```
### Scheme
Change the color scheme of the checkbox card.
```tsx
```
### Size
Change the checkbox card size.
```tsx
```
### Controlled
Use `isChecked` and `onChange`, `onChangeValue` to control the checkbox card.
```tsx
export function ControlledCheckboxCard() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
Selected: {isChecked ? "true" : "false"}
);
}
```
### Checkbox Group
Use `CheckboxGroup` to compose multiple checkboxes or checkbox cards.
```tsx
function CheckboxCardGroupControl() {
const [value, setValue] = useState>(["1"]);
return (
<>
Selected: {value.join(", ")}
);
}
```
---
title: Checkbox
description: Checkbox is used to select one or more options from a list.
isServerComponent: false
source: /packages/react/src/components/checkbox/checkbox.tsx
themeSource: /packages/system/src/recipes/checkbox.ts
---
## Installation
```bash
pnpm dreamy add checkbox
```
## Usage
Checkbox allows users to select multiple options from a list. Use it for multi-selection scenarios and boolean preferences.
<>Default
```tsx
Default
```
### Scheme
Change the color scheme of the checkbox.
PrimarySecondarySuccessWarningErrorInfoNone
```tsx
PrimarySecondarySuccessWarningErrorInfoNone
```
### Variant
Change the appearance variant of the checkbox.
OutlineSolid
```tsx
OutlineSolid
```
### Size
Change the checkbox size.
SmallMediumLarge
```tsx
SmallMediumLarge
```
### Controlled
Use `isChecked` and `onChange`, `onChangeValue` to control the checkbox.
```tsx
export function ControlledCheckbox() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
Selected: {isChecked ? "true" : "false"}
Controlled
);
}
```
### Checkbox group
Use `CheckboxGroup` to compose multiple checkboxes. Use `value` and `onChange` in `` to control the selected checkboxes. CheckboxGroup also accepts all the variant props of the Checkbox component.
Every Checkbox in the CheckboxGroup should have a unique `value` prop.
```tsx
function CheckboxGroupControl() {
const [value, setValue] = useState>(["1"]);
return (
<>
Selected: {value.join(", ")}Option 1Option 2Option 3
);
}
```
---
title: Close Button
description: CloseButton can be used to close a container.
isServerComponent: false
source: /website/compositions/ui/close-button.tsx
themeSource: /website/compositions/recipes/close-button.ts
---
## Installation
- `CloseButton` - The true CloseButton component.
```bash
pnpm dreamy add close-button
```
## Usage
`CloseButton` is built on top of the `Button`, so all props of [Button](./button) are available. Can be used to close any container.
`aria-label` prop is required for accessibility.
```tsx
```
---
title: Divider
description: Divider is used to display line separator between elements.
isServerComponent: true
source: /packages/react/src/components/divider/divider.tsx
themeSource: /packages/system/src/recipes/divider.ts
---
## Installation
```bash
pnpm dreamy add divider
```
## Usage
Divider creates a visual separation between sections of content. It can be horizontal or vertical and helps organize your layout.
```tsx
```
### Orientation
You can change the orientation of the Divider by using the `orientation` prop.
HorizontalVertical
```tsx
HorizontalVertical
```
---
title: Editable
description: Editable can be used to create editable fields, where default view should be a text.
isServerComponent: false
source: /packages/react/src/components/editable/editable.tsx
themeSource: /packages/system/src/recipes/editable.ts
---
## Installation
```bash
pnpm dreamy add editable
```
## Usage
Editable is a component that allows you to edit text, in a compact way.
The placeholder will be shown in the preview, when the value is empty.
```tsx
```
### Double Click
Editable can be used to trigger edit mode on double click. Double click the preview to enter edit mode, enter to submit, esc to cancel.
```tsx
```
### Controlled
Use `value` and `onChange` to control the editable value.
```tsx
function ControlledEditable() {
const [value, setValue] = useState("Meow");
return (
);
}
```
### Accessing internal state
{({ isEditing, onSubmit, onCancel, onEdit }) => {
return (
<>
isEditing: {isEditing ? "true" : "false"}
);
}}
```tsx
{({ isEditing, onSubmit, onCancel, onEdit }) => {
return (
<>
isEditing: {isEditing ? "true" : "false"}
);
}}
```
### Start with edit view
Use `startWithEditView` to use edit state by default. Click "Render" to render the editable.
```tsx
```
### Is preview focusable
Use `isPreviewFocusable` to control whenever the preview should be focusable, that means it can be focused via keyboard or click. It is `true` by default.
```tsx
```
### Submit on blur
Use `submitOnBlur` to control when the value should be submitted on blur. Default is `true`. This example won't submit, when blur happens.
```tsx
```
### onCancel, onSubmit, onEdit, onBlur
Use `onCancel`, `onSubmit`, `onEdit`, `onBlur` to handle the editable events. Open the console
toast({ title: "onCancel" })}
onSubmit={() => toast({ title: "onSubmit" })}
onEdit={() => toast({ title: "onEdit" })}
onBlur={() => toast({ title: "onBlur" })}
>
```tsx
toast({ title: "onCancel" })}
onSubmit={() => toast({ title: "onSubmit" })}
onEdit={() => toast({ title: "onEdit" })}
onBlur={() => toast({ title: "onBlur" })}
>
```
### Select all on focus
Whenever text in input should be selected when entering edit mode.
```tsx
```
### Final Focus Ref
Use `finalFocusRef` to set the ref of element to receive focus when edit mode exits.
```tsx
function FinalFocusRefEditable() {
const ref = useRef(null);
return (
<>
);
}
```
---
title: Field
description: Field provides a way to add accessible labels to form elements.
isServerComponent: false
source: /packages/react/src/components/field/field.tsx
themeSource: /packages/system/src/recipes/field.ts
---
## Installation
```bash
pnpm dreamy add field
```
## Usage
Field is a wrapper component that provides a way to create accessible form elements.
<>Username
<>This is the username you will use to login
```tsx
Username
This is the username you will use to login
```
- **Required**
Required indicator is automatically added to the label when the `isRequired` prop is passed.
<>Username
```tsx
Username
```
- **Invalid**
Input will be marked as invalid when the `isInvalid` prop is passed. Also the `Field.Error` component will be shown if it is present.
<>Username
```tsx
Username
```
- **Disabled**
Whole field will be disabled when the `isDisabled` prop is passed.
<>Username
```tsx
Username
```
### Field Error
Field error **will show only** when the `Field` has `isInvalid` prop.
<>Username
<>This username is too short!
```tsx
Username
This username is too short!
```
### Field Hint
Field hint can be used to prompt the user with additional information.
<>Username
<>This is the username you will use to login
```tsx
Username
This is the username you will use to login
```
### Using Field components as props
You can use `label`, `hint`, `error` as props to the `Field` component. This can be helpful when you don't need to apply any additional props or styles to the particular components.
```tsx
```
### Horizontal
If you prefer horizontal layout, you can use `orientation="horizontal"` prop.
<>Username
```tsx
Username
```
---
title: Flex
description: Flex is a `div` tag that is flexbox by default.
isServerComponent: true
source: /packages/react/src/components/flex/flex.tsx
---
## Installation
```bash
pnpm dreamy add flex
```
## Usage
Flex provides flexbox layout capabilities for creating responsive layouts. Use it to align and distribute space between items in a container.
<>1
<>2
<>3
```tsx
1
2
3
```
### Direction
Use the `direction` or `flexDir` prop to change the direction of the flex container.
{Array.from({length: 3}).map((_, i) => (
{i}
))}
```tsx
{Array.from({length: 3}).map((_, i) => (
{i}
))}
```
### Align
Use the `align` or `alignItems` prop to change the alignment of the flex items.
<>1
<>2
<>3
```tsx
{Array.from({length: 3}).map((_, i) => (
{i}
))}
```
### Justify
Use the `justify` or `justifyContent` prop to change the justification of the flex items.
{Array.from({length: 3}).map((_, i) => (
{i}
))}
```tsx
{Array.from({length: 3}).map((_, i) => (
{i}
))}
```
### gap
Use the `gap` prop to change the gap between the flex items.
{Array.from({length: 3}).map((_, i) => (
{i}
))}
```tsx
{Array.from({length: 3}).map((_, i) => (
{i}
))}
```
### Wrap
Use the `wrap` prop to change the wrapping of the flex items.
{Array.from({length: 10}).map((_, i) => (
{i}
))}
> info: Tip: You can use `` component or use `wrapped` utility prop to set `flexWrap` to `wrap`.
```tsx
{Array.from({length: 10}).map((_, i) => (
{i}
))}
```
---
title: Grid
description: Grid is a `div` tag that is Gridbox by default.
isServerComponent: true
source: /packages/react/src/components/grid/grid.tsx
---
## Installation
```bash
pnpm dreamy add grid
```
## Usage
Grid is a wrapper component that provides a way to create responsive layouts.
123123
```tsx
123123
```
### Using columns, colSpan and rowSpan
123
```tsx
123
```
### Min child width
Use the `minChildWidth` prop to set the minimum width of the child and make grid responsive.
123123123
```tsx
123123123
```
---
title: Group
description: Group is helpful for grouping elements, like buttons together.
isServerComponent: true
source: /packages/react/src/components/group/group.tsx
theme: /packages/panda-preset/src/recipes/group.ts
---
## Installation
```bash
pnpm dreamy add group
```
## Usage
Group is a wrapper component that provides a way to group elements together.
```tsx
```
### Attached
The `attached` prop is used to attach the contents of the group to themselfs.
```tsx
```
### Orientation
The `orientation` prop is used to change the orientation of the group.
```tsx
```
### Grow
The `grow` prop is used to make the group grow to fill the container.
> info: Tip: `full` is an alias for `w="full"`.
```tsx
```
---
title: Heading
description: Heading is used to render semantic HTML heading elements.
isServerComponent: true
source: /packages/react/src/components/heading/heading.tsx
themeSource: /packages/system/src/recipes/text.ts
---
## Installation
```bash
pnpm dreamy add heading
```
## Usage
Heading renders semantic HTML heading elements (h1-h6) with consistent styling. Use it to create hierarchical page structure and improve accessibility.
<>This is a simple Heading component.
```tsx
This is a simple Heading component.
```
### Sizes
`size` (or `textStyle`) prop determines the semantic size of the heading. It changes font size, line height, letter spacing and font weight depending on the value.
Extra smallSmallMediumLargeExtra large2 Extra large3 Extra large4 Extra large5 Extra large6 Extra large7 Extra large
```tsx
Extra smallSmallMediumLargeExtra large2 Extra large3 Extra large4 Extra large5 Extra large6 Extra large7 Extra large
```
### Tags
You can use `as` prop to change the HTML tag of the heading. The default tag is `h2` for all sizes.
<>This is a Heading component with h1 tag.
<>This is a Heading component with h2 tag.
<>This is a Heading component with h3 tag.
```tsx
This is a Heading component with h1 tag.
This is a Heading component with h2 tag.
This is a Heading component with h3 tag.
```
---
title: Icon
description: Icon is a styled `svg`, that allows you to style custom icons using Dream props.
isServerComponent: true
source: /packages/react/src/components/icon/icon.tsx
themeSource: /packages/system/recipes/icon.ts
---
## Installation
```bash
pnpm dreamy add icon
```
## Usage with other icon libraries
Since Dream does not provide any icons, you will want to use other icon libraries like `react-icons`, `lucide-react` or `@heroicons/react`.
} />
```tsx
```
### Color
Use `color` prop to set the color of the icon. You may also want to use `fill` or `stroke` prop to set the other icon values.
```tsx
```
### Polymorphism
with `asChild` prop Dream will merge child component with Icon, or with `asComp` prop Dream will merge component with Icon.
} />
```tsx
} />
```
---
title: Image
description: Image is a `img` tag and it provides bunch of styled features.
isServerComponent: false
source: /packages/react/src/components/image/image.tsx
themeSource: /packages/system/recipes/image.ts
---
## Installation
```bash
pnpm dreamy add image
```
## Usage
Image contains bunch of helpful props to make it easier to use. Provide a `fallbackSrc` to show a backup image if the main image fails to load.
Photos by Alex Padurariu
and Piotr Musioł on Unsplash
```tsx
```
### Zoom on hover
Use `zoomOnHover` to zoom in the image on hover.
```tsx
```
### Blur shadow
Use `blurShadow` to add a blurred shadow to the image.
```tsx
```
### Modify zoom and blur options
You can use `zoomOptions` and `blurOptions` to modify the zoom and blur options.
```tsx
```
---
title: Input
description: Input is one of the main form elements.
isServerComponent: false
source: /packages/react/src/components/input/input.tsx
themeSource: /packages/system/src/recipes/input.ts
---
## Installation
```bash
pnpm dreamy add input
```
## Usage
```tsx
```
### Input Size
```tsx
```
### Input Variant
```tsx
```
### Invalid
Pass `isInvalid` prop to the `Input` to show the error state.
```tsx
```
### Input Group
Combine `Input` with `InputGroup` to create a add elements on the left or right side of the input.
Due to specificity of the `Input` component, space for addons won't be added automatically, so you will need to add padding left (`pl`) or right (`pr`) to the `Input` to make space for the addons.
} boxSize="5" color="fg.medium" />
```tsx
} boxSize="5" color="fg.medium" />
```
### Usage with Field
Combine `Input` with `Field` to create a nice looking form element.
UsernameUsername should not contain special characters.
```tsx
UsernameUsername should not contain special characters.
```
---
title: Keyboard Key
description: Keyboard key can be used to let users know which keys some action signifies.
isServerComponent: true
source: /packages/react/src/components/kbd/kbd.tsx
themeSource: /packages/system/src/recipes/kbd.ts
---
## Installation
```bash
pnpm dreamy add kbd
```
## Usage
You can press action key and `i` to toggle the color mode.
^i
```tsx
^i
```
### Sizes
The `Kbd` component comes in three sizes: small, medium (default), and large.
EscEnterSpace
```tsx
EscEnterSpace
```
### Rendering platform specific action key
You can utilize `useActionKey` hook to get the platform specific action key. Returns "⌘" for MacOS and "Ctrl" for other platforms.
```tsx
import { useActionKey } from "@dreamy-ui/react";
export function PlatformSpecificKbd() {
const actionKey = useActionKey();
return {actionKey} + K;
}
```
---
title: Link
description: Link is used to provide a way to navigate to different pages or sections of the same page.
isServerComponent: true
source: /packages/react/src/components/link/link.tsx
themeSource: /packages/system/src/recipes/link.ts
---
## Installation
```bash
pnpm dreamy add link
```
## Usage
Link provides navigation between pages or sections with proper accessibility support. It can be used for both internal and external links.
<>Home
```tsx
Home
```
### External Link
You can use the `isExternal` prop to open the link in a new tab.
<>Google
```tsx
Google
```
### Using Dream Link with other frameworks
In this example we'll combine React Router Link component with Dream Link component.
```tsx
import { Link as DreamyLink, type LinkProps as DreamyLinkProps } from "@dreamy-ui/react";
import { Link as ReactRouterLink, type LinkProps as ReactRouterLinkProps } from "react-router";
import { forwardRef } from "react";
export interface LinkProps extends DreamyLinkProps, Omit {}
export const Link = forwardRef((props, ref) => {
return ;
});
```
---
title: List
description: List can be used to create a list of data.
isServerComponent: true
source: /packages/react/src/components/list/list.tsx
themeSource: /packages/system/src/recipes/list.ts
---
## Installation
```bash
pnpm dreamy add list
```
## Usage
List displays a collection of items in an organized format. Use it to present related content in an ordered or unordered structure.
i5-10400fRTX 4060ti32GB RAM
```tsx
i5-10400fRTX 4060ti32GB RAM
```
### Ordered List
Simply pass the `ordered` prop to the `List` component to create an ordered list. It will render `ol` tag, instead of `ul`.
i5-10400fRTX 4060ti32GB RAM
```tsx
i5-10400fRTX 4060ti32GB RAM
```
---
title: Menu
description: Menu allows to create a dropdown list of options.
isServerComponent: false
source: /packages/react/src/components/menu/menu.tsx
themeSource: /packages/system/src/recipes/menu.ts
---
## Installation
```bash
pnpm dreamy add menu
```
## Usage
Basic usage of Menu.
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
```tsx
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
```
### Placement
You can change where the Menu is placed by using the `placement` prop. Use `icon` prop to place an icon on the beginning or the item and `comamnd` to show keybinding to the item. Using `{actionKey}` in command will automatically replace it with the action key of the user's operating system.
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
```tsx
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
```
### Size
Menu comes with 4 different sizes.
{["xs", "sm", "md", "lg"].map((size) => (
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
))}
```tsx
{["xs", "sm", "md", "lg"].map((size) => (
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
))}
```
### Variant
Use `variant` prop to set the variant of the menu.
```tsx
export function VariantMenus() {
return (
{(
["plain", "stretched"]
).map((variant) => (
))}
);
}
export function VariantMenu({ variant }: { variant: string }) {
return (
}
command="{actionKey} h"
as={}
>
Homepage
}
command="{actionKey} n"
>
Add new
}
command="{actionKey} a"
>
Set alarm
}
command="{actionKey} b"
>
Battery
}
command="{actionKey} d"
>
Delete
);
}
```
### Using links
You can use a custom link component with menu item but polymorphic props like `as`, `asComp` and `asChild`.
}
command="{actionKey} h"
as={}
>
<>Homepage
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
```tsx
}
command="{actionKey} h"
as={}
>
Homepage
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
```
### Controlled
You can control the menu with `isOpen`, `onOpen` and `onClose` props with `useControllable` hook.
```tsx
export function ControlledMenu() {
const { isOpen, onClose, onOpen } = useControllable();
return (
{isOpen ? "Open" : "Closed"}}
command="{actionKey} h"
as={}
>
Homepage
} command="{actionKey} n">Add new
} command="{actionKey} a">Set alarm
} command="{actionKey} b">Battery
} command="{actionKey} d">Delete
);
}
```
### Adding logic to the commands
`command` props does not provide any logic. You can use `useEventListener` hook to add logic to the commands.
```tsx
export function InteractiveMenu() {
const navigate = useNavigate();
useEventListener("keydown", (event) => {
if (!event[getActionKeyCode()]) return; // Making sure the ctrl/cmd key is pressed
switch (event.key) {
case "h": {
event.preventDefault();
navigate("/");
alert("Homepage");
break;
}
case "n": {
event.preventDefault();
alert("New");
break;
}
case "a": {
event.preventDefault();
alert("Alarm");
break;
}
case "b": {
event.preventDefault();
alert("Battery");
break;
}
case "d": {
event.preventDefault();
alert("Delete");
break;
}
}
});
return (
}
command="{actionKey} h"
as={}
>
Homepage
}
command="{actionKey} n"
>
Add new
}
command="{actionKey} a"
>
Set alarm
}
command="{actionKey} b"
>
Battery
}
command="{actionKey} d"
>
Delete
);
}
```
### Item right content
You can add right content to the item with `rightContent` prop.
} color="warning" boxSize={4} />}>
<>Select File
```tsx
}>
Select File
```
---
title: Modal
description: Modal provides a way to add accessible labels to form elements.
isServerComponent: false
source: /packages/react/src/components/modal/modal.tsx
themeSource: /packages/system/src/recipes/modal.ts
---
## Installation
```bash
pnpm dreamy add modal
```
## Usage
```tsx
export default function BasicModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
Modal HeaderModal Body
);
}
```
### Customizing Modal Size
```tsx
export function SizeModals() {
const sizes = [
"sm",
"md",
"lg",
"xl",
"2xl",
"3xl",
"4xl",
"5xl",
"6xl",
"7xl",
"8xl"
] as const;
const ModalSize = useCallback(({ size }: { size: (typeof sizes)[number] }) => {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
{size} ModalThis is a {size} modal!
);
}, []);
return (
{sizes.map((size) => (
))}
);
}
```
### Customizing Scroll Behavior
- **inside**: The modal body will scroll inside the modal.
```tsx
export default function ScrollBehaviorModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
Modal HeaderModal Body
);
}
```
- **outside**: The modal body will scroll outside the modal. If your content is long and it bugs the modal position, ensure to set the `placement="top"` prop.
```tsx
export function ScrollableOutsideModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
Modal Header
{[...Array(10)].map((_, i) => (
))}
);
}
```
### Placement
Sometimes you might want to place the modal on the top to avoid layout shifts.
```tsx
export function PlacementModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
Modal HeaderModal Body
);
}
```
---
title: Pin Input
description: Pin Input can be used to collect a pin code from authenticator app.
isServerComponent: false
source: /packages/react/src/components/pin-input/pin-input.tsx
themeSource: /packages/system/src/recipes/input.ts
---
## Installation
```bash
pnpm dreamy add pin-input
```
## Usage
`PinInput` is a wrapper component for `PinInputField` that provides a context for the pin input.
```tsx
```
### Controlled
```tsx
export function ControlledPinInput() {
const [pin, setPin] = useState("2137");
return (
);
}
```
### Pin Input Size
### Pin Input Variant
```tsx
```
### Invalid
Pass `isInvalid` prop to the `PinInput` to show the error state.
```tsx
```
### Disabled
Pass `isDisabled` prop to the `PinInput` to show the disabled state.
```tsx
```
### On change
Pass `onChange` prop to the `PinInput` to get the value when the pin input is changed.
toast({ title: `Pin: ${pin}` })}>
```tsx
toast({ title: `Pin: ${pin}` })}>
```
### On Complete
Pass `onComplete` prop to the `PinInput` to get the complete value when the pin input is filled.
toast({ title: `Pin: ${pin}` })}>
```tsx
toast({ title: `Pin: ${pin}` })}>
```
### OTP
Pass `otp` prop to the `PinInput` to make the pin input an One Time Password input.
```tsx
```
### Mask
Pass `mask` prop to the `PinInput` to mask the input.
```tsx
```
### Type
The type of the pin inputs value. `"alphanumeric" | "number"`.
```tsx
```
### Manage Focus
Set `manageFocus` to `false` to disable the moving focus to the next input when the current input is filled.
```tsx
```
### Auto Focus
Use `autoFocus` to focus the first input when the pin input is mounted. Refresh the page to see the effect.
```tsx
```
### Split fields
You can enter custom content between the fields to split them.
```tsx
```
---
title: Popover
description: Popover allows to create dialog that shows next to the trigger element.
isServerComponent: false
source: /packages/react/src/components/popover/popover.tsx
themeSource: /packages/system/src/recipes/popover.ts
---
## Installation
```bash
pnpm dreamy add popover
```
## Usage
When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.
If you want to show arrow, you can use `hasArrow` prop.
Delete Post
<>Are you sure you want to delete this post? This action cannot be undone.
```tsx
export function BasicPopover() {
return (
Delete Post
Are you sure you want to delete this post? This action cannot be undone.
);
}
```
### Controlled Popover
Most of the time, you'll want to control the popover's open state. Use `useControllable` hook to do that.
```tsx
export function ControlledPopover() {
const { isOpen, onOpen, onClose } = useControllable();
const handleDelete = useCallback(() => {
/**
* Handle delete logic...
*/
onClose();
}, [onClose]);
return (
Delete Post
Are you sure you want to delete this post? This action cannot be undone.
);
}
```
### Initial Focus
You can set the initial focus element using `initialFocusRef` prop.
```tsx
export function FocusPopover() {
const { isOpen, onOpen, onClose } = useControllable();
const initialFocusRef = useRef(null);
return (
Delete Post
Are you sure you want to delete this post? This action cannot be undone.
);
}
```
### Placement
You can customize the placement of the popover relative to the trigger element using the `placement` prop.
```tsx
export function PlacementPopovers() {
return (
{(
[
"top",
"bottom",
"left",
"right",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end"
] satisfies PlacementWithLogical[]
).map((placement) => (
))}
);
}
export function PlacementPopover({ placement }: { placement: PlacementWithLogical }) {
return (
Delete Post
Are you sure you want to delete this post? This action cannot be undone.
);
}
```
### Size
Use `size` prop to set the size of the popover.
```tsx
export function SizePopovers() {
return (
{(
["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"]
).map((size) => (
))}
);
}
export function SizePopover({ size }: { size: string }) {
return (
Delete Post
Are you sure you want to delete this post? This action cannot be undone.
);
}
```
### Reduce Motion
You can customize the reduce motion behavior of the popover using the `reduceMotion` prop.
Delete Post
<>Are you sure you want to delete this post? This action cannot be undone.
```tsx
Delete Post
Are you sure you want to delete this post? This action cannot be undone.
```
---
title: Portal
description: Portal can be used to place elements outside of the current DOM hierarchy.
isServerComponent: true
source: /packages/react/src/components/Portal/Portal.tsx
---
## Installation
```bash
pnpm dreamy add portal
```
## Usage
Portal is useful when you need to render a component at the end of document for some reason.
Check the end of `document.body` in the dev tools for the rendered component, in the empty wrapper below.
Hello
```tsx
Hello
```
---
title: Progress Circular
description: Progress Circular is used to display the progress of a task in a circular shape.
isServerComponent: false
source: /packages/react/src/components/progress-circular/progress-circular.tsx
themeSource: /packages/system/src/recipes/progress-circular.ts
---
## Installation
```bash
pnpm dreamy add progress-circular
```
## Usage
Use `value` prop to set the progress value.
```tsx
```
### Sizes
You can set the size of the progress by using the `size` prop.
```tsx
```
### Scheme
You can set the color of the progress by using the `scheme` prop.
```tsx
```
### Indeterminate Progress
You can make the progress indeterminate by using the `isIndeterminate` prop. You can customize `speed` prop to change the speed of the indeterminate animation.
```tsx
```
### Show value label
You can show the value label by using the `showValue` prop. Use `valueLabel` prop to set the value label.
You can also set the `formatOptions` prop to format the value label.
```tsx
```
### Label
You can set the label of the progress by using the `label` prop.
```tsx
```
### Min and Max value
You can set the min and max value of the progress by using the `minValue` and `maxValue` prop.
```tsx
```
---
title: Progress
description: Progress is used to display the progress of a task.
isServerComponent: true
source: /packages/react/src/components/Progress/Progress.tsx
themeSource: /packages/system/src/recipes/progress.ts
---
## Installation
```bash
pnpm dreamy add progress
```
## Usage
Use `value` prop to set the progress value 0 - 100. `aria-label` prop is required for accessibility.
```tsx
```
### Sizes
You can set the size of the progress by using the `size` prop.
```tsx
```
### Scheme
You can set the color of the progress by using the `scheme` prop.
```tsx
```
### Indeterminate Progress
You can make the progress indeterminate by using the `isIndeterminate` prop. You can customize `speed` prop to change the speed of the indeterminate animation.
```tsx
```
---
title: Radio Card
description: A selectable card component that behaves like a Radio
isServerComponent: false
source: /packages/react/src/components/Radio-card/Radio-card.tsx
themeSource: /packages/system/src/recipes/Radio-card.ts
---
## Installation
```bash
pnpm dreamy add radio-card
```
## Usage
Base usage of the Radio card.
```tsx
```
### With description
```tsx
```
### Radio variant
Change the Radio variant of the Radio card.
```tsx
```
### Scheme
Change the color scheme of the Radio card.
```tsx
```
### Size
Change the Radio card size.
```tsx
```
### Radio Group
You can control the Radio state by using `value` and `onChange` in ``.
```tsx
export function ControlledRadioCards() {
const [value, setValue] = useState("rr");
return (
);
}
```
### With icon
You can use custom children in the `title` or `description`, to create a more complex and flexible Radio card.
} boxSize={"5"} color="fg.medium" />
React Router
)}
description="Description for React Router"
full
value="rr"
/>
} boxSize={"5"} color="fg.medium" />
Next.js
)}
description="Description for Next.js"
full
value="next"
/>
} boxSize={"5"} color="fg.medium" />
Vue.js
)}
description="Description for Vue.js"
full
value="vue"
/>
```tsx
} boxSize={"5"} color="fg.medium" />
React Router
)}
description="Description for React Router"
full
value="rr"
/>
} boxSize={"5"} color="fg.medium" />
Next.js
)}
description="Description for Next.js"
full
value="next"
/>
} boxSize={"5"} color="fg.medium" />
Vue.js
)}
description="Description for Vue.js"
full
value="vue"
/>
```
### Hide radio indicator
You can hide the radio indicator by using the `hideRadio` prop.
} boxSize={"5"} color="fg.medium" />
Paypal
)}
value="paypal"
full
hideRadio
/>
} boxSize={"5"} color="fg.medium" />
Credit Card
)}
full
value="cc"
hideRadio
/>
} boxSize={"5"} color="fg.medium" />
Apple
)}
full
value="apple"
hideRadio
/>
```tsx
} boxSize={"5"} color="fg.medium" />
Paypal
)}
value="paypal"
full
hideRadio
/>
} boxSize={"5"} color="fg.medium" />
Credit Card
)}
full
value="cc"
hideRadio
/>
} boxSize={"5"} color="fg.medium" />
Apple
)}
full
value="apple"
hideRadio
/>
```
---
title: Radio
description: Radio is used to select a single option from a list of options.
isServerComponent: false
source: /packages/react/src/components/radio/radio.tsx
themeSource: /packages/system/src/recipes/radio.ts
---
## Installation
```bash
pnpm dreamy add radio
```
## Usage
Radio buttons allow users to select one option from a set of mutually exclusive choices. Perfect for single-selection scenarios in forms.
<>Default
```tsx
Default
```
### Radio Group
`RadioGroup` allows easily composing multiple Radioes.
Use `defaultValue`, `value` and `onChange` in `` to control the selected Radioes.
FirstSecond
```tsx
FirstSecond
```
### Scheme
Change the color scheme of the Radio.
PrimarySecondarySuccessWarningErrorInfoNone
```tsx
PrimarySecondarySuccessWarningErrorInfoNone
```
### Size
Change the Radio size.
SmallMediumLarge
```tsx
SmallMediumLarge
```
### Controlled Radio
You can control the Radio state by using `value` and `onChange` in ``.
```tsx
export function ControlledRadios() {
const [value, setValue] = useState("rr");
return (
React RouterNext.jsVue.js
);
}
```
---
title: Range Slider
description: Range Slider is a component that allows you to select a range between two values.
isServerComponent: false
source: /packages/react/src/components/slider/use-range-slider.ts
themeSource: /website/app/components/recipes/range-slider.ts
---
## Installation
```bash
pnpm dreamy add range-slider
```
## Usage
```tsx
```
### Max, Min, Step
You can change the max, min, and step of the Range Slider by using the `max`, `min`, and `step` props.
```tsx
function MaxMinRangeSlider() {
const [value, setValue] = useState<[number, number]>([0, 25]);
return (
<>
Range: {value[0]} - {value[1]}
);
}
```
### Size
You can change the size of the Range Slider by using the `size` prop. This adjusts both the track height/width and the thumb size.
```tsx
```
### Scheme
You can change the scheme of the Range Slider by using the `scheme` prop.
```tsx
```
### Orientation
You can change the orientation of the Range Slider by using the `orientation` prop.
```tsx
```
### Reversed
You can reverse the Range Slider by using the `isReversed` prop.
```tsx
```
### Custom Thumb Size
You can set a custom thumb size by using the `thumbSize` prop (in pixels). This is useful when you need precise control over the thumb size beyond the predefined `size` variants.
```tsx
```
### Controlled
You can control the Range Slider by using the `value` prop.
```tsx
function ControlledRangeSlider() {
const [value, setValue] = useState<[number, number]>([25, 75]);
return (
<>
Range: {value[0]} - {value[1]}
);
}
```
---
title: Select
description: Select allows to create a dropdown list of options.
isServerComponent: false
source: /packages/react/src/components/select/select.tsx
themeSource: /packages/system/src/recipes/select.ts
---
## Installation
```bash
pnpm dreamy add select
```
## Usage
Basic usage of Select.
StrawberryBananaOrange
```tsx
StrawberryBananaOrange
```
### Size
Select comes with 4 different sizes.
StrawberryBananaOrangeStrawberryBananaOrangeStrawberryBananaOrangeStrawberryBananaOrange
```tsx
StrawberryBananaOrangeStrawberryBananaOrangeStrawberryBananaOrangeStrawberryBananaOrange
```
### Variant
Select can be used in `outline` or `solid` variant.
StrawberryBananaOrangeStrawberryBananaOrange
```tsx
StrawberryBananaOrangeStrawberryBananaOrange
```
### Selected Item Background Scheme
You can customize the background color of the selected item. This will only apply if [`selectedStrategy`](#selected-strategy) is set to `both` or `background`.
{["primary", "success", "warning", "info", "error", "none"].map((scheme) => (
<>
{scheme}StrawberryBananaOrange
))}
```tsx
{["primary", "success", "warning", "info", "error", "none"].map((scheme) => (
<>
{scheme}StrawberryBananaOrange
))}
```
### Controlled
```tsx
export function ControlledSelect() {
const [value, setValue] = useState("strawberry");
return (
StrawberryBananaOrange
);
}
```
### Selected Strategy
You can customize how the selected value is marked as selected.
{["both", "checkmark", "background"].map((strategy) => (
<>
{strategy}StrawberryBananaOrange
))}
```tsx
{["both", "checkmark", "background"].map((strategy) => (
<>
{strategy}StrawberryBananaOrange
))}
```
### With option icons
You can place icons, custom children in the `Select.Item` to indicate the type of the option.
CherryBananaOrange
```tsx
CherryBananaOrange
```
### With one icon
Single icon is useful if you want to have global icon for a trigger, instead of having it on each item.
} />
CherryBananaOrange
```tsx
} />
CherryBananaOrange
```
### Clearable
Pass `isClearable` prop to enable clear button.
CherryBananaOrange
```tsx
CherryBananaOrange
```
### Multiple
You can use the `isMultiple` prop to allow multiple selection. Now `onChangeValue` will return an array of values, instead of a single string value.
StrawberryBananaOrange
```tsx
export function MultipleSelect() {
return (
StrawberryBananaOrange
);
}
```
### Custom Multiple Selected Text
You can change the text that Select displays when multiple keys are selected by using `multipleSelectedText` prop in `Select.Trigger`.
`${selectedKeys.join(", ")}`}
/>
StrawberryBananaOrange
```tsx
export function MultipleSelect() {
return (
`${selectedKeys.join(", ")}`}
/>
StrawberryBananaOrange
);
}
```
### Async loading
You can fetch data when the Select is opened.
```tsx
export function AsyncSelect() {
const [isLoading, setIsLoading] = useState(true);
const [fruits, setFruits] = useState([]);
function fetchFruits() {
if (fruits.length > 0) return;
fetch("/api/fake-select-data") // slowed by 1 second
.then((res) => res.json())
.then(setFruits)
.finally(() => setIsLoading(false));
}
return (
{isLoading && (
)}
{fruits.map((fruit) => (
{fruit}
))}
);
}
```
### Virtualized
For better performance with large lists (100+ items), use `Select.VirtualContent` instead of `Select.Content`. It only renders visible items, significantly improving rendering performance and reducing memory usage.
{Array.from({ length: 250 }).map((_, index) => (
Item {index + 1}
))}
```tsx
{Array.from({ length: 250 }).map((_, index) => (
Item {index + 1}
))}
```
#### Props
- `estimatedItemHeight` - Estimated height of each item in pixels. Used for virtualization calculations. For different select sizes the values will be: `xs`: `26`, `sm`: `28`, `md`: `32`, `lg`: `40`. Default: `32`
- `overscan` - Number of items to render outside the visible area. Higher values reduce flickering during fast scrolling but increase initial render cost. Default: `5`
- `maxHeight` - Maximum height of the virtualized list container in pixels. Default: `300`
```tsx
{largeItemsList.map((item) => (
{item.label}
))}
```
**Note:** Selected items are always rendered (even when scrolled out of view) to ensure the trigger can display the selected value correctly.
### Close on select
You can customize whether the Select should close when an item is selected. Defalult is `true` for non-multiple select, `false` for multiple select.
StrawberryBananaOrange
```tsx
StrawberryBananaOrange
```
### Reduce motion
You can disable the animation of the Select by setting the `reduceMotion` prop to `true`. You'll see no difference now if your device has currently reduced motion enabled globally.
StrawberryBananaOrange
```tsx
StrawberryBananaOrange
```
---
title: Skeleton
description: Skeleton is used to show a loading state for a component, while keeping the layout size.
isServerComponent: true
source: /packages/react/src/components/skeleton/skeleton.tsx
themeSource: /packages/system/styled-system/patterns/skeleton.js
---
## Installation
```bash
pnpm dreamy add skeleton
```
## Usage
Base usage of a Skeleton.
> info: Tip: `full` is a shortcut for `width="full"`.
```tsx
```
### Variants
PulseShineNone
```tsx
PulseShineNone
```
---
title: Slider
description: Slider is a component that allows you to select a value from a range of values.
isServerComponent: false
source: /packages/react/src/components/slider/slider.tsx
themeSource: /packages/system/src/recipes/slider.ts
---
## Installation
```bash
pnpm dreamy add slider
```
## Usage
```tsx
```
### Max, Min, Step
You can change the max, min, and step of the Slider by using the `max`, `min`, and `step` props.
```tsx
function MaxMinSlider() {
const [value, setValue] = useState(0);
return (
<>
Slider value: {value}
);
}
```
### Size
You can change the size of the Slider by using the `size` prop. This adjusts both the track height/width and the thumb size.
```tsx
```
### Scheme
You can change the scheme of the Slider by using the `scheme` prop.
```tsx
```
### Orientation
You can change the orientation of the Slider by using the `orientation` prop.
```tsx
```
### Reversed
You can reverse the Slider by using the `isReversed` prop.
```tsx
```
### Custom Thumb Size
You can set a custom thumb size by using the `thumbSize` prop (in pixels). This is useful when you need precise control over the thumb size beyond the predefined `size` variants.
```tsx
```
### Hide Thumb
You can hide the slider thumb by using the `hideThumb` prop. This is useful when you want a simpler slider appearance.
```tsx
```
### Controlled
You can control the Slider by using the `value` prop.
ControlledSlider
```tsx
function ControlledSlider() {
const [value, setValue] = useState(0);
return (
<>
Slider value: {value}
);
}
```
---
title: Snippet
description: Snippet provides a simple way to display code snippets with a copy button.
isServerComponent: false
source: /packages/react/src/components/snippet/snippet.tsx
themeSource: /packages/system/src/recipes/snippet.ts
---
## Installation
```bash
pnpm dreamy add snippet
```
## Usage
<>pnpm dlx dreamy add --all
```tsx
pnpm dlx dreamy add --all
```
### Variants
<>pnpm dlx dreamy add --all
<>pnpm dlx dreamy add --all
```tsx
pnpm dlx dreamy add --all
pnpm dlx dreamy add --all
```
### Sizes
<>pnpm dlx dreamy add --all
<>pnpm dlx dreamy add --all
<>pnpm dlx dreamy add --all
```tsx
pnpm dlx dreamy add --all
pnpm dlx dreamy add --all
pnpm dlx dreamy add --all
```
### Schemes
{["primary", "secondary", "success", "warning", "info", "error", "none"].map((scheme) => (
{scheme}
pnpm dlx dreamy add --all
))}
```tsx
{["primary", "secondary", "success", "warning", "info", "error", "none"].map((scheme) => (
{scheme}
pnpm dlx dreamy add --all
))}
```
### Disable Tooltip
You can disable the "Copy To Clipboard" tooltip by using the `disableTooltip` prop.
<>pnpm dlx dreamy add --all
```tsx
pnpm dlx dreamy add --all
```
---
title: Spinner
description: Spinner indicates a loading state for a user.
isServerComponent: false
source: /packages/react/src/components/spinner/spinner.tsx
themeSource: /packages/panda-preset/src/recipes/spinner.ts
---
## Installation
```bash
pnpm dreamy add spinner
```
## Usage
Spinner indicates a loading state to users while content is being fetched or processed. It provides visual feedback during asynchronous operations.
```tsx
```
### Sizes
You can set the size of the Spinner by using the `size` prop.
```tsx
```
### With Label
You can add a label to the Spinner by using the `label` prop.
```tsx
```
### Speed
You can control the animation speed of the Spinner by using the `speed` prop. It accepts values in seconds (`s`) or milliseconds (`ms`).
```tsx
```
### Color
You can change the color of the Spinner by using the `color` prop.
```tsx
```
### Label Styling
You can style the label using the `labelProps` prop or by using the `css` prop to target the label part.
```tsx
```
### Usage in Buttons
Spinners are commonly used in buttons to indicate loading states. The Button component has built-in support for spinners.
```tsx
```
---
title: Stat
description: Stat is used to display a statistic with a title and value.
isServerComponent: false
source: /packages/react/src/components/stat/stat.tsx
themeSource: /packages/panda-preset/src/recipes/stat.ts
---
## Installation
```bash
pnpm dreamy add stat
```
## Usage
Stat is a component used to display statistics with a title and value. It follows a semantic structure using description list (`dl`, `dt`, `dd`) elements.
Unique visitors192.1k
```tsx
Unique visitors192.1k
```
### With Hint
You can add additional context using the `Stat.Hint` component.
Revenue$935.40+12% from last month
```tsx
Revenue$935.40+12% from last month
```
### With Indicators
Display trend indicators using `Stat.UpIndicator` and `Stat.DownIndicator` components.
Sales$4,200
<>12%
Conversions2.4%
<>1.2%
```tsx
Sales$4,200
12%
Conversions2.4%
1.2%
```
### With Badge Indicators
Display badge indicators using `Stat.UpIndicator` and `Stat.DownIndicator` components.
Sales$4,200
<>12%
Conversions2.4%
<>1.2%
```tsx
Sales$4,200
12%
Conversions2.4%
1.2%
```
### With Value Units
Use `Stat.ValueUnit` to display units alongside values.
Time to complete
<>3 hr
<>20 min
```tsx
Time to complete
3 hr
20 min
```
### Sizes
You can change the size of the stat using the `size` prop.
Small1,234Medium1,234Large1,234
```tsx
Small1,234Medium1,234Large1,234
```
### With Icon
Combine stats with icons for better visual representation.
Sales$4.24k
```tsx
Sales$4.24k
```
### With Progress
Combine stats with progress bars to show completion status.
This week$1,340+12% from last week
```tsx
This week$1,340+12% from last week
```
### Multiple Stats
Display multiple stats in a grid layout.
Total Users8,456+12% from last monthRevenue$23,456+5% from last monthConversion Rate3.2%-2% from last month
```tsx
Total Users8,456+12% from last monthRevenue$23,456+5% from last monthConversion Rate3.2%-2% from last month
```
---
title: Switch
description: Switch is used to select one or more options from a list.
isServerComponent: false
source: /packages/react/src/components/switch/switch.tsx
themeSource: /packages/system/src/recipes/switch.ts
---
## Installation
```bash
pnpm dreamy add switch
```
## Usage
Switch allows users to toggle between two states (on/off). Use it for boolean settings and preferences in forms or configuration panels.
<>Default
```tsx
Default
```
### Scheme
Change the color scheme of the Switch.
PrimarySecondarySuccessWarningErrorInfoNone
```tsx
PrimarySecondarySuccessWarningErrorInfoNone
```
### Size
Change the Switch size.
SmMdLg
```tsx
SmMdLg
```
### Controlled
Use `isChecked` and `onChange`, `onChangeValue` to control the checkbox.
```tsx
export function ControlledSwitch() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
Selected: {isChecked ? "true" : "false"}
Controlled
);
}
```
---
title: Table
description: Tables are used to display data in a structured way.
isServerComponent: false
source: /packages/react/src/components/table/table.tsx
themeSource: /packages/system/src/recipes/table.ts
---
## Installation
```bash
pnpm dreamy add table
```
## Usage
NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
```tsx
NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
```
### Variants
{["simple", "line"].map((variant) => (
<>
{variant}NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
))}
```tsx
{["simple", "line"].map((variant) => (
<>
{variant}NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
))}
```
### With background
{["simple", "line"].map((variant) => (
<>
{variant}NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
))}
```tsx
{["simple", "line"].map((variant) => (
<>
{variant}NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
))}
```
### Interactive
NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
```tsx
NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
```
### Striped
NameAgeGender
{[20, 22, 25, 28, 31, 35].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
```tsx
NameAgeGender
{[20, 22, 25, 28, 31, 35].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
```
### Size
{["sm", "md", "lg"].map((size) => (
<>
{size}NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
))}
```tsx
{["sm", "md", "lg"].map((size) => (
<>
{size}NameAgeGender
{[20, 22, 25].map((item, index) => (
Name {index + 1}{item}{item % 5 === 0 ? "Male" : "Female"}
))}
))}
```
### Table With Action Bar
A common use case is integrating the action bar with table selections.
```tsx
interface User {
id: number;
name: string;
age: number;
gender: string;
isSelected: boolean;
}
function ActionBarTable() {
const [users, setUsers] = useState([
{ id: 1, name: "John Doe", age: 20, gender: "Male", isSelected: false },
{ id: 2, name: "Jane Doe", age: 22, gender: "Female", isSelected: false },
{ id: 3, name: "Jim Doe", age: 25, gender: "Male", isSelected: false }
]);
const { isOpen, onClose } = useControllable({
isOpen: users.some((user) => user.isSelected),
onClose: () => setUsers((prev) => prev.map((user) => ({ ...user, isSelected: false })))
});
const toggleSelection = useCallback((id: number) => {
setUsers((prev) =>
prev.map((user) => (user.id === id ? { ...user, isSelected: !user.isSelected } : user))
);
}, []);
const unselectAll = useCallback(() => {
setUsers((prev) => prev.map((user) => ({ ...user, isSelected: false })));
}, []);
const toggleSelectionAll = useCallback(() => {
setUsers((prev) =>
prev.map((user) => ({ ...user, isSelected: !prev.every((user) => user.isSelected) }))
);
}, []);
return (
<>
user.isSelected)}
isIndeterminate={
users.some((user) => user.isSelected) &&
!users.every((user) => user.isSelected)
}
onChangeValue={toggleSelectionAll}
/>
NameAgeGender
{users.map((user, index) => (
td:first-of-type": {
borderStartStartRadius: "l2"
},
"& > td:last-of-type": {
borderStartEndRadius: "l2"
}
}}
_hover={{
bg: "alpha.50"
}}
_last={{
"& > td:first-of-type": {
borderEndStartRadius: "l2"
},
"& > td:last-of-type": {
borderEndEndRadius: "l2"
}
}}
bg={user.isSelected ? "alpha.50" : "transparent"}
cursor={"pointer"}
key={index}
onClick={() => toggleSelection(user.id)}
>
toggleSelection(user.id)}
/>
{user.name}{user.age}{user.gender}
))}
{users.filter((user) => user.isSelected).length} selected
);
}
```
---
title: Tabs
description: Tabs can be used to display information in a structured way.
isServerComponent: false
source: /packages/react/src/components/tabs/tabs.tsx
themeSource: /packages/system/src/recipes/tabs.ts
---
## Installation
```bash
pnpm dreamy add tabs
```
## Usage
Tab 1Tab 2Tab 3
Tab 1
Tab 2
Tab 3
```tsx
Tab 1Tab 2Tab 3
Tab 1
Tab 2
Tab 3
```
### Variant
You can change the variant of the Tabs by passing the `variant` prop to the `Tabs.Root` component.
```tsx
function TabsVariants() {
return (
{(["filled", "underline", "filled-simple"] as const).map((variant) => (
{capitalize(variant)} VariantTab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content
))}
);
}
```
### Fit Width
Add `fitted` prop, to fit the tabs width to the container.
Tab 1Tab 2Tab 3
Tab 1
Tab 2
Tab 3
```tsx
Tab 1Tab 2Tab 3
Tab 1
Tab 2
Tab 3
```
### Controlled
You can control the selected tab by passing the `index` and `onChange` props to the `Tabs.Root` component.
```tsx
function ControlledTabs() {
const [index, setIndex] = useState(2);
return (
<>
Current Tab: {index + 1}Tab 1Tab 2Tab 3
Tab 1 content
Tab 2 content
Tab 3 content
);
}
```
### Lazy mount panel
You can lazy mount the panel by passing the `isLazy` prop to the `Tabs.Root` component. This will only render the active tab panel, instead of switching the visibility of all panels.
Tab 1Tab 2Tab 3
Tab 1
Tab 2
Tab 3
```tsx
Tab 1Tab 2Tab 3
Tab 1
Tab 2
Tab 3
```
### Overflow
Add `overflowX="scroll"` to the `Tabs.List` if your tabs are overflowing the container.
Tab 1Tab 2Tab 3Tab 4Tab 5Tab 6Tab 71234567
```tsx
Tab 1Tab 2Tab 3Tab 4Tab 5Tab 6Tab 71234567
```
---
title: Text
description: Text is a simple styled `p` tag that can be used to display text.
isServerComponent: true
source: /packages/react/src/components/text/text.tsx
themeSource: /packages/system/src/recipes/text.ts
---
## Installation
```bash
pnpm dreamy add text
```
## Usage
Text renders styled paragraph text with consistent typography. Use it for body text, descriptions, and other textual content.
<>This is a simple text component.
```tsx
This is a simple text component.
```
### Font sizes
Extra smallSmallMediumLargeExtra large2 Extra large3 Extra large4 Extra large5 Extra large6 Extra large7 Extra large
```tsx
Extra smallSmallMediumLargeExtra large2 Extra large3 Extra large4 Extra large5 Extra large6 Extra large7 Extra large
```
---
title: Textarea
description: Textarea component allows you to easily create multi-line text inputs.
isServerComponent: false
source: /packages/react/src/components/textarea/textarea.tsx
themeSource: /packages/system/src/recipes/textarea.ts
---
## Installation
```bash
pnpm dreamy add textarea
```
## Usage
Textarea resizes automatically as it's content grows.
```tsx
```
### Min and Max rows
Use `minRows` and `maxRows` props to control the number of rows the textarea can expand to.
```tsx
```
### Resize
Pass `resize` prop to the `Textarea` to enable resizing.
```tsx
```
### Textarea Size
```tsx
```
### Textarea Variant
```tsx
```
### Invalid
Pass `isInvalid` prop to the `Textarea` to show the error state.
```tsx
```
### Usage with Field
Combine `Textarea` with `Field` to create a nice looking form element.
BiographyBiography should not contain any bad words.
```tsx
BiographyYour biography should not contain any bad words.
```
### No auto resize
If you want to disable the auto resize of the textarea, simply use `TextareaNoAutoSize` component.
```tsx
```
---
title: Theme
description: Theme allows to lock between dark and light mode in the children.
isServerComponent: true
source: /packages/react/src/components/theme/theme.tsx
---
## Installation
```bash
pnpm dreamy add theme
```
## Usage
Theme components allow you to lock specific sections of your UI to either dark or light mode, regardless of the global theme setting.
This is Dark ThemeThis is Light Theme
```tsx
This is Dark ThemeThis is Light Theme
```
---
title: Toast
description: Toasts can be a nice way to signalize the user about important information from user action.
isServerComponent: false
source: /packages/react/src/components/toast/toast.tsx
themeSource: /packages/system/src/recipes/toast.ts
---
## Installation
```bash
pnpm dreamy add toast
```
### Add ToastProvider
You need to wrap your app with `ToastProvider` to use the toasts.
```tsx {4,6}
export function App() {
return (
);
}
```
## Usage
```tsx
function Toast() {
const { toast } = useToast();
return (
);
}
```
### Status
The `status` prop changes the color of the Toast and the icon.
{["success", "error", "warning", "info", "loading"].map((status) => (
))}
```tsx
{["success", "error", "warning", "info", "loading"].map((status) => (
))}
```
### Position
The `position` prop changes the position of the Toast.
{["top-left", "top", "top-right", "bottom-left", "bottom", "bottom-right"].map((position) => (
))}
```tsx
{["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"].map((position) => (
))}
```
### Duration
The `duration` prop changes the duration of the Toast.
```tsx
```
### Closable
The `isClosable` prop allows you to close the toast.
```tsx
```
### Right content
The `rightContent` prop allows you to render custom content to the right of the toast.
```tsx
```
### Custom Render
The `render` prop allows you to render custom toast.
```tsx
```
### Update toast
You can use `updateToast` function to update a toast
```tsx
export function UpdateToast() {
const { toast, updateToast } = useToast();
const [toastId, setToastId] = useState(null);
return (
);
}
```
### Default toast props
Use `defaultToastProps` in the `DreamyProvider` to set default props for all toasts.
```tsx
...
```
---
title: Tooltip
description: Tooltip is an interactive component that displays information when hovering over an element.
isServerComponent: false
source: /packages/react/src/components/tooltip/tooltip.tsx
themeSource: /packages/system/src/recipes/tooltip.ts
---
## Installation
```bash
pnpm dreamy add tooltip
```
## Usage
Base usage of a Tooltip.
Hover me
```tsx
Hover me
```
### Open and close delay
You can control the open and close delay of the tooltip by using the `openDelay` and `closeDelay` props.
Hover me (1s open)Hover me (1s close)
```tsx
Hover me (1s open)Hover me (1s close)
```
### Close handlers
You can control the close behavior of the tooltip by using the `closeOnClick`, `closeOnPointerDown`, `closeOnEsc`, and `closeOnScroll` props.
By default, the tooltip will close on click, pointer down, esc key, but not on scroll.
Close on click falseClose on pointer down falseClose on esc key falseClose on scroll
```tsx
Close on click falseClose on pointer down falseClose on esc key falseClose on scroll
```
### Arrow
You can control the arrow of the tooltip by using the `hasArrow` and `arrowSize` props.
No arrowArrow size 15
```tsx
No arrowArrow size 15
```
### Disable Portal
In some cases you might want to disable the portal and render the tooltip directly in the parent component.
You may use it in a sticky header for example, as with portal, the tooltip will look weird.
Disable portal
```tsx
Disable portal
```
---
title: Transitions
description: Transitions allow for easy way to animate stuff.
isServerComponent: false
source: /packages/react/src/components/transitions/transitions.tsx
---
## Installation
```bash
pnpm dreamy add transitions
```
## Collapse
Base usage of the Collapse component.
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
Hello
);
}
```
## Scale
Base usage of the Scale component.
```tsx
export function Scaled() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
Hello
);
}
```
### Starting and ending height
You can set the starting and ending height of the content by setting the `startingHeight` and `endingHeight` props.
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
Hello
);
}
```
### Animate Opacity
You can disable the opacity animation by setting the `animateOpacity` prop to `false`. This option works for both the Collapse and Scale components.
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
Hello
);
}
```
### Unmount on exit
You can unmount component on exit animation by setting the `unmountOnExit` prop to `true`. This option works for both the Collapse and Scale components.
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
Hello
);
}
```
### Initial scale
You can set the initial scale of the content by setting the `initialScale` prop. This option works for only for Scale component.
```tsx
export function Scaled() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
Hello
);
}
```
---
title: Visually Hidden
description: Visually Hidden is a component that hides content from the screen while keeping it accessible to screen readers.
isServerComponent: true
source: /packages/react/src/components/visually-hidden/visually-hidden.tsx
themeSource: /packages/system/styled-system/patterns/visually-hidden.js
---
## Installation
```bash
pnpm dreamy add visually-hidden
```
## Usage
Base usage of a Visually Hidden component and a Visually Hidden Input component.
```tsx
```
---
title: Wrap
description: Wrap is used to stack items with a gap and to wrap them if there is no space left.
isServerComponent: true
source: /packages/react/src/components/wrap/wrap.tsx
---
## Installation
```bash
pnpm dreamy add wrap
```
## Usage
Wrap arranges child elements in a flexible layout that automatically wraps to new lines when space runs out. Perfect for responsive item grids.
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```tsx
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```
### Gap
Use the `gap` prop to set the gap between items.
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```tsx
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```
### Align
Use the `align` prop to set the alignment of the items.
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```tsx
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```
### Justify
Use the `justify` prop to set the justification of the items.
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```tsx
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```
### Row and Column Gap
Use the `rowGap` and `columnGap` props to set the gap between rows and columns.
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```tsx
{Array.from({ length: 10 }).map((_, index) => (
{index}
))}
```
---
title: useActionKey
description: useActionKey returns the action key of the current platform.
isServerComponent: false
source: /packages/react/src/hooks/use-action-key.tsx
---
## Import
```tsx
import { useActionKey } from "@dreamy-ui/react";
```
## Usage
`useActionKey` returns the action key of the current platform. It will return `Ctrl` by default, but if the platform is Mac, it will return `⌘`.
You can also pass an initial value to the hook. Since during SSR, action key cannot be determined, it will return the initial value. By default it is `Ctrl`. This is useful when you want to save the action key in the cookie, so it shows the correct action key, even before hydration.
```tsx
export function UseActionKey() {
const actionKey = useActionKey();
return Action key: {actionKey};
}
```
### Get action key code
You can also get the action key code using `getActionKeyCode` function.
```tsx
import { getActionKeyCode } from "@dreamy-ui/react";
const actionKeyCode = getActionKeyCode();
```
This is useful when you want to integrate with keyboard events.
Example below will toggle color mode on `cmd + i` or `ctrl + i`.
```tsx
import { useColorMode, useEventListener, getActionKeyCode } from "@dreamy-ui/react";
export function ToggleColorMode() {
const { toggleColorMode } = useColorMode();
useEventListener("keydown", (event) => {
if (event.key === "i" && event[getActionKeyCode()] && !event.shiftKey) {
toggleColorMode();
}
});
}
```
---
title: useCanUseDOM
description: useCanUseDOM returns a boolean, which tells, if user has hydrated.
isServerComponent: false
source: /packages/react/src/provider/dreamy-provider.tsx
---
## Import
```tsx
import { useCanUseDOM } from "@dreamy-ui/react";
```
## Usage
`useCanUseDOM` returns a boolean value, which tells, if user has hydrated.
Refresh the page to see the effect. It will be `false` initially and `true` after hydration.
```tsx
export function useCanUseDOM() {
const canUseDOM = useCanUseDOM();
return Can use DOM: {canUseDOM ? "Yes" : "No"};
}
```
---
title: useClipboard
description: useClipboard is a hook that allows you to copy text to the clipboard.
isServerComponent: false
source: /packages/react/src/hooks/use-clipboard.tsx
---
## Import
```tsx
import { useClipboard } from "@dreamy-ui/react";
```
## Usage
`useClipboard` is a hook that allows you to copy text to the clipboard. It accepts an optional `timeout` prop, which is the time in milliseconds to wait before resetting the clipboard.
```tsx
export function UseClipboard() {
const { toast } = useToast();
const { copy, copied, error, reset } = useClipboard({
timeout: 2000
});
const handleCopy = useCallback(() => {
const value = "Hello, world!";
copy(value);
toast({
title: "Copied",
description: value,
status: "success"
});
}, [copy, toast]);
return (
Copied: {copied ? "Yes" : "No"}Error: {error ? "Yes" : "No"}
);
}
```
---
title: useColorMode
description: useColorMode allows to get, set or toggle the color mode of your application.
isServerComponent: false
source: /packages/react/src/provider/dreamy-provider.tsx
---
## Import
```tsx
import { useColorMode } from "@dreamy-ui/react";
```
## Usage
```tsx
export function UseColorMode() {
const { colorMode, setColorMode, toggleColorMode } = useColorMode();
return (
Current color mode: {colorMode}
);
}
```
---
title: useControllable
description: useControllable is a hook that allows you to control the state of a component.
isServerComponent: false
source: /packages/react/src/hooks/use-controllable.tsx
---
## Import
```tsx
import { useControllable } from "@dreamy-ui/react";
```
## Usage
`useControllable` allows you to control the state of a component.
```tsx
export function UseControllable() {
const { toast } = useToast();
const { isOpen, onOpen, onClose, onToggle, isControlled } = useControllable({
defaultIsOpen: false,
onClose: () =>
toast({
title: "Close",
status: "error"
}),
onOpen: () =>
toast({
title: "Open",
status: "success"
})
});
return (
Is open: {isOpen ? "Yes" : "No"}Is controlled: {isControlled ? "Yes" : "No"}
);
}
```
### Use with components
This hook should be used with the Dreamy components, like `Popover`, `Menu`, `Modal`, etc. To easily control the open/close state of the component.
```tsx
export function UseControllableModal() {
const { isOpen, onOpen, onClose } = useControllable();
return (
<>
Is open: {isOpen ? "Yes" : "No"}Hey!This is a modal body
);
}
```
---
title: useEventListener
description: useEventListener is a hook that allows you to listen to events on the target.
isServerComponent: false
source: /packages/react/src/hooks/use-event-listener.tsx
---
## Import
```tsx
import { useEventListener } from "@dreamy-ui/react";
```
## Usage
`useEventListener` is a hook that allows you to listen to events on the target.
```tsx
export function UseEventListener() {
const [count, setCount] = useState(() =>
typeof window === "undefined" ? 0 : Number(localStorage.getItem("count")) || 0
);
useEventListener("click", () => {
setCount((prev) => {
const newCount = prev + 1;
localStorage.setItem("count", newCount.toString());
return newCount;
});
});
return Count: {count};
}
```
`useEventListener` also accepts a target and an options object. Target can be a function that returns a DOM element, making it compatible with SSR.
```tsx
useEventListener("click", () => {}, () => document, { fireOnMount: true });
```
Example below will toggle color mode on `cmd + i` or `ctrl + i`.
```tsx
import { useColorMode, useEventListener, getActionKeyCode } from "@dreamy-ui/react";
export function ToggleColorMode() {
const { toggleColorMode } = useColorMode();
useEventListener("keydown", (event) => {
if (event.key === "i" && event[getActionKeyCode()] && !event.shiftKey) {
toggleColorMode();
}
});
}
```
---
title: useReducedMotion
description: useReducedMotion returns a reduced motion state from a provider.
isServerComponent: false
source: /packages/react/src/provider/dreamy-provider.tsx
---
## Import
```tsx
import { useReducedMotion } from "@dreamy-ui/react";
```
## Usage
`useReducedMotion` will return a value that is provided into provider before hydration.
If `reduceMotion` in the provider is "system" (which is default by the way), it will resolve to a boolean value after hydration. Before hydration it will be a `false`. Else if boolean are provided, it will use them.
Try toggling the reduced motion in your system to see the effect.
```tsx
export function UseReducedMotion() {
const isReducedMotion = useReducedMotion();
return Is reduced motion: {isReducedMotion ? "Yes" : "No"};
}
```
---
title: useSafeLayoutEffect
description: useSafeLayoutEffect is a `useLayoutEffect`, but uses `useEffect` during server side rendering.
isServerComponent: true
source: /packages/react/src/hooks/use-safe-layout-effect.tsx
---
## Import
```tsx
import { useSafeLayoutEffect } from "@dreamy-ui/react";
```
## Usage
`useSafeLayoutEffect` is a `useLayoutEffect` that is safe to use during server side rendering. It uses `useEffect` during server side rendering, skipping annoying and ugly `useLayoutEffect` warnings on server.
```tsx
/**
* This will only run on the client, even SSR-ed.
*/
useSafeLayoutEffect(() => {
console.log("useSafeLayoutEffect");
}, []);
```
---
title: useUpdateEffect
description: useUpdateEffect is a hook that allows you to run an effect only when the dependencies are updated, skipping the first render.
isServerComponent: false
source: /packages/react/src/hooks/use-update-effect.tsx
---
## Import
```tsx
import { useUpdateEffect } from "@dreamy-ui/react";
```
## Usage
`useUpdateEffect` is similar to `useEffect`, but it only runs when the dependencies are updated, skipping the initial render.
Dreamy UI also exports `useUpdateLayoutEffect` which is same as `useUpdateEffect` but uses `useLayoutEffect`, instead of `useEffect`.
```tsx
export function UseUpdateEffect() {
const { toast } = useToast();
const [count, setCount] = useState(() =>
typeof window === "undefined" ? 0 : Number(localStorage.getItem("count")) || 0
);
useUpdateEffect(() => {
toast({
title: `Count is ${count}`,
status: "info"
});
}, [count]);
return (
Count: {count}
);
}
```