Beautiful UI Components For Next.js Projects – Serenity UI

Serenity UI provides a set of ready-to-use UI components for your Next.js projects. It leverages TailwindCSS for styling, TypeScript for strong typing, and Framer Motion for animations.

The library is open-source and free to use in both personal and commercial endeavors. It provides a wide array of beautiful UI components, including testimonials, pricing sections, authentication forms, carousels, navbars, and many more.

UI Components Included:

• Testimonials
• Pricing
• Authentication
• Carousels
• Navbars
• Cards
• Inputs
• Dock
• Shortcut Modal
• Code Block
• Image Gallery
• Drawer
• NewsLetter
• Cookie
• WaitList
• TechStack
• Toast
• Steps
• Brands
• Star Rating
• Buttons
• Toggle

How to use it:

1. To begin using Serenity UI, you need to initialize it within your Next.js project. Open your terminal and execute the following command:

npx @ayushmxxn/serenity-ui@latest init

2. Once the initialization is complete, you can add individual components to your project. To do this, use the following command structure, replacing [componentname] with the specific component you need:

npx @ayushmxxn/serenity-ui@latest add [componentname]

3. After adding a component, it will be placed in the components/ui directory of your project. You can then import and use it in your pages or other components. Here’s a basic example:

import React from 'react';
import Component from './components/ui/Component';
function Page() {
  return (
    <div>
      <Component/>
    </div>
  );
}
export default Page;

4. To view a complete list of the available components provided by Serenity UI, you can run the following command:

npx @ayushmxxn/serenity-ui@latest add

5. Check out the official documentation for detailed implementation of UI components.