Getting Started with QuickUI

Introduction

QuickUI is a modern and flexible React component library built with TypeScript, Tailwind CSS, and Framer Motion. It offers a wide range of pre-built components that are easy to use and customize, making it ideal for building high-quality user interfaces quickly and efficiently.

This guide will walk you through the steps of installing QuickUI, configuring it in your project, and using the components to build your application.

Installation

To start using QuickUI, you'll need to install the library via npm or yarn. Open your terminal and run the following command:

npm install quick-ui-library

Configuration

After installing the library, you'll need to set up Tailwind CSS and Framer Motion in your project if you haven't already. Here's how to do it:

1. Setting up Tailwind CSS

If you're new to Tailwind CSS, you can follow the official installation guide. For a typical React setup, you can install Tailwind CSS with the following commands:

npm install -D tailwindcss postcss autoprefixer

Then, initialize Tailwind CSS:

npx tailwindcss init -p

2. Setting up Framer Motion

Install Framer Motion using npm or yarn:

npm install framer-motion

3. Setting up Clsx

Install Clsx using npm:

npm i clsx

Usage

Once you've completed the installation and configuration, you can start using QuickUI components in your project. Here's an example of how to use the Button component:

import { Button } from 'quick-ui-library';

const MyComponent = () => (
  <Button variant="primary">
    Click Me!
  </Button>
);

This will render a primary button with the label "Click Me!" on your page. You can customize the button by passing different props to suit your design needs.