Docs

Installation

Follow these simple steps to integrate Serenity UI into your project.

Initialize Your Project

Start by setting up your project with Serenity UI. Run the following command in your terminal:

npx @ayushmxxn/serenity-ui@latest init

Add Components

Now that your project is ready, you can start adding components. To add a specific component, use:

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

Use the Component

The added component will be available in your project’s components/ui directory. Here’s an example of how you can use the component:

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

Explore Available Components

To see a list of all available components, run:

npx @ayushmxxn/serenity-ui@latest add

Select and Add Components

After running the command above, you'll be presented with a list of components to choose from. Use the spacebar to select the components you want, and press enter to add them to your project:

Which components would you like to add? 
( ) voice-testimonial
( ) tubelight-navbar
( ) spotlight-card
( ) video-carousel
( ) shortcutmodal
( ) imagegallary
( ) dock