Installation

How to install and configure shadcn/ui in your project.

shadcn/ui is a collection of reusable components built using Radix UI and Tailwind CSS.

Prerequisites

Before you start, make sure you have the following:

  • Node.js 18.0.0 or higher
  • A project with React 18 or higher
  • Tailwind CSS installed and configured

Installation Methods

npx shadcn@latest init

This will install dependencies, set up tailwind.config.js, and configure your project to use shadcn/ui.

After installation, you can start adding components to your project:

How to Add Components

npx shadcn@latest add https://components.tlex.ae/r/field01.json

Theming

shadcn/ui uses CSS variables for theming. You can customize the theme by editing the CSS variables in your globals.css file.

Check out the theming documentation for more information.

Dark Mode

shadcn/ui comes with a dark mode implementation. You can add dark mode support to your application by following the dark mode guide.