Installation

Espresso UI ships as a shadcn registry – components are copied into your project with the shadcn CLI, so you own the code.

Prerequisites

The components target React 19 (Next.js 15 or later) and Tailwind CSS v4 – the theme relies on v4 features like @theme inline and color-mix(), so it will not work on Tailwind v3. The type scale is tuned for the Inter font, so load it in your root layout.

New project

Run init with the Espresso style. Outside a project, the CLI offers to scaffold a fresh Next.js app first, then applies the Espresso theme – CSS variables, radius, shadow and text scales – to app/globals.css.

npx shadcn@latest init https://espresso-base-ui.vercel.app/r/espresso-theme.json

That is the whole setup – the Inter font and the Button component are installed along with the theme. Every other component is one command away:

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/dialog.json

Existing project

In a project that already has React and Tailwind v4, initialize shadcn as usual – this creates components.json, the import aliases and the cn utility – then add components by URL.

npx shadcn@latest init
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/dialog.json

Every Espresso component depends on the Espresso theme, so adding any component also merges the theme tokens into your globals.css. Note: running init with the Espresso style URL instead overwrites app/globals.css – intended for new projects, so prefer the flow above when you have existing styles.

Registry namespace

Instead of pasting full URLs, register the Espresso registry once in your components.json:

{
  "registries": {
    "@espresso": "https://espresso-base-ui.vercel.app/r/{name}.json"
  }
}

Then add components like first-party shadcn items:

npx shadcn@latest add @espresso/button @espresso/command @espresso/mobile-shell

What gets installed

The CLI copies the component source into components/ui/, installs its npm dependencies (for example @base-ui/react or cmdk), pulls any registry dependencies it builds on (theme, dialog, input group), and vendors shared files such as hooks and lib helpers to their expected paths. The code is yours to edit – there is no runtime package to upgrade.

Usage

Import from the local path the CLI wrote to – exactly like shadcn:

import { Button } from "@/components/ui/button"

export default function Page() {
  return <Button>Get started</Button>
}