Skip to main content

​
Installation Guide

RigidUI components are designed to integrate seamlessly into your existing React or Next.js project. Follow these steps to get started.

​
Prerequisites

Before installing RigidUI components, ensure your project has the following setup:

Tailwind CSS

Installed and configured for styling

shadcn/ui

Initialized in your project

TypeScript

TypeScript support enabled
RigidUI components require shadcn/ui as a foundation. If you haven’t set up shadcn/ui yet, visit ui.shadcn.com for installation instructions.

​
Quick Start

1

Verify Prerequisites

Make sure your project has Tailwind CSS and shadcn/ui configured. You can verify shadcn/ui installation by checking for a components.json file in your project root.
# Check if components.json exists
ls components.json
If you don’t have components.json, run npx shadcn@latest init to initialize shadcn/ui in your project.
2

Choose Your Component

Browse the Components section to find the component you need. Each component has a unique registry URL for installation.Components are organized into categories:
  • Creative Components - Animated and interactive elements
  • Core Components - Essential UI building blocks
  • Form Elements - Advanced form components
  • Data Display - Components for displaying complex data
  • Security & Access - Authentication and authorization components
3

Install the Component

Use the shadcn CLI to install any RigidUI component. Here’s an example installing the Smart Search component:
npx shadcn@latest add https://rigidui.com/r/smart-search.json
Components will be added to your components/ui directory and are fully customizable.
4

Import and Use

Once installed, import the component in your React or Next.js files:
import { SmartSearch } from "@/components/ui/smart-search";

export default function MyPage() {
  return (
    <SmartSearch
      placeholder="Search anything..."
      onSearch={(query) => console.log(query)}
    />
  );
}
All components are fully typed with TypeScript for an excellent developer experience.

​
Installation Examples

Here are installation commands for popular RigidUI components:

​
Creative Components

npx shadcn@latest add https://rigidui.com/r/data-reveal.json

​
Core Components

npx shadcn@latest add https://rigidui.com/r/smart-search.json

​
Form Elements

npx shadcn@latest add https://rigidui.com/r/smart-form.json

​
Data Display

npx shadcn@latest add https://rigidui.com/r/infinite-scroll.json

​
React Native Support

Many RigidUI components support React Native. Install the React Native variant by using the -rn suffix: 
npx shadcn@latest add https://rigidui.com/r/image-loader-rn.json

​
Hooks

RigidUI also provides custom hooks for enhanced functionality: 
npx shadcn@latest add https://rigidui.com/r/use-location.json

​
Development Environment Setup

If you want to contribute or explore the RigidUI source code:
1

Clone the Repository

git clone https://github.com/FgrReloaded/rigidui.git
cd rigidui
2

Install Dependencies

npm install
3

Start Development Server

npm run dev
The documentation site will be available at http://localhost:3000.

​
Next Steps

Now that you have RigidUI installed, here’s what to do next:

Creative Components

Explore animated components with beautiful effects

Core Components

Browse enterprise-ready components for complex applications

Form Components

Build powerful forms with validation and file handling

View on GitHub

Star the repo and contribute to the project
Need help? Visit our GitHub repository to report issues or ask questions.

Build docs developers (and LLMs) love

Get started for freeTalk to us