dir/ui — Components for internal tools

React components and application templates for building internal tools with Base UI and Tailwind CSS.
# dir/ui

> React components and copyable application templates for internal tools. React 19, Base UI, Tailwind CSS 4, React Hook Form, Recharts, and react-data-grid.

Install individual components or complete templates with shadcn. Each Markdown document contains installation, imports, props, types, and integration constraints. Registry JSON contains the complete implementation and dependency versions. The library has no Dir runtime dependency.

## Basics

- [Button](https://ui.usedir.com/components/button.md): A button with emphasis, size, and disabled states.
- [Icons](https://ui.usedir.com/components/icons.md): Use consistent line icons for actions, navigation, and record types.

## Layout

- [Header](https://ui.usedir.com/components/header.md): Align a page title, leading content, and actions in one row.
- [Sidebar](https://ui.usedir.com/components/sidebar.md): Compose workspace navigation with groups, links, and a mobile sheet.
- [Tabs](https://ui.usedir.com/components/tabs.md): Organize content into underlined horizontal or vertical tabs.

## Input

- [Field](https://ui.usedir.com/components/field.md): Associate an input with its label, description, and validation error.
- [Input](https://ui.usedir.com/components/input.md): A single input for text, numeric, money, percentage, date, and time values.
- [Textarea](https://ui.usedir.com/components/textarea.md): A multiline text input with validation and disabled states.
- [Rich text](https://ui.usedir.com/components/rich-text.md): A document editor for formatted text, lists, tables, and references.
- [File upload](https://ui.usedir.com/components/file-upload.md): Select or drop files with validation, progress, cancellation, and retry.

## Selection

- [Checkbox](https://ui.usedir.com/components/checkbox.md): A checkbox with checked, mixed, and disabled states.
- [Radio](https://ui.usedir.com/components/radio.md): A group of mutually exclusive options with keyboard navigation.
- [Switch](https://ui.usedir.com/components/switch.md): A two-state control for turning a setting on or off.
- [Select](https://ui.usedir.com/components/select.md): Select one value from a fixed list of options.
- [Multi select](https://ui.usedir.com/components/multi-select.md): Select multiple values from a fixed list of options.
- [Combobox](https://ui.usedir.com/components/combobox.md): Search a list of options and select a single value.
- [Multi combobox](https://ui.usedir.com/components/multi-combobox.md): Search and select multiple values with removable chips.

## Inline editing

- [Inline input](https://ui.usedir.com/components/inline-edit.md): Edit typed values in place with the same type options as Input.
- [Inline textarea](https://ui.usedir.com/components/inline-textarea.md): Edit multiline text in place with save and cancel controls.
- [Inline select](https://ui.usedir.com/components/inline-select.md): Select and save choices directly in a record property.
- [Inline multi select](https://ui.usedir.com/components/inline-multi-select.md): Select and save choices directly in a record property.
- [Inline combobox](https://ui.usedir.com/components/inline-combobox.md): Search and save record, member, status, or tag choices in place.
- [Inline multi combobox](https://ui.usedir.com/components/inline-multi-combobox.md): Search and save record, member, status, or tag choices in place.
- [Inline rich text](https://ui.usedir.com/components/inline-rich-text.md): Edit a formatted document directly in a record property.

## Data display

- [Number value](https://ui.usedir.com/components/number-value.md): Format numbers, money, and percentage points without an editing control.
- [Date value](https://ui.usedir.com/components/date-value.md): Format dates and timestamps with an explicit locale and timezone.
- [Choice value](https://ui.usedir.com/components/choice-value.md): Display record, member, status, and tag labels without edit affordances.
- [List](https://ui.usedir.com/components/list.md): Display items with optional icons, descriptions, metadata, and actions.
- [List item](https://ui.usedir.com/components/list-item.md): Arrange a title, description, metadata, and optional leading or trailing content.
- [Table](https://ui.usedir.com/components/table.md): A semantic table for compact, read-only collections.
- [DataGrid](https://ui.usedir.com/components/data-grid.md): A virtualized grid with search, sorting, filters, column menus, and optional editing.
- [Record List](https://ui.usedir.com/components/record-list.md): Browse a virtualized data grid with search, multi-column sorting, and grouped filters.
- [Chart](https://ui.usedir.com/components/chart.md): Compose responsive Recharts charts with shared colors, tooltips, and legends.

## Overlay

- [Tooltip](https://ui.usedir.com/components/tooltip.md): Show a short explanation on hover or keyboard focus.
- [Popover](https://ui.usedir.com/components/popover.md): Open arbitrary content in a panel anchored to a trigger button.
- [Dropdown menu](https://ui.usedir.com/components/dropdown-menu.md): Present actions and checkable items in a button-triggered menu.
- [Dialog](https://ui.usedir.com/components/dialog.md): Present focused content with a modal backdrop and managed focus.
- [Alert dialog](https://ui.usedir.com/components/alert-dialog.md): Confirm an important action before applying it.
- [Sheet](https://ui.usedir.com/components/sheet.md): Present contextual content in a panel from either side of the screen.
- [Search dialog](https://ui.usedir.com/components/search-dialog.md): Search caller-provided results in a dialog with keyboard navigation and custom content.

## Feedback

- [Skeleton](https://ui.usedir.com/components/skeleton.md): Reserve space while a small part of the interface loads.
- [Empty state](https://ui.usedir.com/components/empty-state.md): Explain an empty collection and the next available action.
- [Error state](https://ui.usedir.com/components/error-state.md): Display an error message with an optional retry action.
- [Toast](https://ui.usedir.com/components/toast.md): Announce action results without interrupting the current task.

## Application templates

- [CRM](https://ui.usedir.com/examples/crm.md): Companies, people, deals, and reports in a complete CRUD application.