<SYSTEM>This is the full developer documentation for Dreamy UI.</SYSTEM>
---
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 (
<DreamyProvider motionFeatures={domMax}>
<YourApp />
</DreamyProvider>
);
}
```
### 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 (
<Button variant="primary">
I am a Dream Button 🚀
</Button>
);
}
```
---
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:
<Snippet w="full">
<>https://dreamy-ui.com/llms.txt</>
</Snippet>
### 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 (
<DreamyProvider
motionFeatures={domMax}
colorMode={colorMode}
motionStrict
useUserPreferenceColorMode
>
{children}
</DreamyProvider>
);
}
```
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 (
<html
lang="en"
suppressHydrationWarning
{...getColorModeHTMLProps(colorMode)}
>
<body className={`${geistSans.variable} ${geistMono.variable}`}>
<Providers colorMode={colorMode}>{children}</Providers>
</body>
</html>
);
}
```
## 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 <Button>Hello World</Button>;
}
```
---
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<Route.ComponentProps["loaderData"]>("root") ?? {};
return (
<html
lang="en"
{...getColorModeHTMLProps(colorMode)}
>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<DreamyProvider
motionFeatures={domMax}
colorMode={colorMode}
motionStrict
useUserPreferenceColorMode
>
{children}
</DreamyProvider>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
...
```
## 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 <Button>Hello World</Button>;
}
```
---
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<typeof loader>("root") ?? {};
return (
<html
lang="en"
{...getColorModeHTMLProps(colorMode)}
>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<DreamyProvider
motionFeatures={domMax}
colorMode={colorMode}
motionStrict
useUserPreferenceColorMode
>
{children}
</DreamyProvider>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
...
```
## 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 <Button>Hello World</Button>;
}
```
---
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(
<DreamyProvider
motionFeatures={domMax}
motionStrict
useUserPreferenceColorMode
>
<App />
</DreamyProvider>
);
```
## 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 <Button>Dreamy UI!</Button>;
}
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.
<Wrapper>
<Text size="sm">Small text</Text>
<Text size="md">Medium text</Text>
<Text size="lg">Large text</Text>
</Wrapper>
```tsx
<Text size="sm">Small text</Text>
<Text size="md">Medium text</Text>
<Text size="lg">Large text</Text>
```
Main colors for foreground are `fg`, `fg.max`, `fg.medium` and `fg.disabled`. Use these tokens for typography.
<Wrapper>
<Text color="fg.max">Max text</Text>
<Text color="fg">Main text</Text>
<Text color="fg.medium">Secondary text</Text>
<Text color="fg.disabled">Disabled text</Text>
</Wrapper>
```tsx
<Text color="fg.max">Max text</Text>
<Text color="fg">Main text</Text>
<Text color="fg.medium">Secondary text</Text>
<Text color="fg.disabled">Disabled text</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.
<Wrapper>
<Box bg="bg">Current Background</Box>
<Box bg="bg.light">Light background</Box>
<Box bg="bg.dark">Dark background</Box>
</Wrapper>
```tsx
<Box bg="bg">Current Background</Box>
<Box bg="bg.light">Light background</Box>
<Box bg="bg.dark">Dark background</Box>
```
### 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.
<Wrapper>
<Text semibold color="primary">
<>Primary</>
</Text>
<Text semibold color="secondary">
<>Secondary</>
</Text>
</Wrapper>
```tsx
<Text semibold color="primary">Primary</Text>
<Text semibold color="secondary">Secondary</Text>
```
Dreamy exports a `success`, `warning`, `error` and `info` semantic tokens to easily signalize the status of an action.
<Wrapper>
<Text color="success" semibold>
<>Success</>
</Text>
<Text color="warning" semibold>
<>Warning</>
</Text>
<Text color="error" semibold>
<>Error</>
</Text>
<Text color="info" semibold>
<>Info</>
</Text>
</Wrapper>
```tsx
<Text color="success" semibold>Success</Text>
<Text color="warning" semibold>Warning</Text>
<Text color="error" semibold>Error</Text>
<Text color="info" semibold>Info</Text>
```
### 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.
<Wrapper>
<Flex
wrapped
gap={2}
css={{
"& > *": {
p: 2
}
}}
>
<Box bg="alpha.50">Alpha 50</Box>
<Box bg="alpha.100">Alpha 100</Box>
<Box bg="alpha.200">Alpha 200</Box>
<Box bg="alpha.300">Alpha 300</Box>
<Box bg="alpha.400">Alpha 400</Box>
<Box bg="alpha.500">Alpha 500</Box>
<Box bg="alpha.600">Alpha 600</Box>
<Box bg="alpha.700">Alpha 700</Box>
<Box bg="alpha.800">Alpha 800</Box>
<Box bg="alpha.900">Alpha 900</Box>
<Box bg="alpha.950">Alpha 950</Box>
</Flex>
</Wrapper>
```tsx
<Box bg="alpha.50">Alpha 50</Box>
<Box bg="alpha.100">Alpha 100</Box>
<Box bg="alpha.200">Alpha 200</Box>
<Box bg="alpha.300">Alpha 300</Box>
<Box bg="alpha.400">Alpha 400</Box>
<Box bg="alpha.500">Alpha 500</Box>
<Box bg="alpha.600">Alpha 600</Box>
<Box bg="alpha.700">Alpha 700</Box>
<Box bg="alpha.800">Alpha 800</Box>
<Box bg="alpha.900">Alpha 900</Box>
<Box bg="alpha.950">Alpha 950</Box>
```
### 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`.
<Wrapper>
<Flex col gap={2}>
<Text semibold>Semantic tokens</Text>
<Group>
<Box rounded="l05" p={2} border="1px solid" borderColor="border">
<>Extra Small rounded</>
</Box>
<Box rounded="l1" p={2} border="1px solid" borderColor="border">
<>Small rounded</>
</Box>
<Box rounded="l2" p={2} border="1px solid" borderColor="border">
<>Medium rounded</>
</Box>
<Box rounded="l3" p={2} border="1px solid" borderColor="border">
<>Large rounded</>
</Box>
</Group>
<Group>
<Box rounded="p-2" p={2} border="1px solid" borderColor="border">
<Button>Padding 2</Button>
</Box>
<Box rounded="p-3" p={3} border="1px solid" borderColor="border">
<Button>Padding 3</Button>
</Box>
<Box rounded="p-4" p={4} border="1px solid" borderColor="border">
<Button>Padding 4</Button>
</Box>
<Box rounded="p-5" p={5} border="1px solid" borderColor="border">
<Button>Padding 5</Button>
</Box>
<Box rounded="p-6" p={6} border="1px solid" borderColor="border">
<Button>Padding 6</Button>
</Box>
</Group>
</Flex>
<Flex col gap={2} mt={4}>
<Text semibold>Design tokens</Text>
<Wrap>
<Box rounded="none" p={2} border="1px solid" borderColor="border" nowrap>
<>None rounded</>
</Box>
<Box rounded="xs" p={2} border="1px solid" borderColor="border" nowrap>
<>XS rounded</>
</Box>
<Box rounded="sm" p={2} border="1px solid" borderColor="border" nowrap>
<>SM rounded</>
</Box>
<Box rounded="md" p={2} border="1px solid" borderColor="border" nowrap>
<>MD rounded</>
</Box>
<Box rounded="lg" p={2} border="1px solid" borderColor="border" nowrap>
<>LG rounded</>
</Box>
<Box rounded="xl" p={2} border="1px solid" borderColor="border" nowrap>
<>XL rounded</>
</Box>
<Box rounded="2xl" p={2} border="1px solid" borderColor="border" nowrap>
<>2XL rounded</>
</Box>
<Box rounded="3xl" p={2} border="1px solid" borderColor="border" nowrap>
<>3XL rounded</>
</Box>
<Box rounded="full" p={2} border="1px solid" borderColor="border" nowrap>
<>Full rounded</>
</Box>
</Wrap>
</Flex>
</Wrapper>
```tsx
<Flex col gap={2}>
<Text semibold>Semantic tokens</Text>
<Group>
<Box rounded="l05" p={2} border="1px solid" borderColor="border">
Extra Small rounded
</Box>
<Box rounded="l1" p={2} border="1px solid" borderColor="border">
Small rounded
</Box>
<Box rounded="l2" p={2} border="1px solid" borderColor="border">
Medium rounded
</Box>
<Box rounded="l3" p={2} border="1px solid" borderColor="border">
Large rounded
</Box>
</Group>
<Group>
<Box rounded="p-2" p={2} border="1px solid" borderColor="border">
<Button>Padding 2</Button>
</Box>
<Box rounded="p-3" p={3} border="1px solid" borderColor="border">
<Button>Padding 3</Button>
</Box>
<Box rounded="p-4" p={4} border="1px solid" borderColor="border">
<Button>Padding 4</Button>
</Box>
<Box rounded="p-5" p={5} border="1px solid" borderColor="border">
<Button>Padding 5</Button>
</Box>
<Box rounded="p-6" p={6} border="1px solid" borderColor="border">
<Button>Padding 6</Button>
</Box>
</Group>
</Flex>
<Flex col gap={2} mt={4}>
<Text semibold>Design tokens</Text>
<Wrap>
<Box rounded="none" p={2} border="1px solid" borderColor="border" nowrap>
None rounded
</Box>
<Box rounded="xs" p={2} border="1px solid" borderColor="border" nowrap>
XS rounded
</Box>
<Box rounded="sm" p={2} border="1px solid" borderColor="border" nowrap>
SM rounded
</Box>
<Box rounded="md" p={2} border="1px solid" borderColor="border" nowrap>
MD rounded
</Box>
<Box rounded="lg" p={2} border="1px solid" borderColor="border" nowrap>
LG rounded
</Box>
<Box rounded="xl" p={2} border="1px solid" borderColor="border" nowrap>
XL rounded
</Box>
<Box rounded="2xl" p={2} border="1px solid" borderColor="border" nowrap>
2XL rounded
</Box>
<Box rounded="3xl" p={2} border="1px solid" borderColor="border" nowrap>
3XL rounded
</Box>
<Box rounded="full" p={2} border="1px solid" borderColor="border" nowrap>
Full rounded
</Box>
</Wrap>
</Flex>
```
### Other tokens
Using other blur, shadows, durations, etc.
When building your app, use tokens for consistency.
```tsx
<Box blur="sm">Blurred box</Box>
<Box shadow="lg">Shadowed box</Box>
<Box transition="ease-in-out {durations.fast}">Fast transition</Box>
```
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 (
<html
lang="en"
suppressHydrationWarning
{...getColorModeHTMLProps(colorMode)}
>
<head>
...
</head>
<body>
<DreamyProvider
motionFeatures={motionFeatures}
useUserPreferenceColorMode
motionStrict
>
{children}
</DreamyProvider>
</body>
</html>
);
}
```
## Fastest way to center a div
Dreamy UI provides various utilities to use, like `center`, which is a `alignItems="center"` and `justifyContent="center"`.
<Wrapper>
<Flex
center
h="100px"
p={4}
bg={{
base: "bg.dark",
_dark: "bg.light"
}}
color="bg"
rounded="l1"
w="full"
>
<Text>Centered</Text>
</Flex>
</Wrapper>
```tsx {1}
<Flex center>
<Text>Centered</Text>
</Flex>
```
## Making Forms
The best practice is to use `<Field />` component to wrap your form elements with nice label, help text and error message. See [Field docs](/docs/components/field) page to learn more.
<Wrapper>
<Field name="name" isRequired>
<FieldLabel>Name</FieldLabel>
<Input />
<FieldHelpText>
<>Enter your preferred name</>
</FieldHelpText>
<FieldError>
<>Name cannot be empty</>
</FieldError>
</Field>
</Wrapper>
```tsx
<Field name="name" isRequired>
<FieldLabel>Name</FieldLabel>
<Input />
<FieldHelpText>Enter your preferred name</FieldHelpText>
<FieldError>Name cannot be empty</FieldError>
</Field>
```
Alternatively use props in Field for label, help text and error.
```tsx
<Field
isRequired
name="name"
label="Name"
helpText="Enter your preferred name"
error="Name cannot be empty"
>
<Input />
</Field>
```
## 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"
<Box full nowrap relative semibold>
Boolean Box
</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.
<Wrapper>
<Box as="section">
<>I render as section. Inspect to see the element type.</>
</Box>
<LinkButton />
<LinkButton />
</Wrapper>
```tsx
<Box as="section">
<>I render as section. Inspect to see the element type.</>
</Box>
<Button asChild>
<a href="https://google.com">Google</a>
</Button>
<Button asComp={<a href="https://google.com" />}>
Google
</Button>
```
## Customization
If you dislike any of the token, component recipe or default values of the patterns like `<Flex />`, 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 <a class="fw_semibold trs_colors hover:td_underline c_secondary" href="/discord">Discord</a>.
---
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
<Wrapper>
<Accordion>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Wrapper>
```tsx
<Accordion>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
```
### Allow Multiple Open
You can allow multiple open items by using the `allowMultiple` prop.
<Wrapper>
<Accordion allowMultiple>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Wrapper>
```tsx
<Accordion allowMultiple>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
```
### Allow Toggle
You can allow toggle single item by using the `allowToggle` prop. With `allowMultiple` prop, it will be always possible to toggle them.
<Wrapper>
<Accordion allowToggle>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Wrapper>
```tsx
<Accordion allowToggle>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
```
### Controlled
You can control the Accordion by using the `onValueChange` prop.
<Wrapper>
<ControlledAccordion />
</Wrapper>
```tsx
export function ControlledAccordion() {
const [value, setValue] = useState<number | number[]>(0);
return (
<Accordion
index={value}
onChange={(i) => setValue(i)}
>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
);
}
```
### With icon
<Wrapper>
<Accordion>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>
<HStack>
<Icon asComp={<PiConfetti />} color="fg.medium" />
<Text>Item {index + 1}</Text>
</HStack>
</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Wrapper>
```tsx
<Accordion>
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>
<HStack>
<Icon as={PiConfetti} color="fg.medium" />
<Text>Item {index + 1}</Text>
</HStack>
</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
```
### Variants
You can change the variant of the Accordion by using the `variant` prop.
<Wrapper>
<VStack w="full" gap={6}>
<Flex col gap={2}>
<Text bold>Outline</Text>
<Accordion variant="outline">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
<Flex col gap={2}>
<Text bold>Solid</Text>
<Accordion variant="solid">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
<Flex col gap={2}>
<Text bold>Subtle</Text>
<Accordion variant="subtle">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
</VStack>
</Wrapper>
```tsx
<VStack w="full" gap={6}>
<Flex col gap={2}>
<Text bold>Outline</Text>
<Accordion variant="outline">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
<Flex col gap={2}>
<Text bold>Solid</Text>
<Accordion variant="solid">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
<Flex col gap={2}>
<Text bold>Subtle</Text>
<Accordion variant="subtle">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Flex>
</VStack>
```
### Sizes
You can change the size of the Accordion by using the `size` prop.
<Wrapper>
<Text bold mt={4}>Small</Text>
<Accordion size="sm">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
<Text bold mt={4}>Medium</Text>
<Accordion size="md">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
<Text bold mt={4}>Large</Text>
<Accordion size="lg">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
</Wrapper>
```tsx
<Text bold>Small</Text>
<Accordion size="sm">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
<Text bold>Medium</Text>
<Accordion size="md">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
<Text bold>Large</Text>
<Accordion size="lg">
{Array.from({ length: 3 }).map((_, index) => (
<AccordionItem key={index}>
<AccordionTrigger>Item {index + 1}</AccordionTrigger>
<AccordionContent>Hi!</AccordionContent>
</AccordionItem>
))}
</Accordion>
```
---
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
<Wrapper>
<Alert
status="warning"
title="Warning"
description="Dream may boost Developer efficiency."
/>
</Wrapper>
```tsx
<Alert
status="warning"
title="Warning"
description="Dream may boost Developer efficiency."
/>
```
### Status
The `status` prop changes the color of the alert and the icon.
<Wrapper>
<VStack spacing={3} w="100%">
<Alert status='error' title="Error" description="There has been an error!" />
<Alert status='success' title="Success" description="Your visit has been created!" />
<Alert status='warning' title="Warning" description="We may have some issues." />
<Alert status='info' title="Info" description="Your credit card information will expire soon. Please update." />
</VStack>
</Wrapper>
```tsx
<VStack spacing={3} w="100%">
<Alert status='error' title="Error" description="There has been an error!" />
<Alert status='success' title="Success" description="Your visit has been created!" />
<Alert status='warning' title="Warning" description="We may have some issues." />
<Alert status='info' title="Info" description="Your credit card information will expire soon. Please update." />
</VStack>
```
---
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 <a href="https://www.pexels.com/photo/woman-wearing-gray-sweater-holding-clear-umbrella-891458/">Quang Anh Ha Nguyen</a>
<Wrapper>
<Avatar
src="/asian-woman.webp"
name="Woman"
/>
</Wrapper>
```tsx
<Avatar
src="/asian-woman.webp"
name="Woman"
/>
```
### Sizes
You can set the size of the avatar by using the `size` prop.
<Wrapper>
<HStack>
<Avatar
size="sm"
src="/asian-woman.webp"
name="Woman"
/>
<Avatar
size="md"
src="/asian-woman.webp"
name="Woman"
/>
<Avatar
size="lg"
src="/asian-woman.webp"
name="Woman"
/>
</HStack>
</Wrapper>
```tsx
<HStack>
<Avatar
size="sm"
src="/asian-woman.webp"
name="Woman"
/>
<Avatar
size="md"
src="/asian-woman.webp"
name="Woman"
/>
<Avatar
size="lg"
src="/asian-woman.webp"
name="Woman"
/>
</HStack>
```
### 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.
<Wrapper>
<AvatarGroup arGroup maxAvatars={4}>
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
</AvatarGroup>
</Wrapper>
```tsx
<AvatarGroup maxAvatars={4}>
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
<Avatar name="Dream" />
</AvatarGroup>
```
---
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
<Wrapper>
<Badge>Prime</Badge>
</Wrapper>
```tsx
<Badge>Prime</Badge>
```
### Variants
You can change the variant of the Badge by using the `variant` prop.
<Wrapper>
<HStack>
<Badge variant="outline">Outline</Badge>
<Badge variant="subtle">Subtle</Badge>
</HStack>
</Wrapper>
```tsx
<HStack>
<Badge variant="outline">Outline</Badge>
<Badge variant="subtle">Subtle</Badge>
</HStack>
```
### (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.
<Wrapper>
<HStack>
<Badge scheme="primary">Primary</Badge>
<Badge scheme="secondary">Secondary</Badge>
<Badge scheme="success">Success</Badge>
<Badge scheme="warning">Warning</Badge>
<Badge scheme="error">Error</Badge>
<Badge scheme="info">Info</Badge>
<Badge scheme="none">None</Badge>
</HStack>
</Wrapper>
```tsx
<HStack>
<Badge scheme="primary">Primary</Badge>
<Badge scheme="secondary">Secondary</Badge>
<Badge scheme="success">Success</Badge>
<Badge scheme="warning">Warning</Badge>
<Badge scheme="error">Error</Badge>
<Badge scheme="info">Info</Badge>
<Badge scheme="none">None</Badge>
</HStack>
```
### Schemes with variants
You can combine the `variant` and `scheme` props to create a badge with different variants and colors.
<Wrapper>
<HStack>
<Badge variant="outline" scheme="primary">
<>Primary</>
</Badge>
<Badge variant="outline" scheme="secondary">
<>Secondary</>
</Badge>
<Badge variant="outline" scheme="success">
<>Success</>
</Badge>
<Badge variant="outline" scheme="warning">
<>Warning</>
</Badge>
<Badge variant="outline" scheme="error">
<>Error</>
</Badge>
<Badge variant="outline" scheme="info">
<>Info</>
</Badge>
<Badge variant="outline" scheme="none">
<>None</>
</Badge>
</HStack>
</Wrapper>
```tsx
<HStack>
<Badge variant="outline" scheme="primary">
Primary
</Badge>
<Badge variant="outline" scheme="secondary">
Secondary
</Badge>
<Badge variant="outline" scheme="success">
Success
</Badge>
<Badge variant="outline" scheme="warning">
Warning
</Badge>
<Badge variant="outline" scheme="error">
Error
</Badge>
<Badge variant="outline" scheme="info">
Info
</Badge>
<Badge variant="outline" scheme="none">
None
</Badge>
</HStack>
```
---
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
<Wrapper>
<Box
bg="green.400"
color="black"
fontWeight={500}
p={3}
rounded="l2"
w="250px"
h="100px"
>
<>This is a box</>
</Box>
</Wrapper>
```jsx
<Box
bg="green.400"
color="black"
fontWeight={500}
p={3}
rounded="l2"
w="250px"
h="100px"
>
This is a box
</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
<Wrapper>
<Button w="fit-content">Button</Button>
</Wrapper>
```tsx
<Button>Button</Button>
```
### Variants
You can change the variant of the Button by using the `variant` prop.
<Wrapper>
<Flex wrapped gap={2}>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={2}>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
</Flex>
```
### Sizes
You can set the size of the Button by using the `size` prop.
<Wrapper>
<Flex wrapped gap={2}>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={2}>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
</Flex>
```
### Color
When using `solid`, `outline` and `ghost` variants, the background will follow the current color.
<Wrapper>
<Flex wrapped gap={2}>
<Button variant="solid" color="success">Solid success</Button>
<Button variant="outline" color="warning">Outline warning</Button>
<Button variant="ghost" color="error">Ghost error</Button>
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={2}>
<Button variant="solid" color="success">Solid success</Button>
<Button variant="outline" color="warning">Outline warning</Button>
<Button variant="ghost" color="error">Ghost error</Button>
</Flex>
```
### Using Icons
You can add icons on left or right side of the Button by using the `leftIcon` or `rightIcon` prop.
**Left Icon**
<Wrapper>
<Flex wrapped gap={2}>
<Button leftIcon={<IoClose />}>Cancel</Button>
<Button leftIcon={<HiOutlineMail />} variant="primary">Home</Button>
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={2}>
<Button leftIcon={<IoClose />}>Cancel</Button>
<Button leftIcon={<HiOutlineMail />} variant="primary">Home</Button>
</Flex>
```
**Right Icon**
<Wrapper>
<Flex wrapped gap={2}>
<Button rightIcon={<IoClose />}>Cancel</Button>
<Button rightIcon={<HiOutlineMail />} variant="primary">Home</Button>
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={2}>
<Button rightIcon={<IoClose />}>Cancel</Button>
<Button rightIcon={<HiOutlineMail />} variant="primary">Home</Button>
</Flex>
```
### Disabled
You can disable the Button by using the `isDisabled` prop.
<Wrapper>
<Button w='fit' isDisabled>Disabled</Button>
</Wrapper>
```tsx
<Button isDisabled>Disabled</Button>
```
### Loading State
You can show the loading state of the Button by using the `isLoading` prop.
<Wrapper>
<Button w="fit-content" isLoading variant="primary">Loading</Button>
</Wrapper>
```tsx
<Button isLoading variant="primary">Loading</Button>
```
**With label**
<Wrapper>
<Button w="fit-content" isLoading variant="primary" loadingText="Loading">Loading</Button>
</Wrapper>
```tsx
<Button isLoading variant="primary" loadingText="Loading">Loading</Button>
```
**With label and spinner on the right**
<Wrapper>
<Button w="fit-content" isLoading variant="primary" loadingText="Loading" spinnerPlacement="end">Loading</Button>
</Wrapper>
```tsx
<Button isLoading variant="primary" loadingText="Loading" spinnerPlacement="end">Loading</Button>
```
### 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.
<Wrapper>
<Button w="fit-content" disableRipple>Disabled Ripple</Button>
</Wrapper>
```tsx
<Button w="fit-content" disableRipple>Disabled Ripple</Button>
```
### Group
Use the `Group` component to group multiple Buttons together.
<Wrapper>
<Group attached>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
</Wrapper>
```tsx
<Group attached>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
```
### 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:
<Wrapper>
<Group>
<Button variant="glass">Glass Default</Button>
<Button variant="glass" color="primary">Glass Primary</Button>
<Button variant="glass" color="success">Glass Success</Button>
</Group>
</Wrapper>
```tsx
<Group>
<Button variant="glass">Glass Default</Button>
<Button variant="glass" color="primary">Glass Primary</Button>
<Button variant="glass" color="success">Glass Success</Button>
</Group>
```
---
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.
<Wrapper p={10}>
<Card maxW="sm">
<CardHeader>
<CardTitle>Card Title</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>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.</>
</CardDescription>
</CardBody>
</Card>
</Wrapper>
```tsx
<Card maxW="sm">
<CardHeader>
<CardTitle>Card Title</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>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.</>
</CardDescription>
</CardBody>
</Card>
```
### Variants
You can change the variant of the card by using the `variant` prop.
<Wrapper p={10}>
<Card variant="elevated" maxW="sm">
<CardHeader>
<CardTitle>Elevated</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>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.</>
</CardDescription>
</CardBody>
</Card>
<Card variant="outline" maxW="sm">
<CardHeader>
<CardTitle>Outline</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>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.</>
</CardDescription>
</CardBody>
</Card>
</Wrapper>
```tsx
<Card variant="elevated" maxW="sm">
<CardHeader>
<CardTitle>Elevated</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
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.
</CardDescription>
</CardBody>
</Card>
<Card variant="outline" maxW="sm">
<CardHeader>
<CardTitle>Outline</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
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.
</CardDescription>
</CardBody>
</Card>
```
### With Divider
Example of a card with a dividers layout.
<Wrapper p={10}>
<Card maxW="sm">
<CardHeader row alignItems="center" pb={6} gap={4}>
<Image
alt="Dreamy UI logo"
src="https://dreamy-ui.com/dream.svg"
boxSize={"10"}
/>
<Flex column align="start">
<CardTitle>Dreamy UI</CardTitle>
<Text color="fg.medium" size="sm">dreamy-ui.com</Text>
</Flex>
</CardHeader>
<Divider />
<CardBody>
<CardDescription>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</CardDescription>
</CardBody>
<Divider />
<CardFooter pt={6}>
<Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
<>Visit source code on GitHub <Icon h={4} asComp={<HiExternalLink />} /></>
</Link>
</CardFooter>
</Card>
</Wrapper>
```tsx
<Card maxW="sm">
<CardHeader row alignItems="center" pb={6} gap={4}>
<Image
alt="Dreamy UI logo"
src="https://dreamy-ui.com/dream.svg"
boxSize={"10"}
/>
<Flex column align="start">
<CardTitle>Dreamy UI</CardTitle>
<Text color="fg.medium" size="sm">dreamy-ui.com</Text>
</Flex>
</CardHeader>
<Divider />
<CardBody>
<CardDescription>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</CardDescription>
</CardBody>
<Divider />
<CardFooter pt={6}>
<Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
Visit source code on GitHub <Icon h={4} as={HiExternalLink} />
</Link>
</CardFooter>
</Card>
```
### Sizes
Example of a card with different sizes using the `size` prop.
<Wrapper p={10}>
<Card size="sm" maxW="sm">
<CardHeader>
<CardTitle>Small Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>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.</>
</CardDescription>
</CardBody>
</Card>
<Card size="md" maxW="sm">
<CardHeader>
<CardTitle>Medium Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>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.</>
</CardDescription>
</CardBody>
</Card>
<Card size="lg" maxW="sm">
<CardHeader>
<CardTitle>Large Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
<>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.</>
</CardDescription>
</CardBody>
</Card>
</Wrapper>
```tsx
<Card size="sm" maxW="sm">
<CardHeader>
<CardTitle>Small Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
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.
</CardDescription>
</CardBody>
</Card>
<Card size="md" maxW="sm">
<CardHeader>
<CardTitle>Medium Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
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.
</CardDescription>
</CardBody>
</Card>
<Card size="lg" maxW="sm">
<CardHeader>
<CardTitle>Large Card</CardTitle>
</CardHeader>
<CardBody>
<CardDescription>
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.
</CardDescription>
</CardBody>
</Card>
```
### With form
Example of a card with a multiple fields and a buttons.
> info: Tip: `full` is an alias for `width="full"`.
<Wrapper p={10}>
<Card w="md">
<CardHeader>
<CardTitle>Form Card</CardTitle>
<CardDescription>
<>Fill in the form below to create an account</>
</CardDescription>
</CardHeader>
<CardBody gap={4}>
<Field label="Email" full>
<Input name="email" placeholder="Email" full />
</Field>
<Field label="Password" full>
<Input name="password" placeholder="Password" full />
</Field>
</CardBody>
<CardFooter justifyContent="end">
<Button variant="outline">Cancel</Button>
<Button variant="primary">Sign in</Button>
</CardFooter>
</Card>
</Wrapper>
```tsx
<Card w="md">
<CardHeader>
<CardTitle>Form Card</CardTitle>
<CardDescription>
Fill in the form below to create an account
</CardDescription>
</CardHeader>
<CardBody gap={4}>
<Field label="Email" full>
<Input name="email" placeholder="Email" full />
</Field>
<Field label="Password" full>
<Input name="password" placeholder="Password" full />
</Field>
</CardBody>
<CardFooter justifyContent="end">
<Button variant="outline">Cancel</Button>
<Button variant="primary">Sign in</Button>
</CardFooter>
</Card>
```
### As Link
Example of a card as a link, that navigates to a different page.
<Wrapper p={10}>
{ /* not using anchor element, since MDX transforms it with a custom component */}
<Card asComp={<RemixLink target="_blank" to="https://github.com/dreamy-ui/dreamy-ui" />} maxW="sm">
<CardHeader row alignItems="center" gap={4}>
<Image
alt="Dreamy UI logo"
src="https://dreamy-ui.com/dream.svg"
boxSize={"10"}
/>
<Flex column align="start">
<CardTitle>Dreamy UI</CardTitle>
<Text color="fg.medium" size="sm">dreamy-ui.com</Text>
</Flex>
</CardHeader>
<CardBody>
<CardDescription>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</CardDescription>
</CardBody>
<CardFooter>
<Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
<>Star on GitHub <Icon h={4} asComp={<HiExternalLink />} /></>
</Link>
</CardFooter>
</Card>
</Wrapper>
```tsx
<Card asComp={<a target="_blank" to="https://github.com/dreamy-ui/dreamy-ui" />} maxW="sm">
<CardHeader row alignItems="center" gap={4}>
<Image
alt="Dreamy UI logo"
src="https://dreamy-ui.com/dream.svg"
boxSize={"10"}
/>
<Flex column align="start">
<CardTitle>Dreamy UI</CardTitle>
<Text color="fg.medium" size="sm">dreamy-ui.com</Text>
</Flex>
</CardHeader>
<CardBody>
<CardDescription>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</CardDescription>
</CardBody>
<CardFooter>
<Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
Star on GitHub <Icon h={4} asComp={<HiExternalLink />} />
</Link>
</CardFooter>
</Card>
```
---
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
<Wrapper>
<VStack w='250px'>
<CheckboxCard title="Default Checkbox Card" description="This is a description" />
</VStack>
</Wrapper>
```tsx
<CheckboxCard title="Default Checkbox Card" description="This is a description" />
```
### Variant
Change the variant of the checkbox card.
<Wrapper>
<VStack w='250px'>
<CheckboxCard variant={"outline"} title={"Outline variant"} description={`Description for Outline variant`} />
<CheckboxCard variant={"subtle"} title={"Subtle variant"} description={`Description for Subtle variant`} />
</VStack>
</Wrapper>
```tsx
<VStack w='250px'>
<CheckboxCard variant={"outline"} title={"Outline variant"} description={`Description for Outline variant`} />
<CheckboxCard variant={"subtle"} title={"Subtle variant"} description={`Description for Subtle variant`} />
</VStack>
```
### Checkbox variant
Change the checkbox variant of the checkbox card.
<Wrapper>
<VStack w='250px'>
<CheckboxCard checkboxVariant={"solid"} title={"Solid variant"} description={`Description for Solid variant`} />
<CheckboxCard checkboxVariant={"outline"} title={"Outline variant"} description={`Description for Outline variant`} />
</VStack>
</Wrapper>
```tsx
<VStack w='250px'>
<CheckboxCard checkboxVariant={"solid"} title={"Solid variant"} description={`Description for Solid variant`} />
<CheckboxCard checkboxVariant={"outline"} title={"Outline variant"} description={`Description for Outline variant`} />
</VStack>
```
### Scheme
Change the color scheme of the checkbox card.
<Wrapper>
<VStack w='250px'>
<CheckboxCard scheme={"primary"} defaultChecked title={"Primary"} description={`Description for Primary`} />
<CheckboxCard scheme={"secondary"} defaultChecked title={"Secondary"} description={`Description for Secondary`} />
<CheckboxCard scheme={"success"} defaultChecked title={"Success"} description={`Description for Success`} />
<CheckboxCard scheme={"warning"} defaultChecked title={"Warning"} description={`Description for Warning`} />
<CheckboxCard scheme={"error"} defaultChecked title={"Error"} description={`Description for Error`} />
<CheckboxCard scheme={"info"} defaultChecked title={"Info"} description={`Description for Info`} />
</VStack>
</Wrapper>
```tsx
<VStack w='250px'>
<CheckboxCard scheme={"primary"} defaultChecked title={"Primary"} description={`Description for Primary`} />
<CheckboxCard scheme={"secondary"} defaultChecked title={"Secondary"} description={`Description for Secondary`} />
<CheckboxCard scheme={"success"} defaultChecked title={"Success"} description={`Description for Success`} />
<CheckboxCard scheme={"warning"} defaultChecked title={"Warning"} description={`Description for Warning`} />
<CheckboxCard scheme={"error"} defaultChecked title={"Error"} description={`Description for Error`} />
<CheckboxCard scheme={"info"} defaultChecked title={"Info"} description={`Description for Info`} />
</VStack>
```
### Size
Change the checkbox card size.
<Wrapper>
<VStack w='250px'>
<CheckboxCard size={"sm"} title={"Small"} description={`Description for Small`} />
<CheckboxCard size={"md"} title={"Medium"} description={`Description for Medium`} />
<CheckboxCard size={"lg"} title={"Large"} description={`Description for Large`} />
</VStack>
</Wrapper>
```tsx
<VStack w='250px'>
<CheckboxCard size={"sm"} title={"Small"} description={`Description for Small`} />
<CheckboxCard size={"md"} title={"Medium"} description={`Description for Medium`} />
<CheckboxCard size={"lg"} title={"Large"} description={`Description for Large`} />
</VStack>
```
### Controlled
Use `isChecked` and `onChange`, `onChangeValue` to control the checkbox card.
<Wrapper>
<ControlledCheckboxCard />
</Wrapper>
```tsx
export function ControlledCheckboxCard() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
<Text>Selected: {isChecked ? "true" : "false"}</Text>
<VStack w="250px">
<CheckboxCard
title="Controlled"
description="Description for Controlled"
isChecked={isChecked}
onChangeValue={setIsChecked}
/>
</VStack>
</>
);
}
```
### Checkbox Group
Use `CheckboxGroup` to compose multiple checkboxes or checkbox cards.
<Wrapper>
<CheckboxCardGroupControl />
</Wrapper>
```tsx
function CheckboxCardGroupControl() {
const [value, setValue] = useState<Array<string | number>>(["1"]);
return (
<>
<Text>Selected: {value.join(", ")}</Text>
<CheckboxGroup
value={value}
onChange={setValue}
>
<CheckboxCard value="1" title="Option 1" description="Description for Option 1" />
<CheckboxCard value="2" title="Option 2" description="Description for Option 2" />
<CheckboxCard value="3" title="Option 3" description="Description for Option 3" />
</CheckboxGroup>
</>
);
}
```
---
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
<Wrapper>
<Checkbox>
<>Default</>
</Checkbox>
</Wrapper>
```tsx
<Checkbox>
Default
</Checkbox>
```
### Scheme
Change the color scheme of the checkbox.
<Wrapper>
<Checkbox scheme={"primary"} defaultChecked>Primary</Checkbox>
<Checkbox scheme={"secondary"} defaultChecked>Secondary</Checkbox>
<Checkbox scheme={"success"} defaultChecked>Success</Checkbox>
<Checkbox scheme={"warning"} defaultChecked>Warning</Checkbox>
<Checkbox scheme={"error"} defaultChecked>Error</Checkbox>
<Checkbox scheme={"info"} defaultChecked>Info</Checkbox>
<Checkbox scheme={"none"} defaultChecked>None</Checkbox>
</Wrapper>
```tsx
<Checkbox scheme={"primary"} defaultChecked>Primary</Checkbox>
<Checkbox scheme={"secondary"} defaultChecked>Secondary</Checkbox>
<Checkbox scheme={"success"} defaultChecked>Success</Checkbox>
<Checkbox scheme={"warning"} defaultChecked>Warning</Checkbox>
<Checkbox scheme={"error"} defaultChecked>Error</Checkbox>
<Checkbox scheme={"info"} defaultChecked>Info</Checkbox>
<Checkbox scheme={"none"} defaultChecked>None</Checkbox>
```
### Variant
Change the appearance variant of the checkbox.
<Wrapper>
<Checkbox variant={"outline"}>Outline</Checkbox>
<Checkbox variant={"solid"}>Solid</Checkbox>
</Wrapper>
```tsx
<Checkbox variant={"outline"}>Outline</Checkbox>
<Checkbox variant={"solid"}>Solid</Checkbox>
```
### Size
Change the checkbox size.
<Wrapper>
<Checkbox size={"sm"}>Small</Checkbox>
<Checkbox size={"md"}>Medium</Checkbox>
<Checkbox size={"lg"}>Large</Checkbox>
</Wrapper>
```tsx
<Checkbox size={"sm"}>Small</Checkbox>
<Checkbox size={"md"}>Medium</Checkbox>
<Checkbox size={"lg"}>Large</Checkbox>
```
### Controlled
Use `isChecked` and `onChange`, `onChangeValue` to control the checkbox.
<Wrapper>
<ControlledCheckbox />
</Wrapper>
```tsx
export function ControlledCheckbox() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
<Text>Selected: {isChecked ? "true" : "false"}</Text>
<Checkbox
isChecked={isChecked}
onChangeValue={setIsChecked}
>
Controlled
</Checkbox>
</>
);
}
```
### Checkbox group
Use `CheckboxGroup` to compose multiple checkboxes. Use `value` and `onChange` in `<CheckboxGroup />` 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.
<Wrapper>
<CheckboxGroupControl />
</Wrapper>
```tsx
function CheckboxGroupControl() {
const [value, setValue] = useState<Array<string | number>>(["1"]);
return (
<>
<Text>Selected: {value.join(", ")}</Text>
<CheckboxGroup
value={value}
onChange={setValue}
>
<Checkbox value="1">Option 1</Checkbox>
<Checkbox value="2">Option 2</Checkbox>
<Checkbox value="3">Option 3</Checkbox>
</CheckboxGroup>
</>
);
}
```
---
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
<Wrapper>
<Divider />
</Wrapper>
```tsx
<Divider />
```
### Orientation
You can change the orientation of the Divider by using the `orientation` prop.
<Wrapper>
**Horizontal**
<Divider orientation="horizontal" />
**Vertical**
<Divider orientation="vertical" h="100px" />
</Wrapper>
```tsx
**Horizontal**
<Divider orientation="horizontal" />
**Vertical**
<Divider orientation="vertical" h="100px" />
```
---
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.
<Wrapper>
<Editable defaultValue="Meow" placeholder="Enter an animal sound">
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
</Wrapper>
```tsx
<Editable defaultValue="Meow" placeholder="Enter an animal sound">
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
```
### 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.
<Wrapper>
<Editable defaultValue="Meow" placeholder="Enter an animal sound" useDoubleClick>
<EditablePreview />
<EditableInput />
</Editable>
</Wrapper>
```tsx
<Editable defaultValue="Meow" placeholder="Enter an animal sound" useDoubleClick>
<EditablePreview />
<EditableInput />
</Editable>
```
### Controlled
Use `value` and `onChange` to control the editable value.
<Wrapper>
<ControlledEditable />
</Wrapper>
```tsx
function ControlledEditable() {
const [value, setValue] = useState("Meow");
return (
<Editable value={value} onChange={setValue}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
);
}
```
### Accessing internal state
<Wrapper>
<Editable defaultValue="Meow" placeholder="Enter an animal sound">
{({ isEditing, onSubmit, onCancel, onEdit }) => {
return (
<>
<Text>isEditing: {isEditing ? "true" : "false"}</Text>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</>
);
}}
</Editable>
</Wrapper>
```tsx
<Editable defaultValue="Meow" placeholder="Enter an animal sound">
{({ isEditing, onSubmit, onCancel, onEdit }) => {
return (
<>
<Text>isEditing: {isEditing ? "true" : "false"}</Text>
<EditablePreview />
<EditableInput />
</>
);
}}
</Editable>
```
### Start with edit view
Use `startWithEditView` to use edit state by default. Click "Render" to render the editable.
<Wrapper>
<StartWithEditViewEditable />
</Wrapper>
```tsx
<Editable defaultValue="Meow" placeholder="Enter an animal sound" startWithEditView>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
```
### 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.
<Wrapper>
<Editable defaultValue="Meow" placeholder="Enter an animal sound" isPreviewFocusable={false}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
</Wrapper>
```tsx
<Editable defaultValue="Meow" placeholder="Enter an animal sound" isPreviewFocusable={false}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
```
### 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.
<Wrapper>
<Editable defaultValue="Meow" placeholder="Enter an animal sound" submitOnBlur={false}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
</Wrapper>
```tsx
<Editable defaultValue="Meow" placeholder="Enter an animal sound" submitOnBlur={false}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
```
### onCancel, onSubmit, onEdit, onBlur
Use `onCancel`, `onSubmit`, `onEdit`, `onBlur` to handle the editable events. Open the console
<Wrapper>
<Editable
defaultValue="Meow"
placeholder="Enter an animal sound"
onCancel={() => toast({ title: "onCancel" })}
onSubmit={() => toast({ title: "onSubmit" })}
onEdit={() => toast({ title: "onEdit" })}
onBlur={() => toast({ title: "onBlur" })}
>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
</Wrapper>
```tsx
<Editable
defaultValue="Meow"
placeholder="Enter an animal sound"
onCancel={() => toast({ title: "onCancel" })}
onSubmit={() => toast({ title: "onSubmit" })}
onEdit={() => toast({ title: "onEdit" })}
onBlur={() => toast({ title: "onBlur" })}
>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
```
### Select all on focus
Whenever text in input should be selected when entering edit mode.
<Wrapper>
<Editable defaultValue="Meow" placeholder="Enter an animal sound" selectAllOnFocus={false}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
</Wrapper>
```tsx
<Editable defaultValue="Meow" placeholder="Enter an animal sound" selectAllOnFocus={false}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
```
### Final Focus Ref
Use `finalFocusRef` to set the ref of element to receive focus when edit mode exits.
<Wrapper>
<FinalFocusRefEditable />
</Wrapper>
```tsx
function FinalFocusRefEditable() {
const ref = useRef<HTMLButtonElement>(null);
return (
<>
<Button ref={ref}>I receive focus</Button>
<Editable defaultValue="Meow" finalFocusRef={ref}>
<EditablePreview />
<EditableInput />
<HStack>
<EditableEditButton />
<EditableSubmitButton />
<EditableCancelButton />
</HStack>
</Editable>
</>
);
}
```
---
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
<Wrapper>
<Field>
<FieldLabel>
<>Username</>
</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>
<>This is the username you will use to login</>
</FieldHelpText>
</Field>
</Wrapper>
```tsx
<Field>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>
This is the username you will use to login
</FieldHelpText>
</Field>
```
- **Required**
<Wrapper>
<Field isRequired>
<FieldLabel>
<>Username</>
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
</Wrapper>
```tsx
<Field isRequired>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
```
- **Invalid**
<Wrapper>
<Field isInvalid>
<FieldLabel>
<>Username</>
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
</Wrapper>
```tsx
<Field isInvalid>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
```
- **Disabled**
<Wrapper>
<Field isDisabled>
<FieldLabel>
<>Username</>
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
</Wrapper>
```tsx
<Field isDisabled>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
```
### Field Error
Field error **will show only** when the `Field` has `isInvalid` prop.
<Wrapper>
<Field isInvalid>
<FieldLabel>
<>Username</>
</FieldLabel>
<Input placeholder="Enter your username" defaultValue="x" />
<FieldError>
<>This username is too short!</>
</FieldError>
</Field>
</Wrapper>
```tsx
<Field isInvalid>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" defaultValue="x" />
<FieldError>
This username is too short!
</FieldError>
</Field>
```
### Field Help Text
Field help text can be used to prompt the user with additional information.
<Wrapper>
<Field>
<FieldLabel>
<>Username</>
</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>
<>This is the username you will use to login</>
</FieldHelpText>
</Field>
</Wrapper>
```tsx
<Field>
<FieldLabel>
Username
</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>
This is the username you will use to login
</FieldHelpText>
</Field>
```
### 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.
<Wrapper>
<Field
label="Username"
helpText="This is the username you will use to login"
error="This username is too short!"
>
<Input placeholder="Enter your username" />
</Field>
</Wrapper>
```tsx
<Field
label="Username"
helpText="This is the username you will use to login"
error="This username is too short!"
>
<Input placeholder="Enter your username" />
</Field>
```
### Horizontal
If you prefer horizontal layout, you can use `orientation="horizontal"` prop.
<Wrapper>
<Field orientation="horizontal" maxW="sm">
<FieldLabel>
<>Username</>
</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
</Wrapper>
```tsx
<Field orientation="horizontal" maxW="sm">
<FieldLabel>Username</FieldLabel>
<Input placeholder="Enter your username" />
</Field>
```
---
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
<Wrapper>
<Flex color="white" w="full" h="100px">
<Flex center bg="green.400" w="100px" color='black/87'>
<>1</>
</Flex>
<Flex center bg="blue.400" w="1/3">
<>2</>
</Flex>
<Flex center bg="purple.400" flex={1}>
<>3</>
</Flex>
</Flex>
</Wrapper>
```tsx
<Flex color="white" w="full" h="100px">
<Flex center bg="green.400" w="100px" color='black/87'>
1
</Flex>
<Flex center bg="blue.400" w="1/3">
2
</Flex>
<Flex center bg="purple.400" flex={1}>
3
</Flex>
</Flex>
```
### Direction
Use the `direction` or `flexDir` prop to change the direction of the flex container.
<Wrapper>
<Flex direction="column" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex p={2} key={i} color="black/87" bg="green.400" w="full">
{i}
</Flex>
))}
</Flex>
</Wrapper>
```tsx
<Flex direction="column" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex p={2} key={i} color="black/87" bg="green.400" w="full">
{i}
</Flex>
))}
</Flex>
```
### Align
Use the `align` or `alignItems` prop to change the alignment of the flex items.
<Wrapper>
<Flex align="center" gap={4} full>
<Flex bg="green.400" color="black/87" w="100px" h="4" center>
<>1</>
</Flex>
<Flex bg="green.400" color="black/87" w="100px" h="6" center>
<>2</>
</Flex>
<Flex bg="green.400" color="black/87" w="100px" h="8" center>
<>3</>
</Flex>
</Flex>
</Wrapper>
```tsx
<Flex align="center" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex p={2} key={i} color="black/87" bg="green.400" w="100px" h="4" center>
{i}
</Flex>
))}
</Flex>
```
### Justify
Use the `justify` or `justifyContent` prop to change the justification of the flex items.
<Wrapper>
<Flex justify="center" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>
</Wrapper>
```tsx
<Flex justify="center" gap={4} full>
{Array.from({length: 3}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>
```
### gap
Use the `gap` prop to change the gap between the flex items.
<Wrapper>
<Flex gap={10} full>
{Array.from({length: 3}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>
</Wrapper>
```tsx
<Flex gap={10} full>
{Array.from({length: 3}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>
```
### Wrap
Use the `wrap` prop to change the wrapping of the flex items.
<Wrapper>
<Flex wrap="wrap" gap={4} full>
{Array.from({length: 10}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>
</Wrapper>
> info: Tip: You can use `<Wrap />` component or use `wrapped` utility prop to set `flexWrap` to `wrap`.
```tsx
<Flex
wrap="wrap"
// or: wrapped
gap={4}
full
>
{Array.from({length: 10}).map((_, i) => (
<Flex key={i} bg="green.400" color="black/87" w="100px" p={2} center>
{i}
</Flex>
))}
</Flex>
```
---
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.
<Wrapper>
<Grid color='white' columns={3} w='full'>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>
</Wrapper>
```tsx
<Grid color='white' columns={3}>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>
```
### Using columns, colSpan and rowSpan
<Wrapper>
<Grid color='white' columns={3} w='full'>
<GridItem colSpan={2} bg='green.400' p={2} color='black'>1</GridItem>
<GridItem rowSpan={2} bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>
</Wrapper>
```tsx
<Grid color='white' columns={3}>
<GridItem colSpan={2} bg='green.400' p={2} color='black'>1</GridItem>
<GridItem rowSpan={2} bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>
```
### Min child width
Use the `minChildWidth` prop to set the minimum width of the child and make grid responsive.
<Wrapper>
<Grid color='white' w='full' minChildWidth='150px'>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>
</Wrapper>
```tsx
<Grid color='white' w='full' minChildWidth='150px'>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>
```
---
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.
<Wrapper>
<Group>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
</Wrapper>
```tsx
<Group>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
```
### Attached
The `attached` prop is used to attach the contents of the group to themselfs.
<Wrapper>
<Group attached>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
</Wrapper>
```tsx
<Group attached>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
```
### Orientation
The `orientation` prop is used to change the orientation of the group.
<Wrapper>
<Group orientation="vertical">
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
</Wrapper>
```tsx
<Group orientation="vertical">
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
```
### Grow
The `grow` prop is used to make the group grow to fill the container.
<Wrapper>
<Group grow full>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
</Wrapper>
> info: Tip: `full` is an alias for `w="full"`.
```tsx
<Group grow full>
<Button variant="outline">Button 1</Button>
<Button variant="outline">Button 2</Button>
<Button variant="outline">Button 3</Button>
</Group>
```
---
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
<Wrapper>
<Heading>
<>This is a simple Heading component.</>
</Heading>
</Wrapper>
```tsx
<Heading>
This is a simple Heading component.
</Heading>
```
### Font sizes
<Wrapper>
<VStack w="full">
<Heading size="xs">Extra small</Heading>
<Heading size="sm">Small</Heading>
<Heading size="md">Medium</Heading>
<Heading size="lg">Large</Heading>
<Heading size="xl">Extra large</Heading>
<Heading size="2xl">2 Extra large</Heading>
<Heading size="3xl">3 Extra large</Heading>
<Heading size="4xl">4 Extra large</Heading>
<Heading size="5xl">5 Extra large</Heading>
<Heading size="6xl">6 Extra large</Heading>
<Heading size="7xl">7 Extra large</Heading>
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Heading size="xs">Extra small</Heading>
<Heading size="sm">Small</Heading>
<Heading size="md">Medium</Heading>
<Heading size="lg">Large</Heading>
<Heading size="xl">Extra large</Heading>
<Heading size="2xl">2 Extra large</Heading>
<Heading size="3xl">3 Extra large</Heading>
<Heading size="4xl">4 Extra large</Heading>
<Heading size="5xl">5 Extra large</Heading>
<Heading size="6xl">6 Extra large</Heading>
<Heading size="7xl">7 Extra large</Heading>
</VStack>
```
---
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`.
<Wrapper>
<Icon asComp={<FiCoffee />} />
</Wrapper>
```tsx
<Icon as={FiCoffee} />
```
### 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.
<Wrapper>
<Icon color="fg.medium" as={FiCoffee} />
</Wrapper>
```tsx
<Icon color="fg.medium" as={FiCoffee} />
```
### Polymorphism
with `asChild` prop Dream will merge child component with Icon, or with `asComp` prop Dream will merge component with Icon.
<Wrapper>
<Icon asChild>
<FiCoffee />
</Icon>
<Icon asComp={<FiCoffee />} />
</Wrapper>
```tsx
<Icon asChild>
<FiCoffee />
</Icon>
<Icon asComp={<FiCoffee />} />
```
---
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 <a href="https://unsplash.com/@alexpadurariu?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Alex Padurariu</a>
and <a href="https://unsplash.com/@szamanm?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Piotr Musioł</a> on <a href="https://unsplash.com/photos/white-cat-on-brown-log-PeS2Avev3wY?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
<Wrapper>
<Image
src="/coffee-n-cookies.webp"
alt="Coffee and cookies"
fallbackSrc="https://via.placeholder.com/250x164"
w="250px"
rounded="lg"
/>
</Wrapper>
```tsx
<Image
src="https://dreamy-ui.com/coffee-n-cookies.webp"
alt="Coffee and cookies"
fallbackSrc="https://via.placeholder.com/250x164"
w="250px"
rounded="lg"
/>
```
### Zoom on hover
Use `zoomOnHover` to zoom in the image on hover.
<Wrapper>
<Image
src="/coffee-n-cookies.webp"
alt="Coffee and cookies"
fallbackSrc="https://via.placeholder.com/250x164"
w="250px"
rounded="lg"
zoomOnHover
/>
</Wrapper>
```tsx
<Image
src="https://dreamy-ui.com/coffee-n-cookies.webp"
alt="Coffee and cookies"
fallbackSrc="https://via.placeholder.com/250x164"
w="250px"
rounded="lg"
zoomOnHover
/>
```
### Blur shadow
Use `blurShadow` to add a blurred shadow to the image.
<Wrapper>
<Image
src="/outdoor-cat.webp"
alt="Outdoor cat"
fallbackSrc="https://via.placeholder.com/250x164"
w="250px"
rounded="lg"
blurShadow
/>
</Wrapper>
```tsx
<Image
src="https://dreamy-ui.com/outdoor-cat.webp"
alt="Outdoor cat"
fallbackSrc="https://via.placeholder.com/250x164"
w="250px"
rounded="lg"
blurShadow
/>
```
### RSC Usage
ImageRSC is a server-side compatible component that does not use client handlers.
<Wrapper>
<ImageRSC
src="/outdoor-cat.webp"
alt="Outdoor cat"
w="250px"
rounded="lg"
/>
</Wrapper>
```tsx
<ImageRSC
src="/outdoor-cat.webp"
alt="Outdoor cat"
w="250px"
rounded="lg"
/>
```
---
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
<Wrapper>
<Input placeholder="Enter your username" />
</Wrapper>
```tsx
<Input placeholder="Enter your username" />
```
### Input Size
<Wrapper>
<VStack w="full">
<Input placeholder="Enter your username" size="sm" />
<Input placeholder="Enter your username" size="md" />
<Input placeholder="Enter your username" size="lg" />
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Input placeholder="Enter your username" size="sm" />
<Input placeholder="Enter your username" size="md" />
<Input placeholder="Enter your username" size="lg" />
</VStack>
```
### Input Variant
<Wrapper>
<VStack w="full">
<Input placeholder="Enter your username" variant="outline" />
<Input placeholder="Enter your username" variant="filled" />
<Input placeholder="Enter your username" variant="flushed" />
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Input placeholder="Enter your username" variant="outline" />
<Input placeholder="Enter your username" variant="filled" />
<Input placeholder="Enter your username" variant="flushed" />
</VStack>
```
### Invalid
Pass `isInvalid` prop to the `Input` to show the error state.
<Wrapper>
<VStack w="full">
<Input placeholder="Enter your username" variant="outline" isInvalid />
<Input placeholder="Enter your username" variant="filled" isInvalid />
<Input placeholder="Enter your username" variant="flushed" isInvalid />
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Input placeholder="Enter your username" variant="outline" isInvalid />
<Input placeholder="Enter your username" variant="filled" isInvalid />
<Input placeholder="Enter your username" variant="flushed" isInvalid />
</VStack>
```
### 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.
<Wrapper>
<InputGroup variant="filled">
<InputLeftAddon>
<Icon asComp={<BiSearch />} boxSize="5" />
</InputLeftAddon>
<Input pl="10" placeholder="Search for..." />
</InputGroup>
</Wrapper>
```tsx
<InputGroup variant="filled">
<InputLeftAddon>
<Icon as={BiSearch} boxSize="5" />
</InputLeftAddon>
<Input pl="10" placeholder="Search for..." />
</InputGroup>
```
### Usage with Field
Combine `Input` with `Field` to create a nice looking form element.
<Wrapper>
<Field>
<FieldLabel>Username</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>Username should not contain special characters.</FieldHelpText>
</Field>
</Wrapper>
```tsx
<Field>
<FieldLabel>Username</FieldLabel>
<Input placeholder="Enter your username" />
<FieldHelpText>Username should not contain special characters.</FieldHelpText>
</Field>
```
### RSC Usage
InputRSC is a RSC compatible component that does not use client handlers.
<Wrapper>
<InputRSC placeholder="Enter your username" />
</Wrapper>
```tsx
<InputRSC placeholder="Enter your username" />
```
---
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.
<Wrapper>
<Kbd>^i</Kbd>
</Wrapper>
```tsx
<Kbd>^i</Kbd>
```
### Sizes
The `Kbd` component comes in three sizes: small, medium (default), and large.
<Wrapper>
<Kbd size="sm">Esc</Kbd>
<Kbd size="md">Enter</Kbd>
<Kbd size="lg">Space</Kbd>
</Wrapper>
```tsx
<Kbd size="sm">Esc</Kbd>
<Kbd size="md">Enter</Kbd>
<Kbd size="lg">Space</Kbd>
```
### 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.
<Wrapper>
<PlatformSpecificKbd />
</Wrapper>
```tsx
import { useActionKey } from "@dreamy-ui/react";
const actionKey = useActionKey();
<Kbd>{actionKey} + K</Kbd>
```
---
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
<Wrapper>
<Link href="/">
<>Home</>
</Link>
</Wrapper>
```tsx
<Link href="/">Home</Link>
```
### External Link
You can use the `isExternal` prop to open the link in a new tab.
<Wrapper>
<Link href="https://www.google.com" isExternal>
<>Google</>
</Link>
</Wrapper>
```tsx
<Link href="https://www.google.com" isExternal>
Google
</Link>
```
### 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<RemixLinkProps, keyof DreamLinkProps> {}
export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
return <DreamLink ref={ref} as={RemixLink} {...props} />;
});
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
<Wrapper>
<List>
<ListItem>i5-10400f</ListItem>
<ListItem>RTX 4060ti</ListItem>
<ListItem>32GB RAM</ListItem>
</List>
</Wrapper>
```tsx
<List>
<ListItem>i5-10400f</ListItem>
<ListItem>RTX 4060ti</ListItem>
<ListItem>32GB RAM</ListItem>
</List>
```
### Ordered List
Simply pass the `ordered` prop to the `List` component to create an ordered list. It will render `ol` tag, instead of `ul`.
<Wrapper>
<List ordered>
<ListItem>i5-10400f</ListItem>
<ListItem>RTX 4060ti</ListItem>
<ListItem>32GB RAM</ListItem>
</List>
</Wrapper>
```tsx
<List ordered>
<ListItem>i5-10400f</ListItem>
<ListItem>RTX 4060ti</ListItem>
<ListItem>32GB RAM</ListItem>
</List>
```
---
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.
<Wrapper>
<Menu>
<MenuTrigger>
<Button w={"fit-content"}>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
</Wrapper>
```tsx
<Menu>
<MenuTrigger>
<Button>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
```
### 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.
<Wrapper>
<Menu placement="bottom-start">
<MenuTrigger>
<Button w={"fit-content"}>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
</Wrapper>
```tsx
<Menu placement="bottom-start">
<MenuTrigger>
<Button>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
```
### Size
Menu comes with 4 different sizes.
<Wrapper>
{["xs", "sm", "md", "lg"].map((size) => (
<Menu key={size} size={size}>
<MenuTrigger>
<Button w={"fit-content"}>Open {size} Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
))}
</Wrapper>
```tsx
{["xs", "sm", "md", "lg"].map((size) => (
<Menu key={size} size={size}>
<MenuTrigger>
<Button>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
))}
```
### Variant
Use `variant` prop to set the variant of the menu.
<Wrapper>
<VariantMenus />
</Wrapper>
```tsx
export function VariantMenus() {
return (
<Flex
wrapped
gap={5}
>
{(
["plain", "stretched"]
).map((variant) => (
<VariantMenu key={variant} variant={variant} />
))}
</Flex>
);
}
export function VariantMenu({ variant }: { variant: string }) {
return (
<Menu variant={variant as any}>
<MenuTrigger>
<Button w={"fit-content"}>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem
icon={<LuWarehouse />}
command="{actionKey} h"
asComp={<Link to="/" />}
>
Homepage
</MenuItem>
<MenuItem
icon={<IoAdd />}
command="{actionKey} n"
>
Add new
</MenuItem>
<MenuItem
icon={<LuAlarmClock />}
command="{actionKey} a"
>
Set alarm
</MenuItem>
<MenuItem
icon={<LuBattery />}
command="{actionKey} b"
>
Battery
</MenuItem>
<MenuItem
icon={<LuTrash />}
command="{actionKey} d"
>
Delete
</MenuItem>
</MenuContent>
</Menu>
);
}
```
### Using links
You can use a custom link component with menu item but polymorphic props like `as`, `asComp` and `asChild`.
<Wrapper>
<Menu placement="bottom-start">
<MenuTrigger>
<Button w={"fit-content"}>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem
icon={<LuWarehouse />}
command="{actionKey} h"
asComp={<RemixLink to="/" />}
>
<>Homepage</>
</MenuItem>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
</Wrapper>
```tsx
<Menu placement="bottom-start">
<MenuTrigger>
<Button w={"fit-content"}>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem
icon={<LuWarehouse />}
command="{actionKey} h"
asComp={<Link to="/" />}
>
Homepage
</MenuItem>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
```
### Controlled
You can control the menu with `isOpen`, `onOpen` and `onClose` props with `useControllable` hook.
<Wrapper>
<ControlledMenu />
</Wrapper>
```tsx
export function ControlledMenu() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<Menu
isOpen={isOpen}
onOpen={onOpen}
onClose={onClose}
>
<Text>{isOpen ? "Open" : "Closed"}</Text>
<MenuTrigger>
<Button>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem
icon={<LuWarehouse />}
command="{actionKey} h"
asComp={<Link to="/" />}
>
Homepage
</MenuItem>
<MenuItem icon={<IoAdd />} command="{actionKey} n">Add new</MenuItem>
<MenuItem icon={<LuAlarmClock />} command="{actionKey} a">Set alarm</MenuItem>
<MenuItem icon={<LuBattery />} command="{actionKey} b">Battery</MenuItem>
<MenuItem icon={<LuTrash />} command="{actionKey} d">Delete</MenuItem>
</MenuContent>
</Menu>
);
}
```
### Adding logic to the commands
`command` props does not provide any logic. You can use `useEventListener` hook to add logic to the commands.
<Wrapper>
<InteractiveMenu />
</Wrapper>
```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 (
<Menu>
<MenuTrigger>
<Button w={"fit-content"}>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem
icon={<LuWarehouse />}
command="{actionKey} h"
asComp={<Link to="/" />}
>
Homepage
</MenuItem>
<MenuItem
icon={<IoAdd />}
command="{actionKey} n"
>
Add new
</MenuItem>
<MenuItem
icon={<LuAlarmClock />}
command="{actionKey} a"
>
Set alarm
</MenuItem>
<MenuItem
icon={<LuBattery />}
command="{actionKey} b"
>
Battery
</MenuItem>
<MenuItem
icon={<LuTrash />}
command="{actionKey} d"
>
Delete
</MenuItem>
</MenuContent>
</Menu>
);
}
```
### Item right content
You can add right content to the item with `rightContent` prop.
<Wrapper>
<Menu>
<MenuTrigger>
<Button w={"fit-content"}>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem rightContent={<LuChevronRight />}>
<>Select framework</>
</MenuItem>
</MenuContent>
</Menu>
</Wrapper>
```tsx
<Menu>
<MenuTrigger>
<Button>Open Menu</Button>
</MenuTrigger>
<MenuContent>
<MenuItem rightContent={<LuChevronRight />}>
Select framework
</MenuItem>
</MenuContent>
</Menu>
```
---
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
<Wrapper>
<BasicModal />
</Wrapper>
```tsx
export default function BasicModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>Modal Body</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
```
### Customizing Modal Size
<Wrapper>
<SizeModals />
</Wrapper>
```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 (
<>
<Button variant={"primary"} onClick={onOpen}>
Open {size} Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose} size={size}>
<ModalOverlay />
<ModalContent>
<ModalHeader>{size} Modal</ModalHeader>
<ModalCloseButton />
<ModalBody>This is a {size} modal!</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}, []);
return (
<Flex wrapped gap={2}>
{sizes.map((size) => (
<ModalSize size={size} key={"modal-size-" + size} />
))}
</Flex>
);
}
```
### Customizing Scroll Behavior
- **inside**: The modal body will scroll inside the modal.
<Wrapper>
<ScrollableInsideModal />
</Wrapper>
```tsx
export default function ScrollBehaviorModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose} scrollBehavior={"inside"}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>Modal Body</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
```
- **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.
<Wrapper>
<ScrollableOutsideModal />
</Wrapper>
```tsx
export function ScrollableOutsideModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal
isOpen={isOpen}
onClose={onClose}
scrollBehavior="outside"
placement="top"
size={"lg"}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>
{[...Array(10)].map((_, i) => (
<LoremIpsum key={`ipsum-${i}`} p={1} />
))}
</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
```
### Placement
Sometimes you might want to place the modal on the top to avoid layout shifts.
<Wrapper>
<PlacementModal />
</Wrapper>
```tsx
export function PlacementModal() {
const { isOpen, onClose, onOpen } = useControllable();
return (
<>
<Button variant={"primary"} onClick={onOpen}>
Open Modal
</Button>
<Modal isOpen={isOpen} onClose={onClose} placement={"top"}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Header</ModalHeader>
<ModalCloseButton />
<ModalBody>Modal Body</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
```
---
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.
<Wrapper>
<PinInput>
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</Wrapper>
```tsx
<PinInput>
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
```
### Controlled
<Wrapper>
<ControlledPinInput />
</Wrapper>
```tsx
export function ControlledPinInput() {
const [pin, setPin] = useState("69");
return (
<PinInput
value={pin}
onChange={setPin}
>
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
);
}
```
### Pin Input Size
<Wrapper>
<VStack w="full">
<PinInput size="sm">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
<PinInput size="md">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
<PinInput size="lg">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</VStack>
</Wrapper>
### Pin Input Variant
<Wrapper>
<VStack w="full">
<PinInput variant="outline">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
<PinInput variant="filled">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
<PinInput variant="flushed">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<PinInput variant="outline">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
<PinInput variant="filled">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
<PinInput variant="flushed">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</VStack>
```
### Invalid
Pass `isInvalid` prop to the `PinInput` to show the error state.
<Wrapper>
<PinInput isInvalid>
<PinInputField />
<PinInputField />
</PinInput>
</Wrapper>
```tsx
<PinInput isInvalid>
<PinInputField />
<PinInputField />
</PinInput>
```
### Disabled
Pass `isDisabled` prop to the `PinInput` to show the disabled state.
<Wrapper>
<PinInput isDisabled>
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
</Wrapper>
```tsx
<PinInput isDisabled>
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
```
---
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 `<PopoverArrow />` component inside `<PopoverContent />`.
<Wrapper>
<Popover hasArrow>
<PopoverTrigger>
<Button
variant={"primary"}
w="fit-content"
>
<>Open Popover</>
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
<>Are you sure you want to delete this post? This action cannot be undone.</>
</PopoverBody>
<PopoverFooter>
<Button variant={"primary"}>Delete</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
</Wrapper>
```tsx
export function BasicPopover() {
return (
<Popover hasArrow>
<PopoverTrigger>
<Button variant={"primary"}>Open Popover</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
Are you sure you want to delete this post? This action cannot be undone.
</PopoverBody>
<PopoverFooter>
<Button variant={"primary"}>Delete</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
);
}
```
### Controlled Popover
Most of the time, you'll want to control the popover's open state. Use `useControllable` hook to do that.
<Wrapper>
<ControlledPopover />
</Wrapper>
```tsx
export function ControlledPopover() {
const { isOpen, onOpen, onClose } = useControllable();
const handleDelete = useCallback(() => {
/**
* Handle delete logic...
*/
onClose();
}, [onClose]);
return (
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
<PopoverTrigger>
<Button variant={"primary"}>Open Popover</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
Are you sure you want to delete this post? This action cannot be undone.
</PopoverBody>
<PopoverFooter>
<Button variant={"solid"} onClick={onClose}>
Cancel
</Button>
<Button variant={"primary"} onClick={handleDelete}>
Delete
</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
);
}
```
### Initial Focus
You can set the initial focus element using `initialFocusRef` prop.
<Wrapper>
<FocusPopover />
</Wrapper>
```tsx
export function FocusPopover() {
const { isOpen, onOpen, onClose } = useControllable();
const initialFocusRef = useRef<HTMLButtonElement>(null);
return (
<Popover
isOpen={isOpen}
onOpen={onOpen}
onClose={onClose}
initialFocusRef={initialFocusRef}
>
<PopoverTrigger>
<Button variant={"primary"}>Open Popover</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
Are you sure you want to delete this post? This action cannot be undone.
</PopoverBody>
<PopoverFooter>
<Button variant={"solid"} onClick={onClose} ref={initialFocusRef}>
Cancel
</Button>
<Button variant={"primary"}>Delete</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
);
}
```
### Placement
You can customize the placement of the popover relative to the trigger element using the `placement` prop.
<Wrapper>
<PlacementPopovers />
</Wrapper>
```tsx
export function PlacementPopovers() {
return (
<Flex wrapped gap={5}>
{(
[
"top",
"bottom",
"left",
"right",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end"
] satisfies PlacementWithLogical[]
).map((placement) => (
<PlacementPopover key={placement} placement={placement} />
))}
</Flex>
);
}
export function PlacementPopover({ placement }: { placement: PlacementWithLogical }) {
return (
<Popover placement={placement}>
<PopoverTrigger>
<Button variant={"primary"}>{placement}</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
Are you sure you want to delete this post? This action cannot be undone.
</PopoverBody>
<PopoverFooter>
<Button variant={"primary"}>Delete</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
);
}
```
### Size
Use `size` prop to set the size of the popover.
<Wrapper>
<SizePopovers />
</Wrapper>
```tsx
export function SizePopovers() {
return (
<Flex
wrapped
gap={5}
>
{(
["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"]
).map((size) => (
<SizePopover key={size} size={size} />
))}
</Flex>
);
}
export function SizePopover({ size }: { size: string }) {
return (
<Popover size={size as any}>
<PopoverTrigger>
<Button
variant={"primary"}
w="fit-content"
>
{size}
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
Are you sure you want to delete this post? This action cannot be undone.
</PopoverBody>
<PopoverFooter>
<Button variant={"primary"}>Delete</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
);
}
```
### Reduce Motion
You can customize the reduce motion behavior of the popover using the `reduceMotion` prop.
<Wrapper>
<Popover reduceMotion>
<PopoverTrigger>
<Button variant={"primary"} w='fit-content'>Reduced Motion</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
<>Are you sure you want to delete this post? This action cannot be undone.</>
</PopoverBody>
<PopoverFooter>
<Button variant={"primary"}>Delete</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
</Wrapper>
```tsx
<Popover reduceMotion>
<PopoverTrigger>
<Button variant={"primary"}>Reduced Motion</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Delete Post</PopoverHeader>
<PopoverBody>
Are you sure you want to delete this post? This action cannot be undone.
</PopoverBody>
<PopoverFooter>
<Button variant={"primary"}>Delete</Button>
</PopoverFooter>
</PopoverContent>
</Popover>
```
---
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.
<Wrapper>
<Portal>
<div>Hello</div>
</Portal>
</Wrapper>
```tsx
<Portal>
<div>Hello</div>
</Portal>
```
---
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.
<Wrapper>
<ProgressCircular value={69} />
</Wrapper>
```tsx
<ProgressCircular value={69} />
```
### Sizes
You can set the size of the progress by using the `size` prop.
<Wrapper>
<Flex col gap={5}>
<ProgressCircular value={69} size="xs" />
<ProgressCircular value={69} size="sm" />
<ProgressCircular value={69} size="md" />
<ProgressCircular value={69} size="lg" />
<ProgressCircular value={69} size="xl" />
</Flex>
</Wrapper>
```tsx
<Flex col gap={5}>
<ProgressCircular value={69} size="xs" />
<ProgressCircular value={69} size="sm" />
<ProgressCircular value={69} size="md" />
<ProgressCircular value={69} size="lg" />
<ProgressCircular value={69} size="xl" />
</Flex>
```
### Scheme
You can set the color of the progress by using the `scheme` prop.
<Wrapper>
<Flex col gap={5}>
<ProgressCircular scheme="primary" value={21} />
<ProgressCircular scheme="secondary" value={37} />
<ProgressCircular scheme="success" value={42} />
<ProgressCircular scheme="warning" value={10} />
<ProgressCircular scheme="error" value={100} />
<ProgressCircular scheme="info" value={50} />
</Flex>
</Wrapper>
```tsx
<Flex col gap={5}>
<ProgressCircular scheme="primary" value={21} />
<ProgressCircular scheme="secondary" value={37} />
<ProgressCircular scheme="success" value={42} />
<ProgressCircular scheme="warning" value={10} />
<ProgressCircular scheme="error" value={100} />
<ProgressCircular scheme="info" value={50} />
</Flex>
```
### 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.
<Wrapper>
<ProgressCircular isIndeterminate />
</Wrapper>
```tsx
<ProgressCircular isIndeterminate />
```
### 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.
<Wrapper>
<ProgressCircular showValueLabel value={69} />
<ProgressCircular showValueLabel value={69} valueLabel="0" />
<ProgressCircular showValueLabel value={69} formatOptions={{ style: "currency", currency: "USD" }} />
</Wrapper>
```tsx
<ProgressCircular showValueLabel value={69} />
<ProgressCircular showValueLabel value={69} valueLabel="0" />
<ProgressCircular showValueLabel value={69} formatOptions={{ style: "currency", currency: "USD" }} />
```
### Label
You can set the label of the progress by using the `label` prop.
<Wrapper>
<ProgressCircular label="Downloading..." value={69} />
</Wrapper>
```tsx
<ProgressCircular label="Downloading..." value={69} />
```
### Min and Max value
You can set the min and max value of the progress by using the `minValue` and `maxValue` prop.
<Wrapper>
<ProgressCircular minValue={21} maxValue={37} value={29} />
</Wrapper>
```tsx
<ProgressCircular minValue={21} maxValue={37} value={29} />
```
---
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.
<Wrapper>
<Progress value={50} aria-label="Progress" />
</Wrapper>
```tsx
<Progress value={50} aria-label="Progress" />
```
### Sizes
You can set the size of the progress by using the `size` prop.
<Wrapper>
<VStack w='full' gap={5}>
<Progress value={50} size="sm" aria-label="Progress" />
<Progress value={50} size="md" aria-label="Progress" />
<Progress value={50} size="lg" aria-label="Progress" />
</VStack>
</Wrapper>
```tsx
<VStack gap={5}>
<Progress value={50} size="sm" aria-label="Progress" />
<Progress value={50} size="md" aria-label="Progress" />
<Progress value={50} size="lg" aria-label="Progress" />
</VStack>
```
### Scheme
You can set the color of the progress by using the `scheme` prop.
<Wrapper>
<VStack gap={5} full>
<Progress scheme="primary" value={50} aria-label="Progress" />
<Progress scheme="secondary" value={50} aria-label="Progress" />
<Progress scheme="success" value={50} aria-label="Progress" />
<Progress scheme="warning" value={50} aria-label="Progress" />
<Progress scheme="error" value={50} aria-label="Progress" />
<Progress scheme="info" value={50} aria-label="Progress" />
<Progress scheme="none" value={50} aria-label="Progress" />
</VStack>
</Wrapper>
```tsx
<VStack gap={5} full>
<Progress scheme="primary" value={50} aria-label="Progress" />
<Progress scheme="secondary" value={50} aria-label="Progress" />
<Progress scheme="success" value={50} aria-label="Progress" />
<Progress scheme="warning" value={50} aria-label="Progress" />
<Progress scheme="error" value={50} aria-label="Progress" />
<Progress scheme="info" value={50} aria-label="Progress" />
<Progress scheme="none" value={50} aria-label="Progress" />
</VStack>
```
### 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.
<Wrapper>
<Progress isIndeterminate speed="0.8s" aria-label="Progress" />
</Wrapper>
```tsx
<Progress isIndeterminate speed="0.8s" aria-label="Progress" />
```
---
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.
<Wrapper>
<RadioGroup full defaultValue="rr">
<Group full wrapped>
<RadioCard title="React Router" full value="rr" />
<RadioCard title="Next.js" full value="next" />
<RadioCard title="Vue.js" full value="vue" />
</Group>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup full defaultValue="rr">
<Group full>
<RadioCard title="React Router" full value="rr" />
<RadioCard title="Next.js" full value="next" />
<RadioCard title="Vue.js" full value="vue" />
</Group>
</RadioGroup>
```
### With description
<Wrapper>
<RadioGroup full defaultValue="rr">
<Group full wrapped>
<RadioCard title="React Router" full value="rr" description="Description for React Router" />
<RadioCard title="Next.js" full value="next" description="Description for Next.js" />
<RadioCard title="Vue.js" full value="vue" description="Description for Vue.js" />
</Group>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup full defaultValue="rr">
<Group full>
<RadioCard title="React Router" full value="rr" description="Description for React Router" />
<RadioCard title="Next.js" full value="next" description="Description for Next.js" />
<RadioCard title="Vue.js" full value="vue" description="Description for Vue.js" />
</Group>
</RadioGroup>
```
### Radio variant
Change the Radio variant of the Radio card.
<Wrapper>
<RadioGroup full defaultValue="outline">
<Group full>
<RadioCard title="Outline" full value="outline" description="Description for Outline" variant={"outline"} />
<RadioCard title="Subtle" full value="subtle" description="Description for Subtle" variant={"subtle"} />
</Group>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup full defaultValue="outline">
<Group full>
<RadioCard title="Outline" full value="outline" description="Description for Outline" variant={"outline"} />
<RadioCard title="Subtle" full value="subtle" description="Description for Subtle" variant={"subtle"} />
</Group>
</RadioGroup>
```
### Scheme
Change the color scheme of the Radio card.
<Wrapper>
<RadioGroup full defaultValue="primary">
<Grid columns={2} full>
<RadioCard title="Primary" full value="primary" description="Description for Primary" scheme={"primary"} />
<RadioCard title="Secondary" full value="secondary" description="Description for Secondary" scheme={"secondary"} />
<RadioCard title="Success" full value="success" description="Description for Success" scheme={"success"} />
<RadioCard title="Warning" full value="warning" description="Description for Warning" scheme={"warning"} />
<RadioCard title="Error" full value="error" description="Description for Error" scheme={"error"} />
<RadioCard title="Info" full value="info" description="Description for Info" scheme={"info"} />
<RadioCard title="None" full value="none" description="Description for None" scheme={"none"} />
</Grid>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup full defaultValue="primary">
<Group full orientation="vertical">
<RadioCard title="Primary" full value="primary" description="Description for Primary" scheme={"primary"} />
<RadioCard title="Secondary" full value="secondary" description="Description for Secondary" scheme={"secondary"} />
<RadioCard title="Success" full value="success" description="Description for Success" scheme={"success"} />
<RadioCard title="Warning" full value="warning" description="Description for Warning" scheme={"warning"} />
<RadioCard title="Error" full value="error" description="Description for Error" scheme={"error"} />
<RadioCard title="Info" full value="info" description="Description for Info" scheme={"info"} />
<RadioCard title="None" full value="none" description="Description for None" scheme={"none"} />
</Group>
</RadioGroup>
```
### Size
Change the Radio card size.
<Wrapper>
<RadioGroup full defaultValue="sm">
<Group full alignItems="start" wrapped>
<RadioCard title="Small" full value="sm" description="Description for Small" size={"sm"} />
<RadioCard title="Medium" full value="md" description="Description for Medium" size={"md"} />
<RadioCard title="Large" full value="lg" description="Description for Large" size={"lg"} />
</Group>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup full defaultValue="sm">
<Group full wrapped>
<RadioCard title="Small" full value="sm" description="Description for Small" size={"sm"} />
<RadioCard title="Medium" full value="md" description="Description for Medium" size={"md"} />
<RadioCard title="Large" full value="lg" description="Description for Large" size={"lg"} />
</Group>
</RadioGroup>
```
### Radio Group
You can control the Radio state by using `value` and `onChange` in `<RadioGroup />`.
<Wrapper>
<ControlledRadioCards />
</Wrapper>
```tsx
export function ControlledRadioCards() {
const [value, setValue] = useState<string | number>("rr");
return (
<RadioGroup
value={value}
onChange={setValue}
>
<Group
full
wrapped
>
<RadioCard
value="rr"
title="React Router"
description="Description for React Router"
/>
<RadioCard
value="next"
title="Next.js"
description="Description for Next.js"
/>
<RadioCard
value="vue"
title="Vue.js"
description="Description for Vue.js"
/>
</Group>
</RadioGroup>
);
}
```
### With icon
You can use custom children in the `title` or `description`, to create a more complex and flexible Radio card.
<Wrapper>
<RadioGroup full defaultValue="rr">
<Group full wrapped>
<RadioCard
title={(
<Flex col gap={2}>
<Icon asComp={<SiReactrouter />} boxSize={"5"} color="fg.medium" />
<Text>React Router</Text>
</Flex>
)}
description="Description for React Router"
full
value="rr"
/>
<RadioCard
title={(
<Flex col gap={2}>
<Icon asComp={<RiNextjsLine />} boxSize={"5"} color="fg.medium" />
<Text>Next.js</Text>
</Flex>
)}
description="Description for Next.js"
full
value="next"
/>
<RadioCard
title={(
<Flex col gap={2}>
<Icon asComp={<FaVuejs />} boxSize={"5"} color="fg.medium" />
<Text>Vue.js</Text>
</Flex>
)}
description="Description for Vue.js"
full
value="vue"
/>
</Group>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup full defaultValue="rr">
<Group full wrapped>
<RadioCard
title={(
<Flex col gap={2}>
<Icon asComp={<SiReactrouter />} boxSize={"5"} color="fg.medium" />
<Text>React Router</Text>
</Flex>
)}
description="Description for React Router"
full
value="rr"
/>
<RadioCard
title={(
<Flex col gap={2}>
<Icon asComp={<RiNextjsLine />} boxSize={"5"} color="fg.medium" />
<Text>Next.js</Text>
</Flex>
)}
description="Description for Next.js"
full
value="next"
/>
<RadioCard
title={(
<Flex col gap={2}>
<Icon asComp={<FaVuejs />} boxSize={"5"} color="fg.medium" />
<Text>Vue.js</Text>
</Flex>
)}
description="Description for Vue.js"
full
value="vue"
/>
</Group>
</RadioGroup>
```
### Hide radio indicator
You can hide the radio indicator by using the `hideRadio` prop.
<Wrapper>
<RadioGroup full defaultValue="paypal">
<Group full wrapped>
<RadioCard
title={(
<Flex full gap={2} row center>
<Icon asComp={<FaPaypal />} boxSize={"5"} color="fg.medium" />
<Text>Paypal</Text>
</Flex>
)}
value="paypal"
full
hideRadio
/>
<RadioCard
title={(
<Flex full gap={2} row center>
<Icon asComp={<FiCreditCard />} boxSize={"5"} color="fg.medium" />
<Text>Credit Card</Text>
</Flex>
)}
full
value="cc"
hideRadio
/>
<RadioCard
title={(
<Flex full gap={2} row center>
<Icon asComp={<SiApple />} boxSize={"5"} color="fg.medium" />
<Text>Apple</Text>
</Flex>
)}
full
value="apple"
hideRadio
/>
</Group>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup full defaultValue="paypal">
<Group full wrapped>
<RadioCard
title={(
<Flex full gap={2} row center>
<Icon asComp={<FaPaypal />} boxSize={"5"} color="fg.medium" />
<Text>Paypal</Text>
</Flex>
)}
value="paypal"
full
hideRadio
/>
<RadioCard
title={(
<Flex full gap={2} row center>
<Icon asComp={<FiCreditCard />} boxSize={"5"} color="fg.medium" />
<Text>Credit Card</Text>
</Flex>
)}
full
value="cc"
hideRadio
/>
<RadioCard
title={(
<Flex full gap={2} row center>
<Icon asComp={<SiApple />} boxSize={"5"} color="fg.medium" />
<Text>Apple</Text>
</Flex>
)}
full
value="apple"
hideRadio
/>
</Group>
</RadioGroup>
```
---
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
<Wrapper>
<Radio defaultChecked>
<>Default</>
</Radio>
</Wrapper>
```tsx
<Radio defaultChecked>
Default
</Radio>
```
### Radio Group
`RadioGroup` allows easily composing multiple Radioes.
Use `defaultValue`, `value` and `onChange` in `<RadioGroup />` to control the selected Radioes.
<Wrapper>
<RadioGroup defaultValue={1}>
<Radio value={1}>First</Radio>
<Radio value={2}>Second</Radio>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup defaultValue={1}>
<Radio value={1}>First</Radio>
<Radio value={2}>Second</Radio>
</RadioGroup>
```
### Scheme
Change the color scheme of the Radio.
<Wrapper>
<RadioGroup defaultValue="primary">
<Radio value="primary" scheme="primary">Primary</Radio>
<Radio value="secondary" scheme="secondary">Secondary</Radio>
<Radio value="success" scheme="success">Success</Radio>
<Radio value="warning" scheme="warning">Warning</Radio>
<Radio value="error" scheme="error">Error</Radio>
<Radio value="info" scheme="info">Info</Radio>
<Radio value="none" scheme="none">None</Radio>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup defaultValue="primary">
<Radio value="primary" scheme="primary">Primary</Radio>
<Radio value="secondary" scheme="secondary">Secondary</Radio>
<Radio value="success" scheme="success">Success</Radio>
<Radio value="warning" scheme="warning">Warning</Radio>
<Radio value="error" scheme="error">Error</Radio>
<Radio value="info" scheme="info">Info</Radio>
<Radio value="none" scheme="none">None</Radio>
</RadioGroup>
```
### Size
Change the Radio size.
<Wrapper>
<RadioGroup defaultValue="md">
<Radio value="sm" size="sm">Small</Radio>
<Radio value="md" size="md">Medium</Radio>
<Radio value="lg" size="lg">Large</Radio>
</RadioGroup>
</Wrapper>
```tsx
<RadioGroup defaultValue="md">
<Radio value="sm" size="sm">Small</Radio>
<Radio value="md" size="md">Medium</Radio>
<Radio value="lg" size="lg">Large</Radio>
</RadioGroup>
```
### Controlled Radio
You can control the Radio state by using `value` and `onChange` in `<RadioGroup />`.
<Wrapper>
<ControlledRadios />
</Wrapper>
```tsx
export function ControlledRadios() {
const [value, setValue] = useState<string | number>("rr");
return (
<RadioGroup
value={value}
onChange={setValue}
>
<Radio value="rr">React Router</Radio>
<Radio value="next">Next.js</Radio>
<Radio value="vue">Vue.js</Radio>
</RadioGroup>
);
}
```
---
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.
<Wrapper>
<Select width="xs">
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
```
### Size
Select comes with 4 different sizes.
<Wrapper>
<Select width="xs" size={"xs"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" size={"sm"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" size={"md"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" size={"lg"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select width="xs" size={"xs"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" size={"sm"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" size={"md"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" size={"lg"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
```
### Variant
Select can be used in `outline` or `solid` variant.
<Wrapper>
<Select width="xs" variant={"outline"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" variant={"solid"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select width="xs" variant={"outline"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
<Select width="xs" variant={"solid"}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
```
### 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`.
<Wrapper>
{["primary", "success", "warning", "info", "error", "none"].map((scheme) => (
<>
<Text>{scheme}</Text>
<Select width="xs" selectedItemBackgroundScheme={scheme} defaultValue="strawberry">
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</>
))}
</Wrapper>
```tsx
{["primary", "success", "warning", "info", "error", "none"].map((scheme) => (
<>
<Text>{scheme}</Text>
<Select width="xs" selectedItemBackgroundScheme={scheme} defaultValue="strawberry">
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</>
))}
```
### Controlled
<Wrapper>
<ControlledSelect />
</Wrapper>
```tsx
export function ControlledSelect() {
const [value, setValue] = useState<string>("strawberry");
return (
<Select
value={value}
onChangeValue={setValue}
width="xs"
>
<SelectTrigger
placeholder="Select a favorite fruit"
/>
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
);
}
```
### Selected Strategy
You can customize how the selected value is marked as selected.
<Wrapper>
{["both", "checkmark", "background"].map((strategy) => (
<>
<Text>{strategy}</Text>
<Select
key={strategy}
selectedStrategy={strategy}
width="xs"
>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</>
))}
</Wrapper>
```tsx
<Wrapper>
{["both", "checkmark", "background"].map((strategy) => (
<>
<Text>{strategy}</Text>
<Select
key={strategy}
selectedStrategy={strategy}
width="xs"
>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</>
))}
</Wrapper>
```
### With option icons
You can place icons, custom children in the `SelectItem` to indicate the type of the option.
<Wrapper>
<Select width="xs">
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="cherry">
<HStack>
<LuCherry />
<Text>Cherry</Text>
</HStack>
</SelectItem>
<SelectItem value="banana">
<HStack>
<LuBanana />
<Text>Banana</Text>
</HStack>
</SelectItem>
<SelectItem value="orange">
<HStack>
<LuCitrus />
<Text>Orange</Text>
</HStack>
</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select width="xs">
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="cherry">
<HStack>
<LuCherry />
<Text>Cherry</Text>
</HStack>
</SelectItem>
<SelectItem value="banana">
<HStack>
<LuBanana />
<Text>Banana</Text>
</HStack>
</SelectItem>
<SelectItem value="orange">
<HStack>
<LuCitrus />
<Text>Orange</Text>
</HStack>
</SelectItem>
</SelectContent>
</Select>
```
### With one icon
Single icon is useful if you want to have global icon for a trigger, instead of having it on each item.
<Wrapper>
<Select width="xs">
<SelectTrigger placeholder="Select a favorite fruit" icon={<LuCherry />} />
<SelectContent>
<SelectItem value="cherry">Cherry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select width="xs">
<SelectTrigger placeholder="Select a favorite fruit" icon={<LuCherry />} />
<SelectContent>
<SelectItem value="cherry">Cherry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
```
### Clearable
Pass `isClearable` prop to enable clear button.
<Wrapper>
<Select width="xs" isClearable>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="cherry">Cherry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select width="xs" isClearable>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="cherry">Cherry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
```
### 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.
<Wrapper>
<Select width="xs" isMultiple>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
export function MultipleSelect() {
return (
<Select width="xs" isMultiple>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
);
}
```
### Custom Multiple Selected Text
You can change the text that Select displays when multiple keys are selected by using `multipleSelectedText` prop in `SelectTrigger`.
<Wrapper>
<Select width="xs" isMultiple>
<SelectTrigger
placeholder="Select a favorite fruit"
multipleSelectedText={(selectedKeys) => `${selectedKeys.join(", ")}`}
/>
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
export function MultipleSelect() {
return (
<Select width="xs" isMultiple>
<SelectTrigger
placeholder="Select a favorite fruit"
multipleSelectedText={(selectedKeys) => `${selectedKeys.join(", ")}`}
/>
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
);
}
```
### Async loading
You can fetch data when the Select is opened.
<Wrapper>
<AsyncSelect />
</Wrapper>
```tsx
export function AsyncSelect() {
const [isLoading, setIsLoading] = useState(true);
const [fruits, setFruits] = useState<string[]>([]);
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 (
<Select width="xs" onOpen={fetchFruits}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
{isLoading && (
<Spinner
color="primary"
py={4}
/>
)}
{fruits.map((fruit) => (
<SelectItem
key={fruit}
value={fruit}
>
{fruit}
</SelectItem>
))}
</SelectContent>
</Select>
);
}
```
### 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.
<Wrapper>
<Select width="xs" closeOnSelect={false}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select width="xs" closeOnSelect={false}>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
```
### 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.
<Wrapper>
<Select width="xs" reduceMotion>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
</Wrapper>
```tsx
<Select width="xs" reduceMotion>
<SelectTrigger placeholder="Select a favorite fruit" />
<SelectContent>
<SelectItem value="strawberry">Strawberry</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
</SelectContent>
</Select>
```
---
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.
<Wrapper>
<VStack w='full' maxW='300px' gap={4}>
<HStack>
<Skeleton
boxSize="10"
rounded={"full"}
/>
<SkeletonText
lines={2}
/>
</HStack>
<Skeleton h='150px' />
</VStack>
</Wrapper>
```tsx
<VStack maxW='300px' gap={4}>
<HStack>
<Skeleton
boxSize="10"
rounded={"full"}
/>
<SkeletonText
lines={2}
/>
</HStack>
<Skeleton h='150px' />
</VStack>
```
### Variants
<Wrapper>
<Flex wrapped gap={6}>
<VStack w='300px'>
<Text>Pulse</Text>
<VStack gap={4}>
<HStack>
<Skeleton
variant="pulse"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="pulse"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="pulse" />
</VStack>
</VStack>
<VStack w='300px'>
<Text>Shine</Text>
<VStack gap={4}>
<HStack>
<Skeleton
variant="shine"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="shine"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="shine" />
</VStack>
</VStack>
<VStack w='300px'>
<Text>None</Text>
<VStack gap={4}>
<HStack>
<Skeleton
variant="none"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="none"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="none" />
</VStack>
</VStack>
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={6}>
<VStack w='300px'>
<Text>Pulse</Text>
<VStack gap={4}>
<HStack>
<Skeleton
variant="pulse"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="pulse"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="pulse" />
</VStack>
</VStack>
<VStack w='300px'>
<Text>Shine</Text>
<VStack gap={4}>
<HStack>
<Skeleton
variant="shine"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="shine"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="shine" />
</VStack>
</VStack>
<VStack w='300px'>
<Text>None</Text>
<VStack gap={4}>
<HStack>
<Skeleton
variant="none"
boxSize="10"
rounded={"full"}
/>
<SkeletonText
variant="none"
lines={2}
/>
</HStack>
<Skeleton h='150px' variant="none" />
</VStack>
</VStack>
</Flex>
```
---
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
<Wrapper>
<Slider>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</Wrapper>
```tsx
<Slider>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
```
### Max, Min, Step
You can change the max, min, and step of the Slider by using the `max`, `min`, and `step` props.
<Wrapper>
<MaxMinSlider />
</Wrapper>
```tsx
function MaxMinSlider() {
const [value, setValue] = useState(0);
return (
<>
<Text>
Slider value: {value}
</Text>
<Slider
min={0}
max={50}
step={10}
value={value}
onChangeValue={setValue}
>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</>
);
}
```
### Size
You can change the size of the Slider by using the `size` prop.
<Wrapper>
<VStack w="full" gap={10}>
<Slider size='sm'>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider size='md'>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider size='lg'>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</VStack>
</Wrapper>
```tsx
<VStack w="full" gap={10}>
<Slider size='sm'>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider size='md'>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider size='lg'>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</VStack>
```
### Scheme
You can change the scheme of the Slider by using the `scheme` prop.
<Wrapper>
<VStack w="full" gap={10}>
<Slider scheme="primary">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="secondary">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="info">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="success">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="warning">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="error">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="none">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</VStack>
</Wrapper>
```tsx
<VStack w="full" gap={10}>
<Slider scheme="primary">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="secondary">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="info">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="success">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="warning">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="error">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
<Slider scheme="none">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</VStack>
```
### Orientation
You can change the orientation of the Slider by using the `orientation` prop.
<Wrapper>
<Slider orientation="vertical" h="200px">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</Wrapper>
```tsx
<Slider orientation="vertical" h="200px">
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
```
### Reversed
You can reverse the Slider by using the `isReversed` prop.
<Wrapper>
<Slider isReversed>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</Wrapper>
```tsx
<Slider isReversed>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
```
### Controlled
You can control the Slider by using the `value` prop.
ControlledSlider
<Wrapper>
<ControlledSlider />
</Wrapper>
```tsx
function ControlledSlider() {
const [value, setValue] = useState(0);
return (
<>
<Text>
Slider value: {value}
</Text>
<Slider value={value} onChangeValue={setValue}>
<SliderTrack maxW="xs">
<SliderFilledTrack />
<SliderThumb />
</SliderTrack>
</Slider>
</>
);
}
```
---
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
<Wrapper>
<Snippet>
<>pnpm install @dreamy-ui/react @dreamy-ui/system</>
</Snippet>
</Wrapper>
```tsx
<Snippet>
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
```
### Variants
<Wrapper>
<Snippet variant="bordered">
<>pnpm install @dreamy-ui/react @dreamy-ui/system</>
</Snippet>
<Snippet variant="solid">
<>pnpm install @dreamy-ui/react @dreamy-ui/system</>
</Snippet>
</Wrapper>
```tsx
<Snippet variant="bordered">
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
<Snippet variant="solid">
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
```
### Sizes
<Wrapper>
<Snippet size="sm">
<>pnpm install @dreamy-ui/react @dreamy-ui/system</>
</Snippet>
<Snippet size="md">
<>pnpm install @dreamy-ui/react @dreamy-ui/system</>
</Snippet>
<Snippet size="lg">
<>pnpm install @dreamy-ui/react @dreamy-ui/system</>
</Snippet>
</Wrapper>
```tsx
<Snippet size="sm">
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
<Snippet size="md">
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
<Snippet size="lg">
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
```
### Schemes
<Wrapper>
{["primary", "secondary", "success", "warning", "info", "error", "none"].map((scheme) => (
<Stack
key={scheme}
direction={{
base: "column",
md: "row"
}}
alignItems={{
base: "start",
md: "center"
}}
w='full'
>
<Text minW={20}>{scheme}</Text>
<Snippet key={scheme} scheme={scheme} w='full'>
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
</Stack>
))}
</Wrapper>
```tsx
{["primary", "secondary", "success", "warning", "info", "error", "none"].map((scheme) => (
<Stack
key={scheme}
direction={{
base: "column",
md: "row"
}}
alignItems={{
base: "start",
md: "center"
}}`
w='full'
>
<Text minW={20}>{scheme}</Text>
<Snippet key={scheme} scheme={scheme} w='full'>
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
</Stack>
))}
```
### Disable Tooltip
You can disable the "Copy To Clipboard" tooltip by using the `disableTooltip` prop.
<Wrapper>
<Snippet disableTooltip>
<>pnpm install @dreamy-ui/react @dreamy-ui/system</>
</Snippet>
</Wrapper>
```tsx
<Snippet disableTooltip>
pnpm install @dreamy-ui/react @dreamy-ui/system
</Snippet>
```
---
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
<Wrapper>
<Switch>
<>Default</>
</Switch>
</Wrapper>
```tsx
<Switch>
Default
</Switch>
```
### Scheme
Change the color scheme of the Switch.
<Wrapper>
<Switch scheme="primary" defaultChecked>Primary</Switch>
<Switch scheme="secondary" defaultChecked>Secondary</Switch>
<Switch scheme="success" defaultChecked>Success</Switch>
<Switch scheme="warning" defaultChecked>Warning</Switch>
<Switch scheme="error" defaultChecked>Error</Switch>
<Switch scheme="info" defaultChecked>Info</Switch>
<Switch scheme="none" defaultChecked>None</Switch>
</Wrapper>
```tsx
<Switch scheme="primary" defaultChecked>Primary</Switch>
<Switch scheme="secondary" defaultChecked>Secondary</Switch>
<Switch scheme="success" defaultChecked>Success</Switch>
<Switch scheme="warning" defaultChecked>Warning</Switch>
<Switch scheme="error" defaultChecked>Error</Switch>
<Switch scheme="info" defaultChecked>Info</Switch>
<Switch scheme="none" defaultChecked>None</Switch>
```
### Size
Change the Switch size.
<Wrapper>
<Switch size="sm">Sm</Switch>
<Switch size="md">Md</Switch>
<Switch size="lg">Lg</Switch>
</Wrapper>
```tsx
<Switch size="sm">Sm</Switch>
<Switch size="md">Md</Switch>
<Switch size="lg">Lg</Switch>
```
### Controlled
Use `isChecked` and `onChange`, `onChangeValue` to control the checkbox.
<Wrapper>
<ControlledSwitch />
</Wrapper>
```tsx
export function ControlledSwitch() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
<Text>Selected: {isChecked ? "true" : "false"}</Text>
<Switch
isChecked={isChecked}
onChangeValue={setIsChecked}
>
Controlled
</Switch>
</>
);
}
```
---
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
<Wrapper>
<TableContainer w="full">
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Wrapper>
```tsx
<TableContainer w="full">
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
```
### Variants
<Wrapper>
{["simple", "line"].map((variant) => (
<>
<Text size={"lg"}>{variant}</Text>
<TableContainer w="full" variant={variant}>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
))}
</Wrapper>
```tsx
{["simple", "line"].map((variant) => (
<>
<Text size={"lg"}>{variant}</Text>
<TableContainer w="full" variant={variant}>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
))}
```
### With background
<Wrapper>
{["simple", "line"].map((variant) => (
<>
<Text size={"lg"}>{variant}</Text>
<TableContainer w="full" variant={variant} withBackground>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
))}
</Wrapper>
```tsx
{["simple", "line"].map((variant) => (
<>
<Text size={"lg"}>{variant}</Text>
<TableContainer w="full" variant={variant} withBackground>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
))}
```
### Interactive
<Wrapper>
<TableContainer w="full" interactive>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Wrapper>
```tsx
<TableContainer w="full" interactive>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
```
### Striped
<Wrapper>
<TableContainer w="full" striped>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25, 28, 31, 35].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Wrapper>
```tsx
<TableContainer w="full" striped>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25, 28, 31, 35].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
```
### Size
<Wrapper>
{["sm", "md", "lg"].map((size) => (
<>
<Text size={"lg"}>{size}</Text>
<TableContainer w="full" size={size}>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
))}
</Wrapper>
```tsx
{["sm", "md", "lg"].map((size) => (
<>
<Text size={"lg"}>{size}</Text>
<TableContainer w="full" size={size}>
<Table>
<TableHeader>
<TableRow>
<TableColumnHeader>Name</TableColumnHeader>
<TableColumnHeader>Age</TableColumnHeader>
<TableColumnHeader>Gender</TableColumnHeader>
</TableRow>
</TableHeader>
<TableBody>
{[20, 22, 25].map((item, index) => (
<TableRow key={index}>
<TableCell>Name {index + 1}</TableCell>
<TableCell>{item}</TableCell>
<TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
))}
```
---
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
<Wrapper>
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1</p>
</TabPanel>
<TabPanel>
<p>Tab 2</p>
</TabPanel>
<TabPanel>
<p>Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
</Wrapper>
```tsx
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1</p>
</TabPanel>
<TabPanel>
<p>Tab 2</p>
</TabPanel>
<TabPanel>
<p>Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
```
### Variant
You can change the variant of the Tabs by passing the `variant` prop to the `Tabs` component.
<Wrapper>
<VariantTabs />
</Wrapper>
```tsx
function TabsVariants() {
return (
<VStack gap={6}>
<Flex
col
gap={2}
>
{(["filled", "underline", "filled-simple"] as const).map((variant) => (
<React.Fragment key={variant}>
<Text bold>{capitalize(variant)} Variant</Text>
<Tabs variant={variant}>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1 content</p>
</TabPanel>
<TabPanel>
<p>Tab 2 content</p>
</TabPanel>
<TabPanel>
<p>Tab 3 content</p>
</TabPanel>
</TabPanels>
</Tabs>
</React.Fragment>
))}
</Flex>
</VStack>
);
}
```
### Fit Width
Add `fitted` prop, to fit the tabs width to the container.
<Wrapper>
<Tabs fitted>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1</p>
</TabPanel>
<TabPanel>
<p>Tab 2</p>
</TabPanel>
<TabPanel>
<p>Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
</Wrapper>
```tsx
<Tabs fitted>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1</p>
</TabPanel>
<TabPanel>
<p>Tab 2</p>
</TabPanel>
<TabPanel>
<p>Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
```
### Controlled
You can control the selected tab by passing the `index` and `onChange` props to the `Tabs` component.
<Wrapper>
<ControlledTabs />
</Wrapper>
```tsx
function ControlledTabs() {
const [index, setIndex] = useState(2);
return (
<>
<Text bold>Current Tab: {index + 1}</Text>
<Tabs
index={index}
onChange={setIndex}
>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1 content</p>
</TabPanel>
<TabPanel>
<p>Tab 2 content</p>
</TabPanel>
<TabPanel>
<p>Tab 3 content</p>
</TabPanel>
</TabPanels>
</Tabs>
</>
);
}
```
### 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.
<Wrapper>
<Tabs isLazy>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1</p>
</TabPanel>
<TabPanel>
<p>Tab 2</p>
</TabPanel>
<TabPanel>
<p>Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
</Wrapper>
```tsx
<Tabs isLazy>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanels>
<TabPanel>
<p>Tab 1</p>
</TabPanel>
<TabPanel>
<p>Tab 2</p>
</TabPanel>
<TabPanel>
<p>Tab 3</p>
</TabPanel>
</TabPanels>
</Tabs>
```
### Overflow
Add `overflowX="scroll"` to the `TabList` if your tabs are overflowing the container.
<Wrapper>
<Box maxW="xs" w='xs' >
<Tabs>
<TabList overflowX="scroll">
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
<Tab>Tab 4</Tab>
<Tab>Tab 5</Tab>
<Tab>Tab 6</Tab>
<Tab>Tab 7</Tab>
</TabList>
<TabPanels>
<TabPanel>1</TabPanel>
<TabPanel>2</TabPanel>
<TabPanel>3</TabPanel>
<TabPanel>4</TabPanel>
<TabPanel>5</TabPanel>
<TabPanel>6</TabPanel>
<TabPanel>7</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Wrapper>
```tsx
<Box maxW="xs" w='xs' >
<Tabs>
<TabList overflowX="scroll">
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
<Tab>Tab 4</Tab>
<Tab>Tab 5</Tab>
<Tab>Tab 6</Tab>
<Tab>Tab 7</Tab>
</TabList>
<TabPanels>
<TabPanel>1</TabPanel>
<TabPanel>2</TabPanel>
<TabPanel>3</TabPanel>
<TabPanel>4</TabPanel>
<TabPanel>5</TabPanel>
<TabPanel>6</TabPanel>
<TabPanel>7</TabPanel>
</TabPanels>
</Tabs>
</Box>
```
---
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
<Wrapper>
<Text>
<>This is a simple text component.</>
</Text>
</Wrapper>
```tsx
<Text>
This is a simple text component.
</Text>
```
### Font sizes
<Wrapper>
<VStack w="full">
<Text size="xs">Extra small</Text>
<Text size="sm">Small</Text>
<Text size="md">Medium</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra large</Text>
<Text size="2xl">2 Extra large</Text>
<Text size="3xl">3 Extra large</Text>
<Text size="4xl">4 Extra large</Text>
<Text size="5xl">5 Extra large</Text>
<Text size="6xl">6 Extra large</Text>
<Text size="7xl">7 Extra large</Text>
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Text size="xs">Extra small</Text>
<Text size="sm">Small</Text>
<Text size="md">Medium</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra large</Text>
<Text size="2xl">2 Extra large</Text>
<Text size="3xl">3 Extra large</Text>
<Text size="4xl">4 Extra large</Text>
<Text size="5xl">5 Extra large</Text>
<Text size="6xl">6 Extra large</Text>
<Text size="7xl">7 Extra large</Text>
</VStack>
```
---
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.
<Wrapper>
<Textarea placeholder="Enter your bio" />
</Wrapper>
```tsx
<Textarea placeholder="Enter your bio" />
```
### Min and Max rows
Use `minRows` and `maxRows` props to control the number of rows the textarea can expand to.
<Wrapper>
<Textarea placeholder="Enter your bio" minRows={2} maxRows={4} />
</Wrapper>
```tsx
<Textarea placeholder="Enter your bio" minRows={2} maxRows={4} />
```
### Resize
Pass `resize` prop to the `Textarea` to enable resizing.
<Wrapper>
<Textarea placeholder="Enter your bio" resize="none" />
<Textarea placeholder="Enter your bio" resize="vertical" />
<Textarea placeholder="Enter your bio" resize="horizontal" />
<Textarea placeholder="Enter your bio" resize="both" />
</Wrapper>
```tsx
<Textarea placeholder="Enter your bio" resize="none" />
<Textarea placeholder="Enter your bio" resize="vertical" />
<Textarea placeholder="Enter your bio" resize="horizontal" />
<Textarea placeholder="Enter your bio" resize="both" />
```
### Textarea Size
<Wrapper>
<VStack w="full">
<Textarea placeholder="Enter your bio" size="sm" />
<Textarea placeholder="Enter your bio" size="md" />
<Textarea placeholder="Enter your bio" size="lg" />
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Textarea placeholder="Enter your bio" size="sm" />
<Textarea placeholder="Enter your bio" size="md" />
<Textarea placeholder="Enter your bio" size="lg" />
</VStack>
```
### Textarea Variant
<Wrapper>
<VStack w="full">
<Textarea placeholder="Enter your bio" variant="outline" />
<Textarea placeholder="Enter your bio" variant="filled" />
<Textarea placeholder="Enter your bio" variant="flushed" />
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Textarea placeholder="Enter your bio" variant="outline" />
<Textarea placeholder="Enter your bio" variant="filled" />
<Textarea placeholder="Enter your bio" variant="flushed" />
</VStack>
```
### Invalid
Pass `isInvalid` prop to the `Textarea` to show the error state.
<Wrapper>
<VStack w="full">
<Textarea placeholder="Enter your bio" variant="outline" isInvalid />
<Textarea placeholder="Enter your bio" variant="filled" isInvalid />
<Textarea placeholder="Enter your bio" variant="flushed" isInvalid />
</VStack>
</Wrapper>
```tsx
<VStack w="full">
<Textarea placeholder="Enter your bio" variant="outline" isInvalid />
<Textarea placeholder="Enter your bio" variant="filled" isInvalid />
<Textarea placeholder="Enter your bio" variant="flushed" isInvalid />
</VStack>
```
### Usage with Field
Combine `Textarea` with `Field` to create a nice looking form element.
<Wrapper>
<Field>
<FieldLabel>Biography</FieldLabel>
<Textarea placeholder="Enter your bio" />
<FieldHelpText>Biography should not contain any bad words.</FieldHelpText>
</Field>
</Wrapper>
```tsx
<Field>
<FieldLabel>Biography</FieldLabel>
<Textarea placeholder="Enter your bio" />
<FieldHelpText>Your biography should not contain any bad words.</FieldHelpText>
</Field>
```
### No auto resize
If you want to disable the auto resize of the textarea, simply use `TextareaNoAutoSize` component.
<Wrapper>
<TextareaNoAutoSize placeholder="Enter your bio" />
</Wrapper>
```tsx
<TextareaNoAutoSize placeholder="Enter your bio" />
```
### RSC usage
TextareaRSC is a RSC compatible component that does not use client handlers.
<Wrapper>
<TextareaRSC placeholder="Enter your bio" />
</Wrapper>
```tsx
<TextareaRSC placeholder="Enter your bio" />
```
---
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
<Wrapper>
<DarkTheme>
<Box p={2} rounded={"l1"} bg="bg">This is Dark Theme</Box>
</DarkTheme>
<LightTheme>
<Box p={2} rounded={"l1"} bg="bg">This is Light Theme</Box>
</LightTheme>
</Wrapper>
```tsx
<DarkTheme>
<Box p={2} rounded={"l1"} bg="bg">This is Dark Theme</Box>
</DarkTheme>
<LightTheme>
<Box p={2} rounded={"l1"} bg="bg">This is Light Theme</Box>
</LightTheme>
```
---
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
<Wrapper>
<Button onClick={() => toast({ title: "Welcome!", description: "Make yourself at home!" })}>
<>Toast</>
</Button>
</Wrapper>
```tsx
function Toast() {
const { toast } = useToast();
return (
<Button onClick={() => toast({ title: "Welcome!", description: "Make yourself at home!" })}>
Toast
</Button>
);
}
```
### Status
The `status` prop changes the color of the Toast and the icon.
<Wrapper>
<Flex wrapped gap={2}>
{["success", "error", "warning", "info", "loading"].map((status) => (
<Button
key={status}
onClick={() => toast({
title: status + "!",
description: `This is a ${status} toast!`,
status
})}
>
{status}
</Button>
))}
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={2}>
{["success", "error", "warning", "info", "loading"].map((status) => (
<Button
key={status}
onClick={() => toast({
title: status + "!",
description: `This is a ${status} toast!`,
status
})}
>
{status}
</Button>
))}
</Flex>
```
### Position
The `position` prop changes the position of the Toast.
<Wrapper>
<Flex wrapped gap={2}>
{["top-left", "top", "top-right", "bottom-left", "bottom", "bottom-right"].map((position) => (
<Button
key={position}
onClick={() => toast({
title: position,
description: `This toast is at ${position}!`,
position
})}
>
{position}
</Button>
))}
</Flex>
</Wrapper>
```tsx
<Flex wrapped gap={2}>
{["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"].map((position) => (
<Button
key={position}
onClick={() => toast({
title: position,
description: `This toast is at ${position}!`,
position
})}
>
{position}
</Button>
))}
</Flex>
```
### Duration
The `duration` prop changes the duration of the Toast.
<Wrapper>
<HStack>
<Button onClick={() => toast({ title: "This toast lasts 10 seconds!", duration: 10_000 })}>
<>10 seconds</>
</Button>
<Button
onClick={() => toast({
title: "This toast lasts forever!",
description: "To close this toast, you need to click the close button.",
duration: Number.POSITIVE_INFINITY,
isClosable: true
})}
>
<>Infinite</>
</Button>
</HStack>
</Wrapper>
```tsx
<HStack>
<Button onClick={() => toast({ title: "This toast lasts!", duration: 10_000 })}>
10 seconds
</Button>
<Button
onClick={() => toast({
title: "This toast lasts forever!",
description: "To close this toast, you need to click the close button.",
duration: Number.POSITIVE_INFINITY,
isClosable: true
})}
>
Infinite
</Button>
</HStack>
```
### Closable
The `isClosable` prop allows you to close the toast.
<Wrapper>
<Button onClick={() => toast({ title: "Closable", description: "This toast is closable!", isClosable: true })}>
<>Closable</>
</Button>
</Wrapper>
```tsx
<Button onClick={() => toast({ title: "Closable", description: "This toast is closable!", isClosable: true })}>
Closable
</Button>
```
### Right content
The `rightContent` prop allows you to render custom content to the right of the toast.
<Wrapper>
<Button
onClick={() => toast({
title: "Right content",
description: "This toast has a right content!",
rightContent: <Button variant='outline' size='sm'>Okay</Button>
})}
>
<>Right content</>
</Button>
</Wrapper>
```tsx
<Button
onClick={() => toast({
title: "Right content",
description: "This toast has a right content!",
rightContent: <Button variant='outline' size='sm'>Okay</Button>
})}
>
Right content
</Button>
```
### Custom Render
The `render` prop allows you to render custom toast.
<Wrapper>
<Button
onClick={() => toast({
title: "This toast is custom!",
render: () => <Box p={4} bg="primary" rounded="l2">This is a custom toast!</Box>
})}
>
<>Custom Render</>
</Button>
</Wrapper>
```tsx
<Button
onClick={() => toast({
title: "This toast is custom!",
render: () => <Box p={4} bg="primary" rounded="l2">This is a custom toast!</Box>
})}
>
Custom Render
</Button>
```
### Update toast
You can use `updateToast` function to update a toast
<Wrapper>
<UpdateToast />
</Wrapper>
```tsx
export function UpdateToast() {
const { toast, updateToast } = useToast();
const [toastId, setToastId] = useState<string | null>(null);
return (
<HStack>
<Button
onClick={() => {
setToastId(
toast({
title: "Loading",
description: "Please wait till file is uploaded!",
status: "loading",
duration: Number.POSITIVE_INFINITY
})
);
}}
>
Send Toast
</Button>
<Button
onClick={() => {
if (toastId) {
updateToast(toastId, {
title: "Success!",
description: "File uploaded successfully!",
status: "success"
});
}
}}
>
Update Toast
</Button>
</HStack>
);
}
```
### Default toast props
Use `defaultToastProps` in the `DreamyProvider` to set default props for all toasts.
```tsx
<DreamyProvider
defaultToastProps={{
position: "top-right",
duration: 10_000,
isClosable: true
}}
>
...
</DreamyProvider>
```
---
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.
<Wrapper>
<Tooltip content="I am visible on hover">
<Text w='fit-content'>Hover me</Text>
</Tooltip>
</Wrapper>
```tsx
<Tooltip content="I am visible on hover">
<Text>Hover me</Text>
</Tooltip>
```
### Open and close delay
You can control the open and close delay of the tooltip by using the `openDelay` and `closeDelay` props.
<Wrapper>
<Tooltip content="I am visible on hover after 1000 miliseconds" openDelay={1000}>
<Text w='fit-content'>Hover me (1s open)</Text>
</Tooltip>
<Tooltip content="I am closed after 1000 miliseconds" closeDelay={1000}>
<Text w='fit-content'>Hover me (1s close)</Text>
</Tooltip>
</Wrapper>
```tsx
<Tooltip content="I am visible on hover after 1000 miliseconds" openDelay={1000}>
<Text>Hover me (1s open)</Text>
</Tooltip>
<Tooltip content="I am closed after 1000 miliseconds" closeDelay={1000}>
<Text>Hover me (1s close)</Text>
</Tooltip>
```
### 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.
<Wrapper>
<Tooltip content="I am not closed on click" closeOnClick={false}>
<Text w='fit-content'>Close on click false</Text>
</Tooltip>
<Tooltip content="I am not closed on pointer down" closeOnPointerDown={false}>
<Text w='fit-content'>Close on pointer down false</Text>
</Tooltip>
<Tooltip content="I am not closed on esc key" closeOnEsc={false}>
<Text w='fit-content'>Close on esc key false</Text>
</Tooltip>
<Tooltip content="I am closed on scroll" closeOnScroll>
<Text w='fit-content'>Close on scroll</Text>
</Tooltip>
</Wrapper>
```tsx
<Tooltip content="I am not closed on click" closeOnClick={false}>
<Text>Close on click false</Text>
</Tooltip>
<Tooltip content="I am not closed on pointer down" closeOnPointerDown={false}>
<Text>Close on pointer down false</Text>
</Tooltip>
<Tooltip content="I am not closed on esc key" closeOnEsc={false}>
<Text>Close on esc key false</Text>
</Tooltip>
<Tooltip content="I am closed on scroll" closeOnScroll>
<Text>Close on scroll</Text>
</Tooltip>
```
### Arrow
You can control the arrow of the tooltip by using the `hasArrow` and `arrowSize` props.
<Wrapper>
<Tooltip content="I have no arrow" hasArrow={false}>
<Text w='fit-content'>No arrow</Text>
</Tooltip>
<Tooltip content="I have an arrow" arrowSize={15}>
<Text w='fit-content'>Arrow size 15</Text>
</Tooltip>
</Wrapper>
```tsx
<Tooltip content="I have no arrow" hasArrow={false}>
<Text>No arrow</Text>
</Tooltip>
<Tooltip content="I have an arrow" arrowSize={15}>
<Text>Arrow size 15</Text>
</Tooltip>
```
---
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.
<Wrapper>
<Collapsed />
</Wrapper>
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}
```
## Scale
Base usage of the Scale component.
<Wrapper>
<Scaled />
</Wrapper>
```tsx
export function Scaled() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Scale
w={"full"}
in={isOpen}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Scale>
</>
);
}
```
### Starting and ending height
You can set the starting and ending height of the content by setting the `startingHeight` and `endingHeight` props.
<Wrapper>
<Collapsed startingHeight={10} endingHeight={80} />
</Wrapper>
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
startingHeight={10}
endingHeight={80}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}
```
### 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.
<Wrapper>
<Collapsed animateOpacity={false} />
</Wrapper>
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
animateOpacity={false}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}
```
### 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.
<Wrapper>
<Collapsed unmountOnExit />
</Wrapper>
```tsx
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
unmountOnExit
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}
```
### Initial scale
You can set the initial scale of the content by setting the `initialScale` prop. This option works for only for Scale component.
<Wrapper>
<Scaled initialScale={0} />
</Wrapper>
```tsx
export function Scaled() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Scale
w={"full"}
in={isOpen}
initialScale={0}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Scale>
</>
);
}
```
---
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.
<Wrapper>
<VisuallyHiddenInput name="intent" value="update" />
<Button color="error" w='fit-content'>
<>Destroy</>
<VisuallyHidden>
<>Content accessible only to screen readers</>
</VisuallyHidden>
</Button>
</Wrapper>
```tsx
<VisuallyHiddenInput name="intent" value="update" />
<Button color="error">
Destroy
<VisuallyHidden>
Content accessible only to screen readers
</VisuallyHidden>
</Button>
```
---
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
<Wrapper>
<Wrap>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
</Wrapper>
```tsx
<Wrap>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
```
### Gap
Use the `gap` prop to set the gap between items.
<Wrapper>
<Wrap gap={10}>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
</Wrapper>
```tsx
<Wrap gap={10}>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
```
### Align
Use the `align` prop to set the alignment of the items.
<Wrapper>
<Wrap align="start">
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize={index % 2 === 0 ? "150px" : "100px"} color="black/87">
{index}
</Flex>
))}
</Wrap>
</Wrapper>
```tsx
<Wrap align="start">
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize={index % 2 === 0 ? "150px" : "100px"} color="black/87">
{index}
</Flex>
))}
</Wrap>
```
### Justify
Use the `justify` prop to set the justification of the items.
<Wrapper>
<Wrap justify="center">
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
</Wrapper>
```tsx
<Wrap justify="center">
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
```
### Row and Column Gap
Use the `rowGap` and `columnGap` props to set the gap between rows and columns.
<Wrapper>
<Wrap rowGap={10} columnGap={5}>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
</Wrapper>
```tsx
<Wrap rowGap={10} columnGap={5}>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>
```
---
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.
<Wrapper>
<UseActionKey />
</Wrapper>
```tsx
export function UseActionKey() {
const actionKey = useActionKey();
return <Text>Action key: {actionKey}</Text>;
}
```
### 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.
<Wrapper>
<UseCanUseDOM />
</Wrapper>
```tsx
export function useCanUseDOM() {
const canUseDOM = useCanUseDOM();
return <Text>Can use DOM: {canUseDOM ? "Yes" : "No"}</Text>;
}
```
---
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.
<Wrapper>
<UseClipboard />
</Wrapper>
```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 (
<Flex
col
gap={2}
align={"flex-start"}
>
<Text>Copied: {copied ? "Yes" : "No"}</Text>
<Text>Error: {error ? "Yes" : "No"}</Text>
<HStack>
<Button onClick={handleCopy}>Copy</Button>
<Button onClick={reset}>Reset</Button>
</HStack>
</Flex>
);
}
```
---
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
<Wrapper>
<UseColorMode />
</Wrapper>
```tsx
export function UseColorMode() {
const { colorMode, setColorMode, toggleColorMode } = useColorMode();
return (
<Flex col gap={2}>
<Text>Current color mode: {colorMode}</Text>
<Flex wrapped gap={2}>
<Button onClick={() => setColorMode("light")}>Light</Button>
<Button onClick={() => setColorMode("dark")}>Dark</Button>
<Button onClick={toggleColorMode}>Toggle</Button>
</Flex>
</Flex>
);
}
```
---
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.
<Wrapper>
<UseControllable />
</Wrapper>
```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 (
<Flex
col
gap={2}
>
<Flex
wrapped
gap={2}
>
<Button onClick={onOpen}>Open</Button>
<Button onClick={onClose}>Close</Button>
<Button onClick={onToggle}>Toggle</Button>
</Flex>
<Text>Is open: {isOpen ? "Yes" : "No"}</Text>
<Text>Is controlled: {isControlled ? "Yes" : "No"}</Text>
</Flex>
);
}
```
### 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.
<Wrapper>
<UseControllableModal />
</Wrapper>
```tsx
export function UseControllableModal() {
const { isOpen, onOpen, onClose } = useControllable();
return (
<>
<Text>Is open: {isOpen ? "Yes" : "No"}</Text>
<Button onClick={onOpen}>Open</Button>
<Modal
isOpen={isOpen}
onClose={onClose}
>
<ModalOverlay />
<ModalContent>
<ModalCloseButton />
<ModalHeader>Hey!</ModalHeader>
<ModalBody>
<Text>This is a modal body</Text>
</ModalBody>
<ModalFooter>
<Button onClick={onClose}>Close</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
```
---
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.
<Wrapper>
<UseEventListener />
</Wrapper>
```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 <Text>Count: {count}</Text>;
}
```
`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.
<Wrapper>
<UseReducedMotion />
</Wrapper>
```tsx
export function UseReducedMotion() {
const isReducedMotion = useReducedMotion();
return <Text>Is reduced motion: {isReducedMotion ? "Yes" : "No"}</Text>;
}
```
---
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`.
<Wrapper>
<UseUpdateEffect />
</Wrapper>
```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 (
<Flex
col
gap={2}
>
<Text>Count: {count}</Text>
<Button
onClick={() => {
setCount((prev) => {
const newCount = prev + 1;
localStorage.setItem("count", newCount.toString());
return newCount;
});
}}
>
Increment
</Button>
</Flex>
);
}
```