Create accesible and lighter react apps with speed.

Miracle UI is a simple, modular, and accessible component library, built entirely with pure CSS and no dependencies.

Fast

Spend less time writing UI code and more time building a great experience for your customers.

Themeable

You can customize the components with a multitude of properties to suit your preferences.

Light and Dark

Automatic dark mode: MiracleUI instantly switches themes when it detects HTML theme prop changes.

Unique DX

MiracleUI is fully-typed to minimize the learning curve, and provide the best possible developer experience.

Less code. More speed.

Spend less time writing UI code and more time building a great experience for your customers. Customize your components to fit your brand.

image
import { Card, CardProduct } from "@miracle-ui/react"; const Demo = () => { return ( <Card cardWidth="none" isClickable> <CardProduct title="Orange" price="$10.00" imgRoute="https://imageroute0" /> </Card> <Card cardWidth="none" isClickable> <CardProduct title="Strawberry" price="$10.00" imgRoute="https://imageroute1" /> </Card> <Card cardWidth="none" isClickable> <CardProduct title="Strawberry" price="$10.00" imgRoute="imageroute2" /> </Card> ); }; export default Demo;

Built-in

Accessibility

Miracle UI components are developed using React Aria, making exceptional accessibility a primary focus from the ground up.

Developer experience
Alignment control
Collision aware
Accessible
Composable
Light and Dark UI

Dark mode is simple to implement

Miracle UI offers a perfectly balanced dark theme by default, which you can easily apply to your application by adding the "dark" attribute to your HTML..

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
import { Accordion, AccordionItem } from "@miracle-ui/accordion"; const Demo = () => { return ( <Accordion initialOpenIndexes={[0]}> <AccordionItem title="Accordion Item 1" titleFontSize="18px" contentFontSize="16px" /> <AccordionItem title="Accordion Item 1" titleFontSize="18px" contentFontSize="16px" /> <AccordionItem title="Accordion Item 1" titleFontSize="18px" contentFontSize="16px" /> </Accordion> ); }; export default Demo;