# logic2b ui

> Copy-paste UI components with an open JSON registry, designed for
> consumption by LLMs and coding agents.

Every docs page is available as plain Markdown by appending `.md` to its URL.
The registry index is at https://ui.logic2b.com/r/index.json and each component's full
payload (metadata + source) at https://ui.logic2b.com/r/<name>.json.

## Docs

- [Introduction](https://ui.logic2b.com/docs/index.md): Build interfaces fast, assisted by AI. Copy-paste React components you own.
- [Installation](https://ui.logic2b.com/docs/installation.md): How to set up your project and start using logic2b ui components.
- [For LLMs & Agents](https://ui.logic2b.com/docs/llms.md): logic2b ui is designed to be consumed by AI agents. Here is the machine-readable surface.
- [Theming](https://ui.logic2b.com/docs/theming.md): CSS variables, dark mode and radius. Change the look of every component from one place.

## Components

- [Accordion](https://ui.logic2b.com/docs/components/accordion.md): A vertically stacked set of interactive headings that each reveal a section of content.
- [Alert](https://ui.logic2b.com/docs/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](https://ui.logic2b.com/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://ui.logic2b.com/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Avatar](https://ui.logic2b.com/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://ui.logic2b.com/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://ui.logic2b.com/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](https://ui.logic2b.com/docs/components/button.md): Displays a button or a component that looks like a button.
- [Card](https://ui.logic2b.com/docs/components/card.md): Displays a card with header, content, and footer.
- [Checkbox](https://ui.logic2b.com/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Collapsible](https://ui.logic2b.com/docs/components/collapsible.md): An interactive component which expands and collapses a panel of content.
- [Command](https://ui.logic2b.com/docs/components/command.md): Fast, composable command menu for React.
- [Dialog](https://ui.logic2b.com/docs/components/dialog.md): A window overlaid on the primary window, rendering content that requires the user's attention.
- [Dropdown Menu](https://ui.logic2b.com/docs/components/dropdown-menu.md): Displays a menu of actions or options triggered by a button.
- [Hover Card](https://ui.logic2b.com/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Input](https://ui.logic2b.com/docs/components/input.md): Displays a form input field.
- [Label](https://ui.logic2b.com/docs/components/label.md): Renders an accessible label associated with controls.
- [Pagination](https://ui.logic2b.com/docs/components/pagination.md): Renders page navigation links for paginated content.
- [Popover](https://ui.logic2b.com/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://ui.logic2b.com/docs/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Radio Group](https://ui.logic2b.com/docs/components/radio-group.md): A set of checkable buttons where no more than one can be checked at a time.
- [Scroll Area](https://ui.logic2b.com/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://ui.logic2b.com/docs/components/select.md): Displays a list of options for the user to pick from—triggered by a button.
- [Separator](https://ui.logic2b.com/docs/components/separator.md): Visually or semantically separates content.
- [Sheet](https://ui.logic2b.com/docs/components/sheet.md): Extends the Dialog component to display content that complements the main content of the screen.
- [Skeleton](https://ui.logic2b.com/docs/components/skeleton.md): Use to show a placeholder while content is loading.
- [Slider](https://ui.logic2b.com/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Sonner](https://ui.logic2b.com/docs/components/sonner.md): An opinionated toast component.
- [Switch](https://ui.logic2b.com/docs/components/switch.md): A control that allows the user to toggle between checked and not checked.
- [Table](https://ui.logic2b.com/docs/components/table.md): A responsive table component.
- [Tabs](https://ui.logic2b.com/docs/components/tabs.md): A set of layered sections of content, only one of which is displayed at a time.
- [Textarea](https://ui.logic2b.com/docs/components/textarea.md): Displays a form textarea that auto-sizes to its content.
- [Toggle](https://ui.logic2b.com/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://ui.logic2b.com/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://ui.logic2b.com/docs/components/tooltip.md): A popup that displays information related to an element when it receives focus or the mouse hovers over it.

## Optional

- [Full documentation in one file](https://ui.logic2b.com/llms-full.txt)