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 favourite 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
If you are using one of the following frameworks, please follow the corresponding guide:
- [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 add @dreamy-ui/react @dreamy-ui/panda-preset 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, 10-16}
import createDreamyPreset, { dreamyPlugin } from "@dreamy-ui/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
preflight: true,
watch: true,
jsxFramework: "react",
jsxStyleProps: "all",
outExtension: "js",
include: [
"./app/**/*.{js,jsx,ts,tsx}", // Replace with your app source directory
],
presets: [
createDreamyPreset()
],
plugins: [dreamyPlugin],
theme: {
extend: {}
},
globalCss: {
extend: {}
},
staticCss: {
extend: {}
}
});
```
{/* ### 4. Add styled-system alias to tsconfig.json and next.config.ts
Add styled-system alias to your compiler config. That's how it would like using vite.
```ts {2-6}
export default defineConfig({
resolve: {
alias: {
"styled-system": path.resolve(__dirname, "./styled-system")
}
},
...
})
``` */}
### 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: Using Next.js
---
# Using Dreamy UI with Next.js
Set up Dreamy UI in your Next.js project.
## 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 alias to tsconfig.json
Add the following alias to your `tsconfig.json` file:
```json {6, 13-14}
{
"compilerOptions": {
...
"paths": {
"@/*": ["./src/*"],
"styled-system/*": ["./styled-system/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"styled-system/**/*.ts",
"styled-system/**/*.tsx",
".next/types/**/*.ts"
],
"exclude": ["node_modules"]
}
```
{/* 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 `providers.tsx` file in `app/providers.tsx`. This is where you will add all the providers you need for your app.
```tsx
"use client";
import { type ColorMode, DreamyProvider } from "@dreamy-ui/react";
import { domMax } from "motion/react";
import type { PropsWithChildren } from "react";
interface ProvidersProps extends PropsWithChildren {
colorMode?: ColorMode;
}
export function Providers({ children, colorMode }: ProvidersProps) {
return (
{children}
);
}
```
Next, add the `Providers` component to your `app/layout.tsx` file:
This way we pass the color mode to the `Providers` component so initial document request will have the user color mode.
```tsx {2-4, 13, 19, 22}
...
import { Providers } from "./providers";
import { getColorModeHTMLProps, 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
Set up Dreamy UI in your React Router project.
## 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, 8-12, 14, 17, 22, 31-38}
...
import { DreamyProvider } from "@dreamy-ui/react";
import { getColorModeHTMLProps, getSSRColorMode } from "@dreamy-ui/react/rsc";
import type { Route } from "./+types/root";
// 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
Set up Dreamy UI in your Remix project.
## 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
Set up Dreamy UI in your Vite project.
## 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. You can customize any component by extending the theme in panda config.
Let's make the `Flex` component to have `flexDirection: "column"` by default.
Flex uses a pattern, so we need to extends the patterns.
```ts
/**
* ...
* theme.extend
*/
patterns: {
flex: {
base: {
flexDirection: "column"
}
}
}
```
Now let's make the `Button` component to have `bg: "blue"` by default in the solid variant.
Button is a multi-part recipe, so we need to import `buttonParts` from `@dreamy-ui/system`.
```ts
import { parts } from "@dreamy-ui/system";
...
recipes: {
button: {
variants: { // variants allow us to have multiple variants
variant: { // select `variant` property
solid: parts.button({ // select `solid` part and extend `base` from `parts.button`
base: {
bg: "blue.500"
}
})
}
}
}
}
```
Now the hardest and most complicated part: Customizing slot recipes. Slot recipes and recipes that have multiple JSX components that are exported for user to use.
Let's make the `Field` root gap to be `0.5` smaller than the default.
> info: Tip: Don't know how slots are named? Check the component's theme source, by going to component doc and clicking "Theme Source" button.
```ts
recipes: {
field: {
root: {
gap: 1
}
}
}
```
---
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 of Dreamy UI Docs:
```ts {2, 7-22}
// > panda.config.ts <
import createDreamyPreset, { dreamyPlugin, parts } 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}
// > panda.config.ts <
import createDreamyPreset, { dreamyPlugin, parts } 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
```
### 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
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
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 ``, you can customize it by overriding it in the `panda.config.ts`.
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
---
## Import
- `Accordion` - The main component that wraps the accordion items with context.
- `AccordionItem` - The single item component that wraps the trigger and content.
- `AccordionTrigger` - The trigger component that opens the item.
- `AccordionContent` - The content component that is shown when the trigger is clicked.
```jsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@dreamy-ui/react";
```
## Usage
{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: 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
---
## Import
- `Alert`: The main container for the alert, that handles the icon, title and description.
```tsx
import { Alert } from "@dreamy-ui/react/rsc";
```
## Usage
```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
---
## Import
- `Avatar` - The main component that wraps the avatar.
- `AvatarGroup` - The wrapper component for stacking multiple avatars.
```jsx
import { Avatar, AvatarGroup } from "@dreamy-ui/react";
```
## Usage
Photo by Quang Anh Ha Nguyen
```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
```
---
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
---
## Import
- `Badge` - The main Badge component.
```jsx
import { Badge } from "@dreamy-ui/react/rsc";
```
## Usage
Prime
```tsx
Prime
```
### Variants
You can change the variant of the Badge by using the `variant` prop.
OutlineSubtle
```tsx
OutlineSubtle
```
### (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
---
## Import
- `Box` - A simple `div` tag with styled system.
```jsx
import { Box } from "@dreamy-ui/react/rsc";
```
## Usage
<>This is a box
```jsx
This is a box
```
---
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
---
## Import
- `Button` - The true Button component.
```jsx
import { Button } from "@dreamy-ui/react";
```
## Usage
```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 background will follow the current color.
```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
```
### Custom variant
Learn how to create a custom Button variant. See [Theming](/docs/theming/customization) documentation.
In your `panda.config.ts`, add a new variant:
```ts {1, 7-25}
import createDreamyPreset, { dreamyPlugin, parts } from "@dreamy-ui/panda-preset";
export default defineConfig({
...
theme: {
extend: {
recipes: {
button: {
variants: {
variant: {
glass: parts.button({
root: {
bg: "currentColor/12",
border: "1px solid",
borderColor: "currentColor/50",
boxShadow: "inset 0 0 4px {currentColor/12}",
_hover: {
bg: "currentColor/18"
}
}
})
}
}
}
}
}
},
});
```
Now, save the file and use the new variant:
```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
---
## Import
- `Card` - The main Card component.
- `CardHeader` - The header of the card.
- `CardBody` - The body of the card.
- `CardFooter` - The footer of the card.
- `CardTitle` - The title of the card.
- `CardDescription` - The description of the card.
```jsx
import { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription } from "@dreamy-ui/react";
```
## Usage
A basic usage of the card component.
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.
{ /* not using anchor element, since MDX transforms it with a custom component */}
} 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
---
## Import
- `CheckboxCard` - A selectable card component that behaves like a checkbox.
- `CheckboxGroup` - Group wrapper for composing multiple checkbox cards.
```jsx
import { CheckboxCard, CheckboxGroup } from "@dreamy-ui/react";
```
## Usage
```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
---
## Import
- `Checkbox` - A checkbox component.
- `CheckboxGroup` - Group wrapper for composing multiple checkboxes.
```jsx
import { Checkbox, CheckboxGroup } from "@dreamy-ui/react";
```
## Usage
<>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: 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
---
## Import
- `Divider` - The Divider component.
```jsx
import { Divider } from "@dreamy-ui/react/rsc";
```
## Usage
```tsx
```
### Orientation
You can change the orientation of the Divider by using the `orientation` prop.
**Horizontal**
**Vertical**
```tsx
**Horizontal**
**Vertical**
```
---
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
---
## Import
- `Editable` - The context for the editable, renders a 'div' by default.
- `EditablePreview` - The text preview for the editable.
- `EditableInput` - The input for the editable, when in edit mode.
- `EditableEditButton` - The button to trigger edit mode.
- `EditableSubmitButton` - The button to submit the editing value, when in edit mode.
- `EditableCancelButton` - The button to cancel the editing, when in edit mode.
```jsx
import {
Editable,
EditablePreview,
EditableInput,
EditableEditButton,
EditableSubmitButton,
EditableCancelButton
} from "@dreamy-ui/react";
```
## Usage
Basic usage of Editable. Placeholder will be shown, 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
---
## Import
- `Field` - The main Field component.
- `FieldLabel` - The label for the field.
- `FieldHelpText` - The help text for the field.
- `FieldError` - The error for the field.
```jsx
import { Field, FieldLabel, FieldHelpText, FieldError } from "@dreamy-ui/react";
```
## Usage
<>Username
<>This is the username you will use to login
```tsx
Username
This is the username you will use to login
```
- **Required**
<>Username
```tsx
Username
```
- **Invalid**
<>Username
```tsx
Username
```
- **Disabled**
<>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 Help Text
Field help text 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`, `helpText`, `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
---
## Import
- `Flex` - The Flex component.
```tsx
import { Flex } from "@dreamy-ui/react/rsc";
```
## Usage
<>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
---
## Import
- `Grid` - The Grid component.
- `GridItem` - The item for a grid.
```tsx
import { Grid, GridItem } from "@dreamy-ui/react/rsc";
```
## Usage
Base usage of a grid.
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
---
## Import
- `Group` - The Group component.
```tsx
import { Group } from "@dreamy-ui/react/rsc";
```
## Usage
Basic usage of the Group component.
```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
---
## Import
- `Heading` - The Heading component.
```jsx
import { Heading } from "@dreamy-ui/react/rsc";
```
## Usage
<>This is a simple Heading component.
```tsx
This is a simple Heading 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: 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
---
## Import
- `Icon` - The Icon component.
```jsx
import { Icon } from "@dreamy-ui/react/rsc";
```
## 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
---
## Import
- `Image` - The Image component.
- `ImageRSC` - The Image component for RSC usage without client handlers.
```tsx
import { Image } from "@dreamy-ui/react";
import { ImageRSC } from "@dreamy-ui/react/rsc";
```
## 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
```
### RSC Usage
ImageRSC is a server-side compatible component that does not use client handlers.
```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
---
## Import
- `Input` - The Input component.
- `InputRSC` - The Input component for RSC usage without client handlers.
```tsx
import { Input } from "@dreamy-ui/react";
import { InputRSC } from "@dreamy-ui/react/rsc";
```
## 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" />
```tsx
```
### 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.
```
### RSC Usage
InputRSC is a RSC compatible component that does not use client handlers.
```tsx
```
---
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
---
## Import
- `Kbd` - The Keyboard key component.
```tsx
import { Kbd } from "@dreamy-ui/react/rsc";
```
## 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";
const actionKey = useActionKey();
{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
---
## Import
- `Link` - The Link component.
```tsx
import { Link } from "@dreamy-ui/react/rsc";
```
## Usage
<>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 Remix (`react-router`) Link component with Dream Link component.
```tsx
import { Link as DreamLink, type LinkProps as DreamLinkProps } from "@dreamy-ui/react";
import { Link as RemixLink, type LinkProps as RemixLinkProps } from "@remix-run/react";
import { forwardRef } from "react";
export interface LinkProps extends DreamLinkProps, Omit {}
export const Link = forwardRef((props, ref) => {
return ;
});
Link.displayName = "Link";
```
---
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
---
## Import
- `List` - The List component.
- `ListItem` - The List item component.
```tsx
import { List, ListItem } from "@dreamy-ui/react/rsc";
```
## Usage
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
---
## Import
- `Menu` - The Menu component with context.
- `MenuTrigger` - The trigger for the Menu.
- `MenuContent` - The content for the Menu as popover.
- `MenuItem` - The item for the Menu.
```tsx
import {
Menu,
MenuItem,
MenuContent,
MenuTrigger
} from "@dreamy-ui/react";
```
## Usage
Basic usage of Menu.
```tsx
```
### 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.
```tsx
```
### Size
Menu comes with 4 different sizes.
{["xs", "sm", "md", "lg"].map((size) => (
))}
```tsx
{["xs", "sm", "md", "lg"].map((size) => (
))}
```
### 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 (
);
}
```
### Using links
You can use a custom link component with menu item but polymorphic props like `as`, `asComp` and `asChild`.
```tsx
```
### 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 (
);
}
```
### 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 (
);
}
```
### Item right content
You can add right content to the item with `rightContent` prop.
```tsx
```
---
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
---
## Import
- `Modal` - The Modal component.
- `ModalBody` - The body for the modal.
- `ModalCloseButton` - The close button for the modal.
- `ModalContent` - The content for the modal.
- `ModalFooter` - The footer for the modal.
- `ModalHeader` - The header for the modal.
- `ModalOverlay` - The background overlay for the modal.
```tsx
import {
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay
} from "@dreamy-ui/react";
```
## 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
---
## Import
- `PinInput` - The Pin Input component with context.
- `PinInputField` - The field for the pin input.
```tsx
import { PinInput, PinInputField } from "@dreamy-ui/react";
```
## 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("69");
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
```
---
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
---
## Import
- `Popover` - The Popover component with context.
- `PopoverContent` - The content for the popover.
- `PopoverHeader` - The header for the popover.
- `PopoverBody` - The body for the popover.
- `PopoverFooter` - The footer for the popover.
- `PopoverCloseButton` - The close button for the popover.
- `PopoverAnchor` - The anchor for the popover.
- `PopoverArrow` - The arrow for the popover.
- `PopoverTrigger` - The trigger for the popover.
```tsx
import {
Popover,
PopoverContent,
PopoverHeader,
PopoverBody,
PopoverFooter,
PopoverCloseButton,
PopoverAnchor,
PopoverArrow,
PopoverTrigger
} from "@dreamy-ui/react";
```
## Usage
When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.
For arrow, you can use `hasArrow` prop or use `` component inside ``.
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
---
## Import
- `Portal` - The Portal component.
```jsx
import { Portal } from "@dreamy-ui/react/rsc";
```
## 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
---
## Import
- `ProgressCircular` - The Progress Circular component.
```jsx
import { ProgressCircular } from "@dreamy-ui/react";
```
## 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
---
## Import
- `Progress` - The Progress component.
```jsx
import { Progress } from "@dreamy-ui/react/rsc";
```
## 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
---
## Import
- `RadioCard` - A selectable card component that behaves like a Radio.
- `RadioGroup` - Group wrapper for composing multiple Radio cards.
```jsx
import { RadioCard, RadioGroup } from "@dreamy-ui/react";
```
## 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
---
## Import
- `Radio` - A Radio component.
- `RadioGroup` - Group wrapper for composing multiple Radioes.
```jsx
import { Radio, RadioGroup } from "@dreamy-ui/react";
```
## Usage
<>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: 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
---
## Import
- `Select` - The Select component with context.
- `SelectTrigger` - The trigger for the Select.
- `SelectContent` - The content for the Select as popover.
- `SelectItem` - The item for the Select.
```tsx
import {
Select,
SelectItem,
SelectContent,
SelectTrigger
} from "@dreamy-ui/react";
```
## Usage
Basic usage of Select.
```tsx
```
### Size
Select comes with 4 different sizes.
```tsx
```
### Variant
Select can be used in `outline` or `solid` variant.
```tsx
```
### 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}
))}
```tsx
{["primary", "success", "warning", "info", "error", "none"].map((scheme) => (
<>
{scheme}
))}
```
### Controlled
```tsx
export function ControlledSelect() {
const [value, setValue] = useState("strawberry");
return (
);
}
```
### Selected Strategy
You can customize how the selected value is marked as selected.
{["both", "checkmark", "background"].map((strategy) => (
<>
{strategy}
))}
```tsx
{["both", "checkmark", "background"].map((strategy) => (
<>
{strategy}
))}
```
### With option icons
You can place icons, custom children in the `SelectItem` to indicate the type of the option.
```tsx
```
### With one icon
Single icon is useful if you want to have global icon for a trigger, instead of having it on each item.
```tsx
```
### Clearable
Pass `isClearable` prop to enable clear button.
```tsx
```
### 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.
```tsx
export function MultipleSelect() {
return (
);
}
```
### Custom Multiple Selected Text
You can change the text that Select displays when multiple keys are selected by using `multipleSelectedText` prop in `SelectTrigger`.
```tsx
export function MultipleSelect() {
return (
);
}
```
### 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 (
);
}
```
### 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.
```tsx
```
### 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.
```tsx
```
---
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
---
## Import
- `Skeleton` - The Skeleton component.
- `SkeletonText` - The Skeleton for text content.
```tsx
import { Skeleton, SkeletonText } from "@dreamy-ui/react/rsc";
```
## Usage
Base usage of a Skeleton.
```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
---
## Import
- `Slider` - The Slider component with context.
- `SliderTrack` - The track for the slider.
- `SliderFilledTrack` - The filled track for the slider.
- `SliderThumb` - The thumb for the slider.
```tsx
import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from "@dreamy-ui/react";
```
## 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.
```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
```
### 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
---
## Import
- `Snippet` - The code snippet component with a copy button, that times out after 5 seconds.
```tsx
import { Snippet } from "@dreamy-ui/react";
```
## Usage
<>pnpm install @dreamy-ui/react @dreamy-ui/system
```tsx
pnpm install @dreamy-ui/react @dreamy-ui/system
```
### Variants
<>pnpm install @dreamy-ui/react @dreamy-ui/system
<>pnpm install @dreamy-ui/react @dreamy-ui/system
```tsx
pnpm install @dreamy-ui/react @dreamy-ui/system
pnpm install @dreamy-ui/react @dreamy-ui/system
```
### Sizes
<>pnpm install @dreamy-ui/react @dreamy-ui/system
<>pnpm install @dreamy-ui/react @dreamy-ui/system
<>pnpm install @dreamy-ui/react @dreamy-ui/system
```tsx
pnpm install @dreamy-ui/react @dreamy-ui/system
pnpm install @dreamy-ui/react @dreamy-ui/system
pnpm install @dreamy-ui/react @dreamy-ui/system
```
### Schemes
{["primary", "secondary", "success", "warning", "info", "error", "none"].map((scheme) => (
{scheme}
pnpm install @dreamy-ui/react @dreamy-ui/system
))}
```tsx
{["primary", "secondary", "success", "warning", "info", "error", "none"].map((scheme) => (
{scheme}
pnpm install @dreamy-ui/react @dreamy-ui/system
))}
```
### Disable Tooltip
You can disable the "Copy To Clipboard" tooltip by using the `disableTooltip` prop.
<>pnpm install @dreamy-ui/react @dreamy-ui/system
```tsx
pnpm install @dreamy-ui/react @dreamy-ui/system
```
---
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
---
## Import
- `Switch` - A Switch component.
```jsx
import { Switch } from "@dreamy-ui/react";
```
## Usage
<>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
---
## Import
Dream exports a set of Table components:
- `TableContainer` - The main container for the Table.
- `Table` - The main table component.
- `TableHeader` - The header for the Table.
- `TableBody` - The body for the Table.
- `TableCaption` - The caption for the Table.
- `TableCell` - The cell for the Table.
- `TableColumnHeader` - The column header for the Table.
- `TableRow` - The row for the Table.
```tsx
import {
TableContainer,
Table,
TableBody,
TableCaption,
TableCell,
TableColumnHeader,
TableHeader,
TableRow
} from "@dreamy-ui/react";
```
## Usage
))}
```
---
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
---
## Import
- `Tabs` - The main container for the Tabs.
- `TabList` - The list for the Tabs.
- `Tab` - The tab for the Tabs.
- `TabPanels` - The panels for the Tabs.
- `TabPanel` - The panel for the Tabs.
```tsx
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@dreamy-ui/react";
```
## 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` 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` 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` 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 `TabList` 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
---
## Import
- `Text` - The Text component.
```tsx
import { Text } from "@dreamy-ui/react/rsc";
```
## Usage
<>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
---
## Import
- `Textarea` - The Textarea component.
- `TextareaRSC` - The Textarea component with context.
```tsx
import { Textarea } from "@dreamy-ui/react";
import { TextareaRSC } from "@dreamy-ui/react/rsc";
```
## 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
```
### RSC usage
TextareaRSC is a RSC compatible component that does not use client handlers.
```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
---
## Import
- `DarkTheme` - A simple Box with locked dark theme.
- `LightTheme` - A simple Box with locked light theme.
```jsx
import { DarkTheme, LightTheme } from "@dreamy-ui/react/rsc";
```
## Usage
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
---
## Import
```tsx
import { useToast } from "@dreamy-ui/react";
```
## 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
---
## Import
- `Tooltip` - The Tooltip component.
```tsx
import { Tooltip } from "@dreamy-ui/react";
```
## 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
```
---
title: Transitions
description: Transitions allow for easy way to animate stuff.
isServerComponent: false
source: /packages/react/src/components/transitions/transitions.tsx
---
## Import
- `Collapse` - The Collapse component, that animates the height of the content.
- `Scale` - The Scale component, that scales the element.
```tsx
import { Collapse, Scale } from "@dreamy-ui/react";
```
## 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
---
## Import
- `VisuallyHidden` - The Visually Hidden component that hides content from the screen while keeping it accessible to screen readers.
- `VisuallyHiddenInput` - The `VisuallyHidden`, but an input element. Useful for hidden form data.
```tsx
import { VisuallyHidden, VisuallyHiddenInput } from "@dreamy-ui/react/rsc";
```
## 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
---
## Import
- `Wrap` - The Wrap component.
```tsx
import { Wrap } from "@dreamy-ui/react/rsc";
```
## Usage
{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}
);
}
```