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.

Get Started Github

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.

Cherries

$10.00

Blueberries

$10.00

Strawberry

$10.00


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.


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;