Velora UI - Modern React Component Library

Welcome to the Velora UI installation guide! This document will walk you through the process of adding Velora UI to your Next.js application. Velora UI is built on top of Tailwind CSS and uses Shadcn/ui components, providing a highly customizable and accessible foundation for your projects.

Prerequisites

Before you begin, ensure you have Node.js (v18.x or higher) and npm/yarn/pnpm installed on your system. This guide assumes you are starting with a Next.js project. If you don't have one, you can create a new one:

Create a new Next.js project

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

Follow the prompts, choosing TypeScript, Tailwind CSS, and ESLint.

Step 1: Install Velora UI

Velora UI components are designed to be easily integrated into your project. You can install the core library using your preferred package manager:

Install with npm

npm install @velora/ui

Install with yarn

yarn add @velora/ui

Install with pnpm

pnpm add @velora/ui

Step 2: Configure Tailwind CSS

Velora UI components are styled with Tailwind CSS. If you created your Next.js project with Tailwind, you'll already have a `tailwind.config.js` file. You need to ensure that Tailwind can scan the Velora UI components for classes.

Update `tailwind.config.js`

Add `@velora/ui` to your `content` array in `tailwind.config.js`:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
    // Add Velora UI to content
    "./node_modules/@velora/ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
}

Step 3: Add Global CSS

Velora UI relies on a global CSS file for base styles and CSS variables. You should import this into your main `app/layout.tsx` or `app/globals.css` file.

Import `globals.css`

Ensure your `app/globals.css` (or equivalent) includes the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Add any custom global styles here */

Then, import `app/globals.css` into your `app/layout.tsx`:

import './globals.css'
// ...
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Step 4: Basic Usage

You're now ready to use Velora UI components! Here's a simple example of how to import and use a `Button` component.

Using a Velora UI component

import { Button } from '@velora/ui'

export default function MyPage() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Button variant="default" size="lg">
        Click Me!
      </Button>
    </div>
  )
}

Next Steps

Congratulations! You've successfully installed Velora UI. Now you can explore the component documentation to see all available components and their props. Don't forget to check out the theming guide to customize Velora UI to match your brand!

Installation Guide: Get Started with Velora UI