Miracle UI is a simple, modular, and accessible component library, built entirely with pure CSS and no dependencies.
Spend less time writing UI code and more time building a great experience for your customers. Customize your components to fit your brand.
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;
Miracle UI components are developed using React Aria, making exceptional accessibility a primary focus from the ground up.
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..
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;