---
title: Intro to FARMUI components
description: This will guide you on how to install the CLI tools and get started using FARMUI.
lastModified: 2024-06-04
---

# What is FarmUI?


FarmUI is a client-first and animation-rich UI component library that is built on top of several popular libraries, including Radix and Shadcn. It is designed to provide developers with a comprehensive set of UI components and tools that are optimized for performance and user experience.

The "client-first" approach of FarmUI means that the library is primarily focused on delivering an exceptional user experience on the client-side, with a strong emphasis on smooth animations and responsive design. This makes FarmUI well-suited for building modern, web-based applications that require a high degree of interactivity and visual appeal.

The library's use of Radix and Shadcn as its foundation provides developers with access to a wide range of primitive components and utilities, which can be easily customized and combined to create complex UI elements. This approach allows for a high degree of flexibility and control, while still maintaining a consistent and cohesive look and feel across the application.

In addition to the Radix and Shadcn components, FarmUI also integrates with other primitive providers, such as Tailwind CSS, to offer a comprehensive set of styling and layout options. This ensures that developers can create visually stunning and highly functional user interfaces without having to reinvent the wheel.


## Frameworks

We Provide Support for Components Developed Using React, Vue.js, Svelte, HTML, and Alpine.js.
And for the interactive components we use the following Libraries:


## Installation Guide

1. Install the npm package
```bash
pnpm add @kinfe123/farm-ui
```

2. Adding the UI or component based on that ID
```bash
pnpm farm-ui add {id}
```
<Callout>
**id** - being the id of the component from the component section
</Callout>
3. Specify the directory where you want the componnt to be installed or it uses **components** dir by default. 

4. Finally you get to see the component or UI block inside of **farmui** directory nested on directory you have mentioned on step 4.



