Pitsi UI
  • Home
  • Docs
1
1
Back to blog
Dec 2, 2024Tutorial

Getting Started with pitsi/ui

A comprehensive guide to installing and setting up pitsi/ui in your project. From CLI installation to your first component.

4 min read

Ready to build beautiful interfaces without the design headache? Let's get you set up with pitsi/ui in just a few minutes.

Prerequisites

Before we begin, make sure you have:

  • Node.js 18 or higher installed
  • A React project (Next.js, Vite, or similar)
  • npm, pnpm, yarn, or bun as your package manager

Installing the CLI

The pitsi/ui CLI is the fastest way to add components to your project. Install it globally or use it directly with npx:

pnpm dlx pitsi@latest init

This command will:

  1. Detect your project type automatically
  2. Create a components.json configuration file
  3. Set up your CSS variables and Tailwind configuration
  4. Install required dependencies

Adding Your First Component

Once initialized, adding components is as simple as:

pnpm dlx pitsi@latest add button

The CLI will fetch the button component and all its dependencies, placing them directly in your project. You own the code—customize it however you like.

What's Next?

Now that you're set up, explore our component library. Start with foundational components like Button, Card, and Input, then move on to more complex ones like Dialog, Command, and Data Table.

Welcome to pitsi/ui. Happy building!

© 2025 pitsi/ui. All rights reserved.

Sign In