Documentation

Introduction

UniqueUI is a collection of 45 animated React components built on motion.dev springs and Tailwind CSS. Every component is a single file — copy it into your project, no package installs needed.

What's included

Text

Effects & Animations

Cards

Backgrounds

Navigation & Overlays

Social & Interaction

Cursor Effects

Data & Layout

Components

Installation

UniqueUI uses a CLI to scaffold components directly into your project. Run init once to set up the config file, then add components individually.

1. Install peer dependencies

bash

npm install motion tailwindcss

2. Initialise UniqueUI in your project

bash

npx uniqueui init

Note: The init command creates a uniqueui.config.json in your project root. This stores your component output path and preferred aliases.

Quick Start

Add your first component with the CLI, then import it directly.

bash

npx uniqueui add typewriter-text

tsx

import { TypewriterText } from "@/components/ui/typewriter-text";

export default function Hero() {
  return (
    <h1 className="text-5xl font-bold text-white">
      Build{" "}
      <TypewriterText
        words={["faster", "smarter", "beautifully"]}
        className="text-purple-400"
      />
    </h1>
  );
}

shadcn CLI

If your app already uses shadcn/ui, install the same UniqueUI files with the official registry format (no uniqueui init). You need shadcn init and @/lib/utils exporting cn — snippets import that path. Catalog: https://uniqueui.com/r/registry.json.

bash

npx shadcn@latest add https://uniqueui.com/r/typewriter-text.json -y

CLI Reference

npx uniqueui init—Create config file and set up your project

npx uniqueui add <component>—Download a component into components/ui

npx uniqueui list—List all available components

npx shadcn@latest add https://uniqueui.com/r/<slug>.json -y—Same component via shadcn registry (requires shadcn init + @/lib/utils)

Key concepts

Single-file components

Each component is one self-contained .tsx file. No internal imports to manage.

No runtime dependencies

Only motion and tailwindcss are peer deps. Everything else is inlined.

Theme-aware

Pass theme="dark" | "light" or wire it to your own context.

Browse component docs

Each component page includes usage scenarios, props reference, and copy-paste code.

Start with Typewriter