Ved UI

Installation

Learn how to install and set up Ved UI in your project.

VedUI is built on top of shadcn/ui, extending it with beautiful animations and advanced components. Follow these steps to set up your project.

Setup

Create a new Next.js project with shadcn/ui
First, create a new Next.js project and initialize shadcn/ui:

npx shadcn@latest init

You can use the -d flag for default settings (New York style, Zinc color, and CSS variables):

npx shadcn@latest init -d

Configure components.json
When running the init command, you'll be asked to configure your components.json:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › yes

Install base shadcn/ui components
VedUI builds on top of several shadcn/ui base components. Install them:

npx shadcn@latest add form button input select

Install VedUI components
Finally, install VedUI components:

npx shadcn@latest add https://ved-ui.vercel.app/registry/input-form.json

Next Steps

Now that you have VedUI set up, you can start using our form components:

  1. Browse the components section to see our extended form components collection

Previous

Introduction

Next

Date Expression Input Form

On this page