Home

ELDORA UI

INTRODUCTION

Create Animated landing pages with components that you can copy and paste into your apps.

Eldora UI is a collection of re-usable components that you can copy and paste into your web apps. It primarily features components, blocks, and templates geared towards creating landing pages and user-facing marketing materials.

Philosophy

I firmly believe that exceptional design is a cornerstone of creating high-quality software. It is one of the key factors in building trust between a company and its users, who often start as strangers on the internet. In the realm of digital business, establishing trust is paramount because it is the first hurdle a potential customer must clear before committing to a purchase or sharing their personal information.

Inferior design can damage your reputation. It can come across as unprofessional, unfinished, and unreliable, suggesting that the team behind it lacks attention to detail and does not prioritize user experience.

Conversely, excellent design signifies that the team is meticulous and dedicated. It inspires confidence in users, leading them to believe that if the team invests so much effort into the finer details, they must also prioritize other crucial aspects of their business, including customer satisfaction.

Eldora UI embodies this philosophy by striving to deliver reusable React components that are not only functional but also aesthetically pleasing and user-friendly. Our commitment to good design ensures that our components are robust, polished, and reliable, ultimately enhancing the overall user experience and fostering trust between our clients and their users.

In essence, our design ethos at Eldora UI reflects a broader commitment to quality and customer care, reassuring users that they are in good hands.

This library is heavily inspired by https://ui.shadcn.com.

INSTALLATION

Next.js

Create a project

Start by creating a new Next.js project using create-next-app:

npx create-next-app@latest my-app --typescript --tailwind --eslint

Install the following dependencies:

npm i clsx tailwind-merge tailwind-variants

Add utils/classes.ts

Add utilities for classnames:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

You're done. You can now start adding components of your choice