These 20 free Diwali UI components are the everyday parts of a site or app, styled with diyas, marigolds and rangoli. The set has 11 rangoli loading animations plus a toggle, button, checkboxes, tabs, toast, progress bar, add to cart and offer card. Try each one here, then open it in ExodeUI or download the file.
Updated November 2026
Most Diwali animation you will find is made to be watched: greeting videos and GIFs. This set is made to be used in a product. Each piece does a job, such as switching a setting or showing that a page is loading, and it reacts when someone taps it. Because the runtime draws it live, it stays sharp at any size. It also fits Deepavali pages as it is.
A rangoli animation works well as a loader because the pattern is circular and repeats, so motion can run round it without a visible start or end. The 11 loaders here cover different needs: small spinners, a kolam animation drawn in one line, a diya animation with a passing flame, animated rangoli designs that fill with colour, and a ring with a percentage. Choose by the length of the wait. A short wait needs a small, quick loader, and a long first load gives a slower one time to play.
The offer card, primary button and add to cart cover the path from seeing a sale to placing an order.
Use the tabs to split a catalogue into categories and the wishlist button to let people save items for later.
The checkbox group handles gift options, and the toggle fits settings such as a festive theme or sale alerts.
The rangoli loaders, progress bar and toast tell people what is happening during and after an order.
Festive website design works best when the season adds to a page people can still use quickly. These points apply to a Diwali landing page or any seasonal page.
We make ExodeUI, so weigh this with that in mind. For a greeting in an email or a social post, use a GIF or video, because ExodeUI files need a runtime to play. For a decorative loop with no interaction, a Lottie file or a GIF may be all you need. For one simple spinner, plain CSS adds no dependency and is hard to beat. ExodeUI is a better fit when a component has states and reacts to taps, or when you want the same file in several frameworks.
Open in ExodeUInpm i exodeui.ExodeUICanvas. Taps and hovers work out of the box, and fireTrigger plays it from your code.import { ExodeUICanvas, useExodeUI } from 'exodeui';
export function DiyaToggleSwitch() {
const { setEngine, fireTrigger } = useExodeUI();
return (
<>
<div style={{ width: 400, height: 300 }}>
<ExodeUICanvas
src="/ui-gallery/files/diya-toggle.bexode"
autoPlay
onReady={setEngine}
style={{ width: '100%', height: '100%' }}
/>
</div>
{/* Optional: taps on the canvas already work */}
<button onClick={() => fireTrigger('in_toggle_1')}>Play from code</button>
</>
);
}