Pace UI

Overview

Pace UI (paceui.com) is a comprehensive UI registry delivering over 200+ curated blocks, landing page starters, and high-performance GSAP-powered animations. Built for Next.js, Remix, and TanStack Start, Pace UI empowers developers to construct high-velocity web apps with cinematic transitions and dark-mode polished surfaces.

Key Features

• 200+ Production Blocks: Complete suites for SaaS onboarding, AI prompt selectors, dynamic streaming writers, and metric feeds.
• GSAP High-Performance Physics: Dedicated registry of GSAP-driven interactive physics, scroll-triggered reveals, and cursor-follow surfaces.
• Universal Framework Support: Compatible with React 19, Next.js App Router, TanStack Start, and Astro.
• shadcn Registry Ready: Easily import blocks into local projects via standard CLI registry commands.

Installation & Quick Start

# Install GSAP dependencies for animation blocks
npm install gsap @gsap/react

import React, { useRef } from 'react';
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';

export function AnimatedPulseCard({ text }: { text: string }) {
  const container = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    gsap.from(".pulse-badge", { opacity: 0, y: 10, stagger: 0.1, duration: 0.6, ease: "power2.out" });
  }, { scope: container });

  return (
    <div ref={container} className="p-5 rounded-2xl bg-card border border-border shadow-xs">
      <span className="pulse-badge inline-block text-xs font-mono font-semibold text-primary">{text}</span>
    </div>
  );
}

Why Choose Pace UI?

1. Cinematic Polish: Elevates standard Tailwind interfaces with Hollywood-grade GSAP animation choreography.
2. Turnkey Templates: Complete end-to-end boilerplate starters for SaaS, documentation portals, and agency showcases.