Installation
Learn how to quickly set up Pittaya UI in your project and start using its components right away.
Need to install the following packages:pittaya@0.0.8Ok to proceed? (y) yWelcome to Pittaya UI!✔ Which style would you like to use? › Default✔ Where is your globals.css file? … app/globals.css✔ Use React Server Components? … yes✔ Path for components? … @/components✔ Path for utils? … @/lib/utils✔ components.json created successfully!✔ Dependencies installed!✅ Pittaya UI configured successfully!Next steps:npx pittaya add button - Add a componentnpx pittaya add --all - Add all componentsRequirements
Before installing Pittaya UI, ensure that your project meets the following requirements:
- Node.js version 14 or higher
- npm or yarn package manager
- React version 16.8 or higher
Installation Steps
1
Initialize a React Project
Pittaya UI is fully compatible with Shadcn and extends it with advanced component options. To get started, set up your React project following the Shadcn Installation Guide.
If you already have a project compatible with Shadcn, you can skip this guide.
2
Install Pittaya CLI
Run the following command to initialize Pittaya UI in your project:
npx pittaya initNeed to install the following packages: pittaya@0.0.8 Ok to proceed? (y) y Welcome to Pittaya UI! ✔ Which style would you like to use? › Default ✔ Where is your globals.css file? … app/globals.css ✔ Use React Server Components? … yes ✔ Path for components? … @/components ✔ Path for utils? … @/lib/utils ✔ components.json created successfully! ✔ Dependencies installed! ✅ Pittaya UI configured successfully! Next steps: npx pittaya add button - Add a component npx pittaya add --all - Add all components
3
Add Components
Once the setup is complete, you can start adding Pittaya UI components to your project:
Add a specific component:
npx pittaya add button
Or add all components at once:
npx pittaya add --all
4
Start Using Components
You're all set! Import and use Pittaya UI components in your React application:
import { Button } from "@/components/pittaya/ui/button";
export default function App() {
return <Button>Click me</Button>;
}