Installation

Add Pesto UI to a React app in a few minutes.

Pre-release

@pestoui/core is not on npm yet. The steps below show the intended setup; installing through the shadcn CLI registry arrives with the first public release.

Before you start

This guide assumes a React 19 app with Tailwind CSS v4 already configured. The system ships its own tokens, so you don’t need a shadcn setup.

Install the package

Add the library and its peer dependencies with your package manager.

bash

1npm install @pestoui/core radix-ui lucide-react

Import the stylesheet

Import the tokens and base layer once, at your app root. This registers the CSS variables every component reads from.

tsx

1// main.tsx
2import "@pestoui/core/styles.css"

Use a component

Import from the single entry point and start building.

tsx

1import { Button, AgentCard } from "@pestoui/core"
2
3export function App() {
4  return <Button size="lg">New agent</Button>
5}

Pull a single primitive

Each component is also reachable directly if you’d rather not import the barrel.

tsx

1import { Slider } from "@pestoui/core/ui/slider"

Theming

Retint the whole system by editing :root in src/index.css, or drop an accent theme class on any subtree — theme-blue, theme-orange, theme-violet, theme-green.

tsx

1<div className="theme-violet">
2  <Button>Follows the violet accent</Button>
3</div>

Test your setup

Render a Button — if it appears as a lime pill with deep-olive ink and picks up a green --selected focus ring on keyboard focus, the tokens and stylesheet are wired correctly.

PreviousIntroduction Next Colors

Pesto UI · 117 documented components