Get Started
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button Group
- Button
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Container
- Context Menu
- Data Table
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Flex
- Form
- Grid
- Hero Button
- 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
- Card Swipe Carousel
- Cards Parallax
- 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
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
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 commandadd
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 commandview
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 commandsearch
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 commandlist
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 commandTo customize the output directory, use the --output option.
pnpm dlx pitsi@latest build --output ./public/registry