Velour UI

Follow for updates

Twitter @piyushsainii

Getting Started

Introduction

Installation

3D Components

buymeacoffee

3D-ProductCarousel

Interactive3DParticles

Animated Components

Interactive3DParticles

Modal

TextClip

Navbar

Docs

> Vite

Vite

Install and Configure Vite

Create a project

Start by creating a new React project using vite

npm create vite@latest

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

Add this import header in your main css file, src/index.css in our case:

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

Configure the tailwind template paths in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}

Edit tsconfig.json file


{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
 }
],
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
"@/*": ["./src/*"]
 }
 }
}

Edit tsconfig.app.json file

{
"compilerOptions": {
// ...
 "baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}

Update vite.config.ts

npm i -D @types/node


import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})

Run the CLI

npx velour-ui init

That's it

npx velour-ui add button

The command above will add the Button component to your project. You can then import it like this:


import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}