LogoLogoLogoLogoPaceKit
BlocksGSAP
GSAP
  • Introduction
  • Installation
  • AI Toolkit
  • Modal Selector
  • Modal Ability Selector
  • AI Suggestions
  • Response Writer
  • Token Counter
  • Text Effects
  • Reveal Text
  • Scramble Text
  • Squash Text
  • Bouncing Text
  • Draw Line Text
  • Mouse Wave Text
  • Dot Animations
  • Dot Loader
  • Dot Flow
  • Flow Builder
  • Buttons
  • Text Fall Button
  • Spring Button
  • Utility & Misc
  • Swap
  • Animated Stack
  • Layered Stack
  • Gradient Shadow
  • GitHub Star Counter
  • Profile Peek
  • Flip Reveal
  • Special Cases
  • Reveal On Scroll
  • Stagger on Scroll
  • Liquid Cursor
  • Liquid Glass
  • Tilt Card

Installation

PreviousNext

How to install dependencies and organize your app structure.

Note: Follows the same installation steps as

shadcn/ui

Create project

Run the init (with default options) command to create a new Next.js project or set up an existing one:

npm
yarn
pnpm
bun
npx shadcn@latest init

Add @pacekit to your components.json

components.json
{
  ...
  "registries": {
      "@pacekit": "https://ui.pacekit.dev/r/{name}.json"
  }
}

That's it

You’re ready to start adding components to your project

npm
yarn
pnpm
bun
npx shadcn@latest add @pacekit/text-reveal

The command above will add the TextReveal component to your project. You can then import it using the following syntax:

index.tsx

import { TextReveal } from "@/components/gsap/text-reveal";

export default function Home() {
  return (
      <TextReveal>PaceUI</TextReveal>
  )
}
IntroductionModal Selector

Built by Denish at PaceKit

On This Page

Create projectAdd @pacekit to your components.jsonThat's it

Better Auth Starter

Ship your SaaS faster with a solid starting point for TanStack Start and Next.js

Launch Now