pitsi/ui
HomeDocsComponentsAnimationsBlocksTemplates
1
1
Sections
  • Get Started
  • Components
  • Animations
  • MCP Server
  • Forms
  • Changelog
Get Started
  • Installation
  • CLI
  • llms.txt
Components
  • Accordion
  • Alert Dialog
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button Group
  • Button
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Container
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Flex
  • Form
  • Grid
  • Hover Card
  • Input Group
  • Input OTP
  • Input
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Responsive
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spacer
  • Spinner
  • Squircle
  • Switch
  • Table
  • Tabs
  • Textarea
  • Theme Toggle
  • Toggle Group
  • Toggle
  • Tooltip
  • Typography
  • Unicorn Wrapper
Animations
  • Background Image Parallax
  • Blend Mode Cursor
  • Card Swipe Carousel
  • Cards Parallax
  • Cursor Hover Mask
  • Floating Image Gallery
  • Mouse Hover Gallery
  • Nav Menu
  • Parallax Scroll
  • Perspective Carousel
  • Perspective Section Transition
  • Scroll Expand
  • Scroll Fade
  • Scroll Scale
  • Slide Down
  • Slide Up
  • Smooth Parallax Scroll
  • Smooth Scroll
  • Sticky Footer
  • Text Along Path
  • Text Gradient Opacity
  • Text Parallax
  • Transforms 3d
  • Zoom Parallax
General

Resources, guides, and helpful links.

Documentation
Introduction
Installation
CLI
llms.txt
Next.js
Vite
Laravel
React Router
Pages
Home
Docs
Components
Animations
Blocks
Templates
Templates
Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Connect
GitHub
Twitter
Get Started
Changelog
Legal
Privacy
Terms
Blocks

Larger composed sections for building pages.

Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Category Filter
Comment List
Incentives
Order Confirmation
Order History
Order Summaries
Order Tracking
Product List
Product Overview
Product Review
Refund Form
Refund Overview
Refund Status
Shopping Cart
404 Page
About Us Page
Blog Details
Career Pages
Coming Soon Page
Contactus Page
Legal Pages
Login Page
Maintenance Page
Otp
Pricing Page
About Us Section
Blogs News
Clients
Contact Form
Cta
Faq
Features
Footer
Gallery
Hero Section
How It Works
Integration
Portfolio
Pricing Plans
Stats
Team
Testimonial
Components

Copy and paste UI components into your apps.

Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Checkbox
Collapsible
Combobox
Command
Container
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Flex
Form
Grid
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Responsive
Scroll Area
Segmented Control
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spacer
Spinner
Squircle
Switch
Table
Tabs
Textarea
Theme Toggle
Toggle Group
Toggle
Tooltip
Typography
Unicorn Wrapper
Animations

Beautiful animations and effects for your UI.

Background Image Parallax
Blend Mode Cursor
Card Swipe Carousel
Cards Parallax
Cursor Hover Mask
Floating Image Gallery
Mouse Hover Gallery
Nav Menu
Parallax Scroll
Perspective Carousel
Perspective Section Transition
Scroll Expand
Scroll Fade
Scroll Scale
Slide Down
Slide Up
Smooth Parallax Scroll
Smooth Scroll
Sticky Footer
Text Along Path
Text Gradient Opacity
Text Parallax
Transforms 3d
Zoom Parallax
Sign In

pitsi

PreviousNext

Use the pitsi CLI to add components to your project.

init

Use the init command to initialize configuration and dependencies for a new project.

The init command installs dependencies, adds the cn util and configures CSS variables for the project.

pnpm dlx pitsi@latest init

Options
Installationllms.txt

On This Page

initaddviewsearchlistbuild
Usage: pitsi init [options] [components...]
initialize your project and install dependencies
Arguments:
components name, url or local path to component
Options:
-t, --template <template> the template to use. (next, next-monorepo)
-b, --base-color <base-color> the base color to use. (neutral, gray, zinc, stone, slate)
-y, --yes skip confirmation prompt. (default: true)
-f, --force force overwrite of existing configuration. (default: false)
-c, --cwd <cwd> the working directory. defaults to the current directory.
-s, --silent mute output. (default: false)
--src-dir use the src directory when creating a new project. (default: false)
--no-src-dir do not use the src directory when creating a new project.
--css-variables use css variables for theming. (default: true)
--no-css-variables do not use css variables for theming.
--no-base-style do not install the base pitsi style
-h, --help display help for command

add

Use the add command to add components and dependencies to your project.

pnpm dlx pitsi@latest add [component]

Options

Usage: pitsi add [options] [components...]
 
add a component to your project
 
Arguments:
  components         name, url or local path to component
 
Options:
  -y, --yes           skip confirmation prompt. (default: false)
  -o, --overwrite     overwrite existing files. (default: false)
  -c, --cwd <cwd>     the working directory. defaults to the current directory.
  -a, --all           add all available components (default: false)
  -p, --path <path>   the path to add the component to.
  -s, --silent        mute output. (default: false)
  --src-dir           use the src directory when creating a new project. (default: false)
  --no-src-dir        do not use the src directory when creating a new project.
  --css-variables     use css variables for theming. (default: true)
  --no-css-variables  do not use css variables for theming.
  -h, --help          display help for command

view

Use the view command to view items from the registry before installing them.

pnpm dlx pitsi@latest view [item]

You can view multiple items at once:

pnpm dlx pitsi@latest view button card dialog

Or view items from namespaced registries:

pnpm dlx pitsi@latest view @acme/auth @v0/dashboard

Options

Usage: pitsi view [options] <items...>
 
view items from the registry
 
Arguments:
  items            the item names or URLs to view
 
Options:
  -c, --cwd <cwd>  the working directory. defaults to the current directory.
  -h, --help       display help for command

search

Use the search command to search for items from registries.

pnpm dlx pitsi@latest search [registry]

You can search with a query:

pnpm dlx pitsi@latest search @pitsi -q "button"

Or search multiple registries at once:

pnpm dlx pitsi@latest search @pitsi @v0 @acme

The list command is an alias for search:

pnpm dlx pitsi@latest list @acme

Options

Usage: pitsi search|list [options] <registries...>
 
search items from registries
 
Arguments:
  registries             the registry names or urls to search items from. Names
                         must be prefixed with @.
 
Options:
  -c, --cwd <cwd>        the working directory. defaults to the current directory.
  -q, --query <query>    query string
  -l, --limit <number>   maximum number of items to display per registry (default: "100")
  -o, --offset <number>  number of items to skip (default: "0")
  -h, --help             display help for command

list

Use the list command to list all items from a registry.

pnpm dlx pitsi@latest list @acme

Options

Usage: pitsi list [options] <registries...>
 
list items from registries
 
Arguments:
  registries             the registry names or urls to list items from. Names
    must be prefixed with @.

Options

Usage: pitsi list [options] <registries...>
 
list items from registries
 
Arguments:
  registries             the registry names or urls to list items from. Names
    must be prefixed with @.

build

Use the build command to generate the registry JSON files.

pnpm dlx pitsi@latest build

This command reads the registry.json file and generates the registry JSON files in the public/r directory.

Options

Usage: pitsi build [options] [registry]
 
build components for a pitsi registry
 
Arguments:
  registry             path to registry.json file (default: "./registry.json")
 
Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory.
  -h, --help           display help for command

To customize the output directory, use the --output option.

pnpm dlx pitsi@latest build --output ./public/registry