docs/overview/quick-start

Quick start

Install the package, render a primitive and style it with its data attributes.

Install#

Install the package. React 19 is a peer dependency.

pnpm add @logic-ui/react@latest

Set up the portal root#

Popups (dialogs, menus, the lightbox) are portaled to the end of <body>. Give your app's root its own stacking context, so they always show on top of it:

app/layout.tsx

<body>
  <div className="isolate">{children}</div>
</body>

Render a primitive#

Import each component from its own path and put its parts together:

pnpm add @logic-ui/react

Style it#

Parts render no styles of their own. Each one takes className and style, and exposes its state as data-* attributes to style it with:

Style the copied state

<Clipboard.Trigger className="text-neutral-500 data-copied:text-green-600">
  Copy
</Clipboard.Trigger>

Every page lists the data attributes and CSS variables of each part in its API reference.

Change the element#

The render prop replaces the element a part renders, or composes it with one of your components. The part's props and behaviour are merged into it:

Compose your own button

<Clipboard.Trigger render={<MyButton variant="ghost" />}>
  Copy
</Clipboard.Trigger>

Import other components#

Every component has its own path in the same package:

Import from one package

import { Dialog } from "@logic-ui/react/dialog";
import { Menu } from "@logic-ui/react/menu";
import { useRender } from "@logic-ui/react/use-render";

Migrate from Base UI#

Logic UI re-exports every public Base UI entry point under the same path, so it can replace @base-ui/react in an existing app. There are two ways to do it.

Keep your imports#

Alias @base-ui/react to Logic UI in package.json, then reinstall. Every import … from "@base-ui/react/…" keeps working and now resolves to Logic UI, and so do the libraries in your app that depend on Base UI:

package.json

{
  "dependencies": {
    "@base-ui/react": "npm:@logic-ui/react@0.4.0"
  }
}

Logic UI's own components are then imported through the same alias:

Import a Logic UI component

import { Clipboard } from "@base-ui/react/clipboard";

Switch your imports#

Or remove @base-ui/react, install @logic-ui/react, and replace the package name in your imports:

pnpm remove @base-ui/react
pnpm add @logic-ui/react

Change the imports

// Before
import { Dialog } from "@base-ui/react/dialog";
// After
import { Dialog } from "@logic-ui/react/dialog";

Either way, check which Base UI version your Logic UI release is built on in the changelog. @base-ui/react/internals/* is private API and is not re-exported.