SATIS UI Setup Guide

Welcome to SATIS UI! This guide will walk you through the necessary steps to set up our component library in your project.

SATIS UI is built upon the shadcn/ui ecosystem. We combine the accessibility and structure of shadcn with advanced animations using GSAP and Motion.

Step 1: Prerequisites - Setup shadcn/ui

Before integrating SATIS UI, your project must have shadcn/ui and Tailwind CSS installed.

1. Initialize shadcn/ui in your project (if you haven't already):

   npx shadcn@latest init

2. Follow the official setup guide if you need framework-specific instructions:

   View shadcn/ui Installation Guide

Step 2: Install Animation Dependencies

SATIS UI uses a hybrid approach to animation. We leverage Motion for declarative, gesture-based interactions (like hover states and layout transitions) and GSAP for high-performance, complex sequencing and scroll-triggered effects.

To understand why we use both engines and how to choose between them for your own components, read my deep dive here:

Install Packages

Install the animation libraries required by our components:

npm install motion gsap @gsap/react

yarn add motion gsap @gsap/react

pnpm add motion gsap @gsap/react

Step 3: Installing Components

You can install SATIS UI components directly using the shadcn CLI or by manually copying the code.

Option A: CLI (Recommended)

You can install components directly by pointing the shadcn CLI to our registry URLs. This will automatically install dependencies and place the component in your project.

Look for the installation command on each component page, which looks like this:

npx shadcn@latest add https://satisui.xyz/r/micro-expander.json

Option B: Manual Installation

If you prefer full control, you can copy and paste the code manually:

1. Navigate to the component documentation.
2. Go to the Manual section of the documentation and follow the instructions.
3. Copy the code and paste it into a file in your components/satisui folder.
4. Ensure you have installed the specific dependencies listed for that component.

Step 4: Usage

Once installed, import and use the component just like any other React component:

import { MicroExpander } from '@/components/ui/micro-expander';

export default function Page() {
  return <MicroExpander {...}/>;
}

Happy building!