Get Started
Get Snyth up and running with our interactive CLI.
The Snyth CLI
The fastest way to integrate Snyth into your project is through our dedicated CLI. It handles the heavy lifting—creating directories, generating configurations, and ensuring your project type is correctly identified.
1. Initialize Your Project
Run the initialization command in your terminal to begin the setup:
npx snyth initbunx snyth init2. Configuration Steps
During the initialization process, the CLI will guide you through the following setup options:
Select Project Type
Choose the environment you are building for. Snyth optimizes its blocks based on this choice:
- React: Optimized for Web and Next.js projects.
- Expo: Recommended for managed Mobile apps.
- Bare React Native: For custom native mobile environments.
Enable TypeScript
Decide if you want full type-safety. We highly recommend keeping this enabled to take advantage of Snyth's robust internal types.
Choose Theme Mode
Select how Snyth should handle styling out of the box:
- Dark Mode: High-contrast dark aesthetics.
- Light Mode: Clean, minimal light aesthetics.
- Both: Full support for system-level preference switching.
Define Component Directory
Tell the CLI where to drop your UI blocks. The default is ./src/components/snyth, but you can point this anywhere in your source tree.
3. Generated Configuration
Once the setup is complete, Snyth generates a snyth.config.json file in your root directory to manage your local component registry:
{
"version": "1.0.0",
"projectType": "expo",
"ts": true,
"mode": "both",
"dir": "./src/components/snyth",
"components": []
}Installation Complete
You are all set! Snyth is now configured and ready to power your UI. Choose your platform below to start adding components.