Dreamy UI Logo

Dreamy UI

Your UI

v2
Sponsor

Discord

Docs
V2 is here with React Server Components support

Build interfaces that feel
ethereally good

A React component library built for those who care about craft. Accessible, composable, and obsessively designed. Powered by Panda CSS.

Get Started
Discord
pnpm dlx dreamy init

React 19+

100% TypeScript

React Server Components

AI Ready

Works with your favorite tools

Field

GitHub Stars
0
+0%

Stat

Switch

Loading...

Fetching your dreams

Spinner

Opacity

68%

Slider

Button

Enter your PIN

PinInput

By the numbers

Built for modern, reliable websites

Everything you need to ship production-quality interfaces without the compromises.

60+

Components

100%

TypeScript

Zero

Runtime CSS

WCAG

Accessible

Why Dreamy UI

Everything you need

Every API decision, every animation, every token was made with intention. Because the tools you use shape the things you build.

60+ Components

A wide range of production-ready components, from simple Buttons to complex DatePickers and Autocomplete inputs.

Lightning fast

Tree-shakable, zero runtime CSS. Panda CSS generates only the styles your components actually use and ships minimal bytes.

Deep customization

One design-token API controls your entire palette. Override any component variant with a simple recipe extension.

Accessible by default

Every component is WCAG 2.1 AA compliant. Keyboard navigation, ARIA attributes, and focus management are all handled out of the box.

Seamless dark mode

Dark mode ships as a first-class citizen. Switch modes with a single hook function, no extra CSS overrides needed.

Buttery animations

Entrance and exit animations powered by Motion. Disable globally with a single prop for accessibility-first workflows.

AI Ready

Dreamy UI is built for the AI era. Components, hooks, and APIs are designed for seamless integration into AI-driven apps, with robust type safety that scales with your agents and automations.

Useful hooks

Control your UI with useful hooks like useControllable, useClipboard, useIsMobile, and more. Those are really awesome hooks, even your AI agent will use them.

One-command setup

Run npx create-dreamy-app and you're live. Supports Next.js, Vite, React Router and Remix out of the box with no manual config required.

Styling foundation

Built on top of Panda CSS

Panda CSS is a powerful, flexible CSS-in-JS library that lets you build performant, build-time styles using style props with no runtime overhead.

Recipes. Generates CSS only for what you use.

No runtime styles. Styles are extracted at build time.

CSS-in-JS DX. Amazing developer experience, best-in-class performance.

<Flex col w="full" gap="4">
    <Heading size="4xl">
        Built on top of Panda CSS
    </Heading>
    <Text size="lg">
        Panda CSS is a powerful, flexible CSS-in-JS library 
        that allows you to build performant, build-time styles 
        using style props.
    </Text>
</Flex>

Get started

Ready to build something dreamy?

Join developers shipping delightful products with Dreamy UI. Start in minutes, scale without limits.

Start Building
Browse Components

Community

You're not building alone

Dreamy UI is built in public, with and for the people who use it. Come hang out, contribute, or just lurk. All are welcome.