The latest articles on Forem by Ayushmaan Singh (@ayushmxxn). https://forem.com/ayushmxxn https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2157470%2F50d8f861-0527-44f1-bb58-5bbf5a878b72.jpg https://forem.com/ayushmxxn en Ayushmaan Singh Wed, 02 Oct 2024 15:12:47 +0000 https://forem.com/ayushmxxn/introducing-serenity-ui-a-modern-collection-of-reusable-animated-components-for-building-beautiful-web-interfaces-5ii https://forem.com/ayushmxxn/introducing-serenity-ui-a-modern-collection-of-reusable-animated-components-for-building-beautiful-web-interfaces-5ii <p>Serenity UI is a collection of ready-to-use components designed to help you quickly build modern and visually stunning web interfaces. Built with <strong>Next.js</strong>, <strong>TypeScript</strong>, <strong>Tailwind CSS</strong>, and <strong>Framer Motion</strong>, it offers flexibility, ease of use, and stunning animations.</p> <h2> Why Use Serenity UI? </h2> <ul> <li> <strong>Modern Design</strong>: Create sleek, up-to-date web pages with a polished look.</li> <li> <strong>Tailwind CSS</strong>: Easily customize components with utility classes.</li> <li> <strong>Responsive</strong>: Works perfectly on any screen size.</li> <li> <strong>Framer Motion Animations</strong>: Add smooth, attractive animations effortlessly.</li> <li> <strong>TypeScript Support</strong>: Better productivity with type safety.</li> <li> <strong>Reusable Components</strong>: Use pre-built components like buttons, forms, and carousels.</li> <li> <strong>Customizable</strong>: Easily adjust styles to fit your brand or design.</li> <li> <strong>Dark Mode</strong>: Built-in support for both light and dark themes.</li> <li> <strong>Developer Friendly</strong>: Quick to install, simple to use, and optimized for performance.</li> </ul> <h2> How to Get Started </h2> <h3> 1. Install Serenity UI </h3> <p>To install Serenity UI in your project, run the following command:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npx @ayushmxxn/serenity-ui@latest init </code></pre> </div> <h3> 2. Add Components </h3> <p>To add components to your project, simply use the command:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npx @ayushmxxn/serenity-ui@latest add [component-name] </code></pre> </div> <p>That's it. Start building modern web interfaces with <a href="https://serenity-ui.com" rel="noopener noreferrer">serenity-ui.com</a> today!</p> webdev react opensource frontend