Getting Started

Installation

Infinity UI currently works as an installable component registry. Add a component with the shadcn CLI, make sure Tailwind is available, and then install any extra npm packages listed on that component’s docs page.

React 19 or newer

Next.js 16 or a compatible React setup

Tailwind CSS 4

Framer Motion 12 for animated components

Install Package

shadcn CLIPackage manager

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/glow-border-card

DependenciesPackage manager

npm install framer-motion

Quick Setup

Add a component from the registry

Use the shadcn CLI with an InfinityUI registry URL to pull the component source directly into your project.

Confirm Tailwind is active

Infinity UI components are styled with Tailwind utility classes, so your project should already be compiling Tailwind CSS.

Install any package dependencies shown on the docs page

Each component page now shows the exact npm packages used by that component, so you only install what you need.

Example Import

React example

import { GlowBorderCard } from "@/components/infinity-ui/GlowBorderCard";

export default function Example() {
  return (
    <GlowBorderCard>
      <h2 className="text-xl font-bold">Hello Infinity</h2>
      <p className="text-zinc-400">Start with one component and customize from there.</p>
    </GlowBorderCard>
  );
}