Skip to content

Getting started

Installation

Add Pasta UI Pro components directly to your React project. The source is yours to customize.

1Set up your project

Start with a React project using Tailwind CSS. If you have not configured shadcn yet, initialize it in your project directory.

pnpm dlx shadcn@latest init

2Create a registry token

Pro components are served from a private registry. Create your personal token on your account page and add it to .env.local. Never commit it.

.env.local
PASTAUI_PRO_TOKEN=pastaui_pro_xxxxxxxxxxxx

3Add the registry

Register the @pastaui-pro namespace in components.json. The shadcn CLI reads the token from your environment and sends it with every request.

components.json
{
  "registries": {
    "@pastaui-pro": {
      "url": "https://pro.pastaui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${PASTAUI_PRO_TOKEN}"
      }
    }
  }
}

4Add a component

Copy the installation command from a component page. For example, add the hero section:

pnpm dlx shadcn@latest add @pastaui-pro/hero-section-01

5Make it yours

Import the installed component and adapt the structure, copy, and tokens to your own product.

Browse components