Logo

Introduction

Get up and running with ReactfineUI in minutes. Follow this guide to install and configure the library
in your React application.

Installation

Installation

Install with npm
npm install reactfine-ui lucide-react tailwindcss
Logo

Import CSS

Import the components you need:

Component
import 'reactfine-ui/dist/index.css';
Installation

Basic Usage

Here's a simple example of how to use ReactUI components in your application:

Component
import { Button, Card, Input } from 'reactline-ui'

export default function HomePage() {
  return (
    <Card width='lg' className="p-6">
      <h1 className="text-2xl mb-4">Welcome</h1>
      <Input placeholder="Enter your name" />
      <Button variant="primary" className="!mt-4">
        Get Started
      </Button>
    </Card>
  )
}

Preview:

Welcome

React

Customize the default theme by extending the Tailwind configuration. You can override colors, fonts, and spacing to match your brand.

Performance

ReactUI components are optimized for performance with built-in memoization and lazy loading for better user experience.

Accessibility

All components follow WCAG guidelines and include proper ARIA attributes for screen readers and keyboard navigation.

Next Steps

Now that you have ReactUI installed, you're ready to start building amazing user interfaces. Check out our quick start guide to learn how to use components in your application.