Documentation

Everything you need to discover, preview, and install production-ready shadcn-compatible React components into your project.

Quick Start

Add any component to your project with a single command. No installation required — just use npx.

npx pikui add product-card

This will download the component source code, install npm dependencies, and place editable files directly into your project.

Reaching for it often? Install the CLI globally:npm i -g pikuipikui@0.1.6 on npm →

Prerequisites

Before using PikUI, make sure your project has the following set up:

React & Next.js

React 18+ with Next.js App Router

Tailwind CSS

v3.4+ or v4 configured in your project

shadcn/ui initialized

Run npx shadcn@latest init

TypeScript

All components ship with full type safety

CLI Reference

add

Most used

Install a component and its dependencies into your project. The source code is placed directly in your codebase — you own it completely.

# Install a component by name

npx pikui add product-card

# One component per run — chain them if you need several

npx pikui add pricing-card && npx pikui add stats-card

# Point at a self-hosted registry

npx pikui add product-card --registry https://your-registry.dev

search

Search the registry using fuzzy matching. Searches across names, descriptions, categories, and keywords.

npx pikui search "card"

list

List all available components, optionally filtered by category or type.

# List all components

npx pikui list

# Filter by category

npx pikui list --category card

# Filter by type

npx pikui list --type template

info

View detailed information about a specific component, including its dependencies, variants, and install command.

npx pikui info product-card

interactive mode

Launch an interactive TUI to browse, search, and install components with guided prompts.

npx pikui

How It Works

Browse & Search

Use the web interface or CLI to find components. Preview them live, switch variants, and view the source code before installing.

Install via CLI

Run npx pikui add <name>. Under the hood, this uses the shadcn CLI to fetch the component JSON from the registry and scaffold the files into your project.

Dependencies Resolved

npm packages like lucide-react are installed automatically. Registry dependencies (e.g. card, button) are pulled in as source files too.

You Own the Code

Components are dropped as raw .tsx files into your project. No hidden abstractions, no lock-in. Edit the styles, props, and logic to fit your exact needs.

Component Types

Primitives

Low-level building blocks like Button, Card, Badge, Input, Dialog, and Alert. These follow the exact shadcn/ui conventions and are used as dependencies by higher-level components.

Components

Feature-rich, composable UI elements like Product Card, Pricing Card, Dashboard Stats, and Data Table. Built on top of primitives with variant support via CVA.

Templates

Complete form layouts and page sections like Login Form, Signup Form, Contact Form, and Search Form. Ready to drop into your app and customize.

Blocks

Larger structural components like Navbar and Sidebar that form the skeleton of your application layout. Include responsive behavior and theming.

Customization

Every component supports deep customization out of the box:

Variants

Components use class-variance-authority (CVA) for type-safe variant props. Switch between default, compact, featured, horizontal, and more.

Tailwind CSS

All styling uses Tailwind utility classes and CSS variables from your shadcn theme. Change your theme and every component updates automatically.

Source Code Ownership

Since every file lives in your project, you can rename exports, refactor props, swap icons, or completely overhaul the markup. There is no runtime dependency on PikUI.

Components

Component Types

Runtime Dependencies

Ready to build?

Browse 27 production-ready components, preview them live, and install with a single command.

Browse Components View on npm

Built and maintained by Zulfiqar Haider · LinkedIn