Dreamy UI is a React UI library that provides a set of customizable components and utilities to build performant, websites with ease.
Installation
Set up Dreamy UI in minutes with the CLI or follow the manual install guide.
AI Agents
Connect LLMs, MCP servers, and skills so your agents can build with Dreamy UI.
Theming
Customize tokens, recipes, and fonts to match your brand with Panda CSS.
Components
Browse 60+ accessible, production-ready components with live examples.
Many UI libraries are built on top of CSS-in-JS libraries like Styled Components or Emotion . 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 , which is a CSS-in-JS library that provides strongly typed CSS styles, that are generated at build time, incredibly improving website performance and not decreasing developer experience.
As a developer, I've always been frustrated by needing to do some hacks to achieve what I wanted to do. That's why I made Dreamy UI modular. Every component, recipe and pattern is fully customizable. Multipart components are built on top of other base components, for eg. <Autocomplete /> is built on top of <Input /> and <Popover />. In this way, while modifying an <Input /> recipe, you also modify the style of <Autocomplete.Input />, without having to copy and paste the code. This keeps the codebase cleaner, easier to maintain and extend and reduces redundancy.
<Autocomplete.Root items={[...]}>
<Autocomplete.Input /> // <Input /> as base
<Autocomplete.Content /> // <Popover.Content /> as base
</Autocomplete.Root>Introducing Dreamy UI, a library that allows you to write your favorite CSS-in-JS code, while still enjoying native CSS performance. Dreamy UI comes with many utilities to write your website even faster with Boolean style props. Let's say you are sure your flex component will be column, so instead of typing flexDir="column", it is possible to write col or column as prop 🎉. You can mix and use any styling style to your preference.
Dreamy UI is highly customizable, meaning you can modify any component recipe in panda config. If you have had used any CSS-in-JS library before, you are fully familiar with styling components and you'll have no problem with Dreamy UI.
Dreamy UI is a component library, which uses Panda CSS and it's peer dependency. Tailwind and panda CSS are not component libraries, they are styling engines that provide a set of utilities to write CSS styles.
Yes, Dreamy UI supports SSR. You can use it with Next.js, React Router, etc. However some components like Popover will throw a hydration warning, as they inject HTML via js, that can't be injected on the server (you can use suppressHydrationWarning prop in the root <html /> tag to ignore it).
motion 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.
Yes, Dreamy UI supports React Server Components. You can use it with Next.js or React Router, etc. Non-client components DO NOT use "use client" directive. Only components that need to use client-side functionality are marked with "use client" on the top of the file. This makes Dreamy UI use the real React Server Components, by not making whole page a client components that don't need it.
No, Dreamy UI is a React library. It is not designed to work with other libraries.