Setup Guide
A guide to setting up the SATIS UI library in your project, including prerequisites like shadcn/ui and GSAP.
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 excellent shadcn/ui environment, which utilizes Tailwind CSS for styling. Therefore, before you can use any SATIS UI components, you'll need to have shadcn/ui and its dependencies properly configured.
Step 1: Prerequisites - Setup shadcn/ui
Before integrating SATIS UI, your project must have shadcn/ui and Tailwind CSS installed and configured. The official shadcn/ui documentation provides a straightforward guide for various frameworks.
Please follow the official setup guide on the shadcn/ui website to get started.
Go to the shadcn/ui Installation Guide
This process will also guide you through the setup of Tailwind CSS, which is essential for styling the components.
Step 2: Animation with GSAP
We use the GreenSock Animation Platform (GSAP) to implement complex and high-performance animations within our components. While you don't need to be a GSAP expert to use SATIS UI, having it in your project can be beneficial if you wish to customize or create your own intricate animations.
For information on how to install and use GSAP, you can refer to their official documentation.
Learn more about GSAP Installation
Step 3: Installing SATIS UI Components
Coming Soon: Installation via CLI
We are actively developing a Command Line Interface (CLI) to make the installation process as seamless as possible. This will allow you to add SATIS UI components to your project with a simple command.
Current Installation Method
For now, please refer to the documentation for the specific component you are interested in. Each component's page contains detailed instructions on how to integrate it into your web applications.
Step 4: Usage
Once you have shadcn/ui and the relevant libraries installed, you can begin using SATIS UI components. Navigate to the documentation for the particular component you wish to use to find implementation details, props, and examples.
Happy building!