Logic UI

docs/overview

Introduction

Unstyled React components for accessible interfaces.

markdownedit

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 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 and the 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.
  • More components. Logic UI adds its own primitives, such as the Lightbox and the 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.

Each Logic UI release pins one Base UI version, listed in the 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.

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: <Lightbox.Next render={<Toolbar.Button />} />.
  • 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.