JSPM

��# Vibrant Loaders A versatile collection of unique orange-themed loaders designed for shopping websites and e-commerce applications. These loaders are compatible with React, Next.js, and other JavaScript frameworks. ## Table of Contents - [Vibrant Loaders](#vibrant-loaders) - [Table of Contents](#table-of-contents) - [Installation](#installation) - [Usage](#usage) - [Next.js](#nextjs) - [Loaders](#loaders) ## Installation Install the package using npm: bash npm install vibrant-loaders ## Usage bash import React from 'react'; import { AtomLoader, CosmicLoader, ShoppingLoader } from 'orange-shopping-loaders'; const MyComponent = () => { return ( <div> <h2>Atom Loader</h2> <AtomLoader /> <h2>Cosmic Loader</h2> <CosmicLoader /> <h2>Shopping Loader</h2> <ShoppingLoader /> </div> ); }; export default MyComponent; ## Next.js For Next.js applications, you can use the loaders in the same way as in React. However, to avoid server-side rendering issues with the lucide-react icons used in the ShoppingLoader, you should use dynamic imports: bash import React from 'react'; import dynamic from 'next/dynamic'; const AtomLoader = dynamic(() => import('orange-shopping-loaders').then(mod => mod.AtomLoader), { ssr: false }); const CosmicLoader = dynamic(() => import('orange-shopping-loaders').then(mod => mod.CosmicLoader), { ssr: false }); const ShoppingLoader = dynamic(() => import('orange-shopping-loaders').then(mod => mod.ShoppingLoader), { ssr: false }); const MyNextJsComponent = () => { return ( <div> <h2>Atom Loader</h2> <AtomLoader /> <h2>Cosmic Loader</h2> <CosmicLoader /> <h2>Shopping Loader</h2> <ShoppingLoader /> </div> ); }; export default MyNextJsComponent; markdown # Orange Shopping Loaders A collection of unique loaders for shopping websites. ## Usage jsx import React from 'react'; import { AtomLoader, CosmicLoader, ShoppingLoader } from 'vibrant-loaders'; const MyComponent = () => { return ( <div> <AtomLoader /> <CosmicLoader /> <ShoppingLoader /> </div> ); }; export default MyComponent; ` ## Loaders 1. AtomLoader: A simple atom-like loader with orbiting particles. 2. CosmicLoader: A cosmic-themed loader with planets and stars. 3. ShoppingLoader: A shopping-themed loader with animated shopping elements.