LogoLogoLogoLogoPaceKit
Components
  • 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
  • Fillable 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": {      /* [!code ++:1] */      "@pacekit-gsap": "https://gsap.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-gsap/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