Documentation / Start here

Installation

Copy editable components into a project you control.

Pebble Pro is live · The Pebble installer is not published yet, so Free components install through the shadcn CLI.

Before you start

Use a standalone Next.js 16, React 19 and Tailwind CSS 4 application with Node.js 22.18 or newer. Free components install through the shadcn CLI, which copies editable source and its dependencies into your project. The Pebble installer is not published yet.

React 19Next.js 16Tailwind 4TypeScript

Set up your project

If your project does not use shadcn yet, set it up first. Review what it changes before you commit.

In your application

npx shadcn@latest init

Add a component

Add your first component

npx shadcn@latest add https://pebbleui.com/r/button.json

Each Free component page shows its own command. Import the component from its location in your app. The source is yours to edit under its supplied license.

Explore Button ↗

Choose your theme

Components use semantic tokens such as background, foreground, border and muted. Keep your own theme if it defines them, or have your agent read Pebble’s full token set through the MCP.

Read the theming guide ↗