Base UI Usage Review
Review Base UI (@base-ui/react) component usage for correctness, accessibility, and adherence to official patterns.
Quick Reference
- •Package name:
@base-ui/react(NOT@base-ui-components/reactor@mui/base) - •Import pattern:
import { Button } from '@base-ui/react/button' - •Render prop pattern:
render={<a />}orrender={(props, state) => <button {...props} />} - •State functions:
className={(state) => ...},style={(state) => ...} - •Data attributes: Components expose
data-*attributes for styling (e.g.,data-disabled,data-open) - •Event prevention: Use
event.preventBaseUIHandler()to skip component's internal handler
Review Process
- •Verify import paths - Must be
@base-ui/react/* - •Check render prop usage - Verify correct element/callback form, props spread
- •Verify component structure - See each component's Structure section
- •Run component checklist - Each component file has error patterns to flag
- •Audit accessibility - Check for required semantic components (Title, Label, etc.)
- •Review styling approach - Confirm state-aware styling patterns
Reference Files
- •Render Prop Patterns - Deep dive on render prop usage
- •Anti-Patterns - Generic mistakes and fixes
- •Styling & Animation - CSS/JS animation patterns and styling approaches
- •Forms Integration - Form building and library integration
Component Reference
Each component file contains: Structure (required nesting), Gotchas (traps), Review Checklist (error patterns to flag).
Layout & Navigation
- •Accordion - Collapsible content sections
- •Collapsible - Single show/hide section
- •Tabs - Tabbed interface
- •NavigationMenu - Site navigation with dropdowns
- •Menubar - Application menu bar
- •Toolbar - Toolbar with keyboard navigation
- •ScrollArea - Custom scrollbars
Overlays & Popups
- •Dialog - Modal dialog
- •AlertDialog - Confirmation dialog
- •Menu - Dropdown menu
- •ContextMenu - Right-click menu
- •Popover - Floating content panel
- •Tooltip - Hover text hints
- •PreviewCard - Hover preview cards
- •Toast - Notification toasts
Form Controls
- •Field - Form field wrapper with validation
- •Fieldset - Form field grouping
- •Form - Form container
- •Button - Button component
- •Input - Text input
- •Checkbox - Checkbox control
- •CheckboxGroup - Multiple checkboxes
- •RadioGroup - Radio button group
- •Switch - Toggle switch
- •Select - Dropdown select
- •Combobox - Filterable dropdown (restricted)
- •Autocomplete - Text autocomplete (free input)
- •NumberField - Numeric input with stepper
- •Slider - Range slider
- •Toggle - Toggle button
- •ToggleGroup - Toggle button group