# Logic UI

This is the documentation for the `@logic-ui/react` package.
It contains a collection of components and utilities for building user interfaces in React.
The library is designed to be composable and styling agnostic.
The Tailwind CSS examples are written for Tailwind CSS v4. If `package.json` uses Tailwind CSS v3, automatically convert unsupported styles to v3-compatible equivalents.

## Overview

- [Introduction](/logic-ui/md/index.md): Unstyled React components for accessible interfaces.
- [Quick start](/logic-ui/md/quick-start.md): Install the package, render a primitive and style it with its data attributes.
- [Changelog](/logic-ui/md/changelog.md): What changed in each release.

## Handbook

- [Styling](/logic-ui/md/handbook/styling.md): A guide to styling Base UI components with your preferred styling engine.
- [Animation](/logic-ui/md/handbook/animation.md): A guide to animating Base UI components.
- [Composition](/logic-ui/md/handbook/composition.md): A guide to composing Base UI components with your own React components.
- [Customization](/logic-ui/md/handbook/customization.md): A guide to customizing the behavior of Base UI components.
- [Forms](/logic-ui/md/handbook/forms.md): A guide to building forms with Base UI components.
- [TypeScript](/logic-ui/md/handbook/typescript.md): A guide to using TypeScript with Base UI.

## Components

- [Clipboard](/logic-ui/md/components/clipboard.md): A button that copies a value and shows that it was copied.
- [Cropper](/logic-ui/md/components/cropper.md): An image cropper with handles, a fixed or free aspect ratio, zoom, rotation and touch gestures.
- [Lightbox](/logic-ui/md/components/lightbox.md): A full-screen viewer that opens from its triggers, with mobile gestures and zoom.

## Base UI

- [Accordion](https://base-ui.com/react/components/accordion)
- [Alert Dialog](https://base-ui.com/react/components/alert-dialog)
- [Autocomplete](https://base-ui.com/react/components/autocomplete)
- [Avatar](https://base-ui.com/react/components/avatar)
- [Button](https://base-ui.com/react/components/button)
- [Checkbox](https://base-ui.com/react/components/checkbox)
- [Checkbox Group](https://base-ui.com/react/components/checkbox-group)
- [Collapsible](https://base-ui.com/react/components/collapsible)
- [Combobox](https://base-ui.com/react/components/combobox)
- [Context Menu](https://base-ui.com/react/components/context-menu)
- [Dialog](https://base-ui.com/react/components/dialog)
- [Drawer](https://base-ui.com/react/components/drawer)
- [Field](https://base-ui.com/react/components/field)
- [Fieldset](https://base-ui.com/react/components/fieldset)
- [Form](https://base-ui.com/react/components/form)
- [Input](https://base-ui.com/react/components/input)
- [Menu](https://base-ui.com/react/components/menu)
- [Menubar](https://base-ui.com/react/components/menubar)
- [Meter](https://base-ui.com/react/components/meter)
- [Navigation Menu](https://base-ui.com/react/components/navigation-menu)
- [Number Field](https://base-ui.com/react/components/number-field)
- [OTP Field](https://base-ui.com/react/components/otp-field)
- [Popover](https://base-ui.com/react/components/popover)
- [Preview Card](https://base-ui.com/react/components/preview-card)
- [Progress](https://base-ui.com/react/components/progress)
- [Radio](https://base-ui.com/react/components/radio)
- [Scroll Area](https://base-ui.com/react/components/scroll-area)
- [Select](https://base-ui.com/react/components/select)
- [Separator](https://base-ui.com/react/components/separator)
- [Slider](https://base-ui.com/react/components/slider)
- [Switch](https://base-ui.com/react/components/switch)
- [Tabs](https://base-ui.com/react/components/tabs)
- [Toast](https://base-ui.com/react/components/toast)
- [Toggle](https://base-ui.com/react/components/toggle)
- [Toggle Group](https://base-ui.com/react/components/toggle-group)
- [Toolbar](https://base-ui.com/react/components/toolbar)
- [Tooltip](https://base-ui.com/react/components/tooltip)

## Utils

- [CSP Provider](https://base-ui.com/react/utils/csp-provider)
- [Direction Provider](https://base-ui.com/react/utils/direction-provider)
- [mergeProps](https://base-ui.com/react/utils/merge-props)
- [useRender](https://base-ui.com/react/utils/use-render)