Get Started

Installation

Direct URL

Install components directly without any configuration:


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/button.json

Namespaced Registry

For a cleaner workflow, configure the Nessra UI registry in your components.json:

components.json

{
  "$schema": "https://shadcn.com/schema.json",
  "registries": {
    "nessra-ui": "https://nessra-ui.vercel.app/r/{name}.json"
  }
}

Then install components using short names:


pnpmnpmyarnbun
pnpm dlx shadcn@latest add nessra-ui/button

Portals Setup

Nessra UI uses portals for popup components like Dialog and Popover. To ensure these display above all page content, add an isolation: isolate style to your application root element:

globals.css

.root {
  isolation: isolate;
}

This creates a separate stacking context, preventing z-index conflicts with other page styles.

Prerequisites

Your project must be set up with:

React 18+
Tailwind CSS v4
TypeScript (recommended)

Make sure you have initialized shadcn/ui in your project:


pnpmnpmyarnbun
pnpm dlx shadcn@latest init

Working with LLMs

Nessra UI is built on Radix UI. When working with AI assistants, you can reference the Radix UI documentation in markdown format for accurate component APIs and patterns.

See Radix UI Primitives for documentation.