Quickstart

Get started with the React component library quickly and effortlessly by following these simple instructions.

Prerequisites

The components are built with Typescript, React and Tailwind CSS. Ensure these libraries are installed in your project before proceeding. If not, consult the official documentation of technologies for installation instructions.

Installation

First, the components depend on a few dependencies, that you need to install first:

Framer Motionfor animations

Lucidefor icons

Install them in your project using the command:

npm i framer-motion lucide-reactCopy

Additionally, the components utilize a Tailwind helper function for merging Tailwind classes. To integrate it into your project, install the following dependencies:

npm i clsx tailwind-mergeCopy

Then, create a new file in your React project and add the following function to it:

1import { type ClassValue, clsx } from "clsx"
2import { twMerge } from "tailwind-merge"
3
4export function cn(...inputs: ClassValue[]) {
5  return twMerge(clsx(inputs))

Copy

Also, some components require images. You need to replace the image src urls with your own images.

Finally, ensure your project includes specific colors used by the components (e.g. for gradients). You can create a colors file with the same colors as in this documentation or reference it to create your own colors. You can find the colors used in this documentation on the Colors Page.

Thats it! Now you can use the components in your project.

Recommendations

The components are optimized for Dark Mode. If you intend to use them in a light mode application, you may need to adjust some colors in the code for better visual appeal. To experience the same color scheme as this documentation in your app, apply the Tailwind classes "bg-[#0d0d0d] text-white" to your wrapper component or body.