Getting Started with Templates

Welcome to Percept UI! This guide will walk you through setting up and using the templates for popular frameworks with minimal configuration, allowing you to dive straight into building your product.

Installation

To begin using the templates, first, you need to install the Percept UI CLI globally. This will allow you to easily create projects with your desired template.

Install the CLI globally using npm:

npm install -g @perceptui/cli

Or run without installation:

npx @perceptui/cli

Usage

Commands

1. Initialize a project:

Create a new project with specific template:

percept-cli create <project-name> --template <template-name> [--path <path>]

• project-name: Name of the project.
• --template, -t: Name of the template to use.
• --path, -p: Optional path where the project should be created (default: current directory).

percept-cli create my-app --template vite-react-tailwind

2. List Available Templates:

Display all predefined templates:

percept-cli list

3. Add a New Template:

Coming soon…

Templates

Predefined Templates

The CLI comes with the following templates by default:

• vite-react-tailwind

  • Description: Vite + React + Tailwind CSS starter template.
  • Repository: vite-react-tailwind-template

• vite-react-ts-tailwind

  • Description: Vite + React + TS + Tailwind CSS starter template.
  • Repository: vite-react-ts-tailwind-template

• vite-react-shadcn

  • Description: Vite + React + ShadCN starter template.
  • Repository: vite-react-shadcn-template

Conclusion

You’re now ready to start building your project using Percept UI’s templates! These templates are designed to save you time and help you focus on creating the product instead of setting up configurations. If you have any questions, feel free to check out our full documentation or reach out to the community.

Happy coding! 🚀