# Introduction

Unstyled React components for accessible interfaces.

Logic UI is a library of **headless React primitives**. The components handle behaviour and
accessibility (state, keyboard, focus, ARIA) and render no styles: you bring the CSS.

It is built on [Base UI](https://base-ui.com) and extends it. Every Base UI component is
re-exported under the same path, with the same API, and Logic UI adds the components Base UI
doesn't have, written the same way.

It covers the common building blocks, such as dialogs, menus, popovers, selects and tabs, and
richer components such as the [Lightbox](/docs/components/lightbox) and the
[Clipboard](/docs/components/clipboard).

## Built on Base UI

- **Same components.** `@logic-ui/react/dialog` is `@base-ui/react/dialog`, `@logic-ui/react/menu`
  is `@base-ui/react/menu`, and so on for every public entry point. The sidebar links each one to its
  full docs on [base-ui.com](https://base-ui.com).
- **More components.** Logic UI adds its own primitives, such as the
  [Lightbox](/docs/components/lightbox) and the [Clipboard](/docs/components/clipboard). They follow
  Base UI's API, so they compose with its parts.
- **A drop-in replacement.** An app that already uses Base UI can swap it for Logic UI without
  changing any import. See [Migrate from Base UI](/docs/quick-start#migrate-from-base-ui).

Each Logic UI release pins one Base UI version, listed in the [changelog](/docs/changelog).

## One package

Apps install only `@logic-ui/react`, never `@base-ui/react` next to it. Every component comes from
it, so there is one copy of Base UI and all components share the same contexts.

```bash
pnpm add @logic-ui/react
```

## One API

Every component works the same way:

- **Parts.** A component is a namespace of parts: `<Clipboard.Root>`, `<Clipboard.Trigger>`. Each
  part renders one element and takes its usual HTML props.
- **`render` prop.** Swap the element or compose another component:
  `} />`.
- **`data-*` state.** State shows up as attributes (`data-copied`, `data-zoomed`), so you style it
  with CSS or Tailwind variants: `data-copied:text-green-500`.
- **Controlled or not.** Values come as `value` / `defaultValue` / `onValueChange`, named after
  the value: `open` / `defaultOpen` / `onOpenChange`.

## Server Components

Every part, context and hook file starts with `"use client"`, and the namespaces don't, so you
can import `Lightbox` from a Server Component and render its parts there.